Порылся по справочникам, почитал описание CSS третьего уровня… офигительная штука! Жаль, правда, что штука эта в настоящее время не может эффективно использоваться для сайтостроения, ведь, по большому счету, до сих пор этот язык поддерживают лишь FF и Safari, да и то частично, а полностью пока ни один браузер так в нем и не разбирается. Однако я считаю, что CSS3 веб-мастерам учить все-таки необходимо… проще будет въехать когда перестанут использоваться старые браузеры, да и просто приятно посмаковать новые возможности, чем мы сейчас и займемся.

Например, углы у блоков закруглять будет проще простого, пишем такой код:

#border_rounded {
border: 2px solid #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 166px;
height: 166px;
}

Получаем такой блок:



Кроме всего прочего, даже бордер градиентный можно замутить. Делается это следующим образом:

#border_gradient {
border: 10px solid #000;
-moz-border-bottom-colors: #000 #111 #222 #333 #444 #555 #666 #777 #888 #999;
-moz-border-top-colors: #000 #111 #222 #333 #444 #555 #666 #777 #888 #999;
-moz-border-left-colors: #000 #111 #222 #333 #444 #555 #666 #777 #888 #999;
-moz-border-right-colors: #000 #111 #222 #333 #444 #555 #666 #777 #888 #999;
width: 150px;
height: 150px;
}

Получаем такую красотищу:



Что еще? Да хоть тень сделать блоку и тексту если применить такие стили:

#block_shadow {
border: 1px solid #000;
-moz-box-shadow: 10px 10px 5px #888;;
-webkit-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 145px;
height: 145px;
}

#text_shadow {
color: #999;
text-shadow: 2px 2px 2px #999;
}

Браузер показывает это так:



Можно, кстати, средствами CSS3 указывать путь до вашего шрифта, чтобы использовать его на сайте:

@font-face {
font-family: 'Название вашего шрифта';
src: url(''font.ttf'');
}

Круто, правда?! Плюс еще огромное количество всяких вкусностей! Средствами CSS3 можно делать блоки, растягивающиеся мышой, можно назначать opacity для разных элементов, да хоть бы и для background-color, многое еще можно делать… например, анимацию…

Ах, да! Еще вроде переменные грозились ввести в язык. Так CSS станет похож на полноценный язык программирования и управления элементами HTML. Переменными пользуемся следующим образом:

@variables {
LogoBGColor: #fe8d12;
}
#logoContainer {
background-color: var(LogoBGColor);
}

Здесь селектор variables определяет имя переменной и ее значение, которое потом можно будет присвоить любому элементу… не совсем, правда, понятно зачем объявлять переменную, когда можно тупо указать необходимые стили, от этого даже объем кода не изменится, не совсем продумана идея имхо…

В общем учусь и жду дня X — дня, когда все браузеры на планете будут понимать CSS третьего уровня. Надеюсь, доживу до этого времени… может хоть внуки дождутся…