После того как была выпущена новая версия CSS, дизайнеры кинулись использовать новые внедрения, которые, что скрывать, очень сильно упростили жизнь. Более того интеграция с HTML5 даёт в совокупности огромные возможности. Несмотря на то, что CSS3 имеет большой функционал, о котором можно писать и писать, в этой статье собраны 5 основных тенденций, которые были замечtны с момента выпуска CSS3 и которые довольно часто используют при создании сайта.
1. Работа с медиа файлами. Вы можете проверять и устанавливать размеры браузера, на котором должен правильно отображается код.
Этот простой код будет проверять, если размер окна 480px, т.е. размер окна Iphone, то тогда применить следующие стили.
@media only screen and (max-device-width: 480px)
{ /* styles here */ }
2. Создание динамических градиентов.
Вот довольно-таки простой код, который задаст градиент при помощи css стилей, а не при помощи изображений, как это делалось раньше.
div.head {
background-color: #1a82f7; /* fallback color */
background-image: url(‘img/bg_1.png’) repeat-x; /* fallback image */
background-image: -moz-linear-gradient(100% 100% 90deg, #2F2727, #1a82f7);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
}
3. Создание динамических теней.
Теперь чтобы сделать предмет более объёмным при помощи теней, вам не обязательно создавать изображения тени и подстраивать его под другое изображение, при помощи всего лишь одной строки заданой в файле стилей, вы сможете это легко сделать.
div.box {
box-shadow: 5px 3px 10px 0 #000;
}
4. Встроенная манипуляция DOM(Document Object Model). В частности вы можете задавать размеры, отступы для ваших объектов.
*,html,body {
box-sizing: content-box | border-box | inherit;
}
5. Использование инструментов WebKit. Во-первых упростил использование некоторых компонентов, во-вторых даёт возможность задавать прозрачность, повороты и многие другие свойства.
p {
opacity: .7;
color: #333;
-webkit-transition: opacity 1s linear;
-webkit-transition: color 1s linear;
}
p:hover {
opacity: 1;
color: #000;
}
