Несколько примеров использования CSS3.

Border-radius.

Очень важная и нужная штука. Сколько существует способов сделать закругленные углы у блока? Сотни. Манипуляции с кучей картинок, JavaScript и прочие сложности ни к чему. CSS3 предлагает нам просто прописывать ‘border-radius’ и нужных нам блоков, а о закруглении позаботится браузер.
Да, этот способ не кроссбраузерный и старые добрые пользователи IE увидят обычные не закругленные уголки. Но этот способ закругления гораздо лучше, чем се остальные. Причин тому несколько:

Нынче стало очень модно держать в чистоте свою HTML страницу. Это всегда хорошо – документ становится прост в дальнейшем использовании. При ошибке загрузки CSS файла сайт останется понятным и читабельным.

Скорость всегда выше, когда не нужно грузить лишние картинки и JavaScript.

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

Как использовать?

Вот пример использования свойства border-radius:

<div style=" background-color: #EBE9E9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;
width: 382px" >
Border Radius - это здорово!
</div>

-moz-border-radius: 5px; – это для браузеров Mozilla,
-webkit-border-radius: 5px; – a это для Safari и Google Chrome.
А вот как это выглядит:

Text-shadow

Очень красивая и незаменимая в дизайне вещь. Хороший пример использования этого CSS3 свойства ожно найти на сайте wordpress.org в навигации.

А вот и сам CSS код этой навигации:

color:#999999;
font-family:"Lucida Grande",Tahoma,"Bitstream Vera Sans",Arial,sans-serif;
font-size:14px;
font-weight:normal;
text-shadow:1px 1px 1px #333333;

Как видите, в использовании это свойство очень просто, а результат отменный.

@font-face

Этот параметр позволяет присваивать тексту сайта любой шрифт, и не обязательно, чтобы он был установлен у пользователя. Вам просто нужно указать путь к файлу шрифта на вашем сервере (или любом другом) и шрифт отобразится на сайте.
Применяется это примерно так:
Сначала нужно указать путь к шрифту:

1
2

@font-face { 	font-family: Helvetica; 	src: url('Helvetica.otf'); } 
@font-face { 	font-family: Helvetica; 	font-weight: bold; 	src: url('Helvetica-Bold.otf'); }

А потом использовать его с любыми классами и идентификаторами:

h3 { font-family: Delicious, sans-serif; }

Multiple backgrounds

Это свойство исполнило мою давнюю мечту — возможность присвоения блоку сразу нескольних фоновых изображений. Теперь, по стандартам CSS3 можно просто прописать такое:

1
2
3
4
5

background: 
url(gradient-top.gif) top left no-repeat, 
url(gradient_fresco.jpg)  top 11px no-repeat, 
url(gradient-bottom.gif) bottom left no-repeat, 
url(gradient-middle.gif) left repeat-y;

И у объекта, которому вы присвоите эти свойства, появятся сразу четыре фоновых изображения.

Следует не забывать, что CSS3 не поддерживается старыми браузерами, но все продвинутые веб разработчики уже рекомендуют его использовать.

Поделиться с общественностью на Твиттере.