Несколько советов по CSS3, которые вам следует знать

Многие из вас, возможно, слышали много слухов о CSS3, но какие методы CSS3 мы можем использовать сегодня? В этой статье я покажу вам некоторые отличительные методы CSS3, которые хорошо работают в некоторых основных браузерах (таких как Firefox, Chrome, Safari, Opera). Эти эффекты ухудшат рендеринг в неподдерживаемых браузерах (например, Internet Explorer). Многие из предложенных стилей CSS3 можно использовать «из коробки», используя объявления, специфичные для браузера.

Если вы не знаете, что такое объявления, специфичные для браузера, вам просто нужно помнить, что все они представляют собой определенные префиксы перед свойствами стиля CSS, связанными с поставщиком ядра. Поскольку CSS3 еще не полностью поддерживается, нам необходимо использовать эти конкретные объявления. Конкретная форма выглядит следующим образом:

* Префикс браузера Mozilla/Firefox/Gecko: -moz-
* Префикс браузера Webkit (Safari/Chrome): -webkit- (Примечание: некоторые префиксы Wbkit можно использовать только в Safari и не поддерживаются Chrome.)

Как вы, возможно, заметили, одним из недостатков использования этих объявлений является то, что если мы хотим получить эффекты CSS3 в Firefox, Safari и Chrome, нам необходимо использовать все вышеперечисленные префиксы. Неудивительно, что Internet Explorer не поддерживает CSS3 и, следовательно, не имеет специального объявления префикса, как другие основные браузеры.

Ладно, хватит об этом, давайте попробуем прямо сейчас. Примечание. Объявления стилей без этих префиксов представляют собой фактические предложения спецификаций стандарта W3.

Демо (пример) описание этой страницы

Все эти примеры находятся на этой странице. Если вы не можете нормально просмотреть эффекты примеров (или можете просмотреть только их часть), это означает, что используемый вами браузер не поддерживает эти эффекты CSS3.

эффект тени

Эффекты тени принимают несколько значений параметров. Первое — это цвет тени, который также принимает четыре других значения длины (длины). Первые два значения длины — это смещение по X (горизонтальное) и смещение по Y (вертикальное). Следующий параметр — это значение, отражающее нечеткость. Четвертое и последнее значение используется для определения степени размытия.

коробка-тень: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

Демонстрация эффекта тени

эффект градиента

Стили градиентов CSS3 поначалу могут сбить с толку, особенно различия между градиентами -moz и -webkit. В -moz вам сначала нужно определить направление градиента, а затем определить начальный и конечный цвета. Градиент -webkit немного сложнее. Сначала вам нужно определить тип градиента, затем следующие два значения определяют направление, а последние два значения определяют начальный цвет и конечный цвет. градиента.

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(линейный, слева вверху, слева внизу, от (#1aa6de), до (#022147));

Демонстрация эффекта градиента

Цветовой режим RGBA

Фактическое определение цвета RGBA не так сложно, как кажется. Оно принимает четыре значения параметров: значение красного, значение зеленого, значение синего и прозрачность. Мы не используем шестнадцатеричное значение цвета (#). Мы устанавливаем цвет в режиме RGB, где прозрачность может задать эффект прозрачности цвета. Прозрачность варьируется от 0 до 1, где 0 означает полную непрозрачность, а 1 — полную прозрачность. Прозрачность следующих демонстрационных примеров равна 0,5, прозрачность элемента — 50%, rgba не требует какого-либо специального объявления префикса браузера.

цвет фона: rgba(0, 54, 105, .5);

Цветовой режим HSL (Оттенок H, Насыщенность S, Яркость L)

Помимо RGBA, CSS3 также поддерживает цветовой режим HSL. Это дает нам большую свободу в выборе цветов и тонов. В цветовой модели HSL H обозначает оттенок, S — цветность, а L — яркость. Оттенок — это значение угла на цветовом круге, а насыщенность и яркость — это процентные значения цвета.

цвет фона: hsl(209,41,2%, 20,6%);

Демонстрационный пример HSL

цвет границы

Чтобы использовать этот стиль CSS, вам необходимо определить верхнюю границу, правую границу, нижнюю границу и левую границу соответственно, чтобы добиться следующих эффектов. Вы заметили, что определена граница в 8 пикселей, а затем граница определяется в 8 разных цветах. Это связано с тем, что количество цветов границы должно соответствовать значению ширины границы в пикселях.

граница: 8 пикселей, сплошная #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

Демо-версия цвета границы

Настройки цвета выделения текста

Я должен сказать, что определение цвета выделения текста — довольно интересная новая функция. Когда я впервые увидел это в «Советах по CSS», я подумал, что это очень продуманно. С помощью пары псевдоэлементов ::selection вы можете изменить цвет и фон, когда пользователь выбирает текстовый элемент. Если вы спрашиваете мнение, я думаю, это очень красиво. Хотя ::selection был удален из текущего черновика CSS3, мы надеемся добавить его позже.

::selection {background: #3C0; /* Safari */color: #90C;}::-moz-selection {background: #3C0; /* Firefox */color: #90C;}

Демо-версия цвета выделения текста

деформация

С помощью стилей преобразования вы можете увеличить размер элемента при наведении курсора мыши. Установите для параметра «Масштаб» значение больше 1, и элемент уменьшится. И наоборот, если значение меньше 1, размер элемента уменьшается. Помимо Scale, доступно множество других различных деформаций. Вы можете посетить страницу разработчиков Firefox, чтобы узнать, чего они могут достичь.

-moz-transform: масштаб (1,15); -webkit-transform: масштаб (1,15);

Демонстрация эффекта деформации

многоколоночный макет

С помощью этого нового стиля макета с несколькими столбцами вы можете придать тексту эффект макета «газеты». По сравнению с методом реализации в CSS2, в CSS3 нам гораздо проще добиться такого типа эффекта. Ниже я указываю необходимое количество столбиков птице, а также тип правил разделения и насколько большими должны быть промежутки между столбцами. Его легко использовать, не так ли?

-moz-column-count:3;-moz-column-rule: сплошной 1 пиксель, черный;-moz-column-gap: 20 пикселей;

Подвести итог

Надеюсь, я так же воодушевлен этими возможностями CSS3, как и я. Это дает веб-дизайнерам и разработчикам больше возможностей и упрощает многие аспекты. Теперь нам просто нужно дождаться, пока все браузеры поддержат его. Конечно, знания, которые я здесь демонстрирую, — это лишь верхушка айсберга новых возможностей CSS3. Если вам нужна дополнительная информация, советы и помощь, я рекомендую вам посетить следующие веб-сайты.