Способы подключения разных стилей для разных разрешений экрана, тень, скругления, масштабирование фона с помощью css3.
Border-radius:
.block
{
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
-khtml-border-radius: 10px; /* KHTML */
border-radius: 10px; /* CSS3 */
}
Box-shadow:
.block
{
-moz-box-shadow: 5px 5px 20px rgba(0,0,0,0.2); /* Для Firefox */
-webkit-box-shadow: 5px 5px 20px rgba(0,0,0,0.2); /* Для Safari и Chrome */
-khtml-box-shadow: 5px 5px 20px rgba(0,0,0,0.2); /* KHTML */
box-shadow: 5px 5px 20px rgba(0,0,0,0.2); /* CSS3 */
}
Box-shadow для ИЕ:
<!--[if IE]>
<style type="text/css">
.block {
filter:
progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=45, Strength=2)
progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=2)
progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=225, Strength=2)
progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=315, Strength=2);
position: relative;
zoom: 1;
}
</style>
<![endif]-->
CSS3: Как растянуть фон на всю ширину окна
-moz-background-size: 100%; /* Firefox 3.6+ */ -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */ -o-background-size: 100%; /* Opera 9.6+ */ background-size: 100%; /* Современные браузеры */
Этот вариант масштабирует по ширине, что не совсем годится при широком фоновом изображении для мобильных устройств.
В такой ситуации можно использовать значение cover
Cover масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
background-size: cover; /* масштабируем с сохранением пропорций */
Подключение разных таблиц стилей под разные разрешения экрана:
<link rel="stylesheet" media="(min-width:1980px)" href="style1980.css"> <link rel="stylesheet" media="(max-width:1979px)" href="style.css">
Запрет выделения текста средствами css.
Работает в Firefox, Chrome/Safari, IE10+
.element {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}