вПолезное

Новые тренды в дизайне с использованием CSS3

После того как была выпущена новая версия 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;
}

встроенная манипуляция DOM


5. Использование инструментов WebKit. Во-первых упростил использование некоторых компонентов,  во-вторых даёт возможность задавать прозрачность, повороты и многие другие свойства.

p {
opacity: .7;
color: #333;
-webkit-transition: opacity 1s linear;
-webkit-transition: color 1s linear;
}
p:hover {
opacity: 1;
color: #000;
}

Автор:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *