Голосование по поводу использования CSS3 закончилось и судя по результатам, половина проголосовавших уже использует те возможности, которые присутствуют в современных браузерах.
И это не удивительно. Новые возможности делают процесс разработки намного проще и быстрее. Конечно использовать новые свойства в коммерческих проектах ещё рано, но поэкспериментировать и использовать некоторые из них, например на своём блоге, вы можете уже сейчас. На данный момент наибольшая поддержка CSS3 присутствует в Safari/Chrome и Firefox, однако пишут, что в новой версии Opera 10.50 также будут реализованы некоторые возможности.
Я тоже не остался в стороне и немного освежил внешний вид блога, добавив следующие CSS3 свойства.
Скруглённые уголки
Все элементы на блоге с такими уголками реализованы с помощью свойства border-radius. Непосредственно само свойство пока нигде не поддерживается, но в некоторых браузерах есть соответствующие проприетарные свойства.
border-radius:5px; -moz-border-radius:5px; /* Firefox */ -webkit-border-radius:5px; /* Safari/Chrome */
Тени
Для создания тени у блоков используется свойство box-shadow. Ситуация с поддержкой этого свойства аналогична предыдущему.
box-shadow:1px 1px 1px #000; -moz-box-shadow:1px 1px 1px #000; -webkit-box-shadow:1px 1px 1px #000;
Первое и второе значения задают смещения соответственно по оси X и Y. Третье значение определяет радиус размытия тени.
Тень у текста создаётся с помощью свойства text-shadow.
text-shadow:1px 1px 1px #000;
Градиенты
В некоторых блоках я использовал градиентный фон.
background:-moz-linear-gradient(-90deg,#000,#fff); background:-webkit-gradient(linear, left top, left bottom, from(#000), to(#fff));
Как видите, описания параметров градиента у браузеров на данный момент различаются, но суть у них одна.
Итог
Всё это лишь краткое описание нескольких свойств, которые использовал я. Кроме этого есть множество других, не менее интересных возможностей. Советую почитать соответствующие статьи например на Smashing Magazine или CSS3.info.
Удачи!
Loading ...
