DEMETR Создание сайтов в Казани

Опубликовано

Использование CSS3

Интернет-технологии очень активно развиваются. Когда то в 2008 году, когда я начинал верстать и осваивать веб-технологии стало модно делать закругленные блоки. Возможно это началось и раньше, но тогда я еще был далек от интернета — аська на телефоне и доволен.

Использовать закругленные уголки в то время считалось очень круто и модно, и лепил где только подвернется. А тогда была Joomla 1.0 (1.5 еще работала с кучей ошибок), а в ней максимальная конструкция вывода блока была тремя вложенными div’ами. И крутись как можешь. В Joomla 1.5 эта проблема изящно решилась, предоставив создателю шаблонов самому настраивать вывод (почитать можно здесь).

Потом потихоньку стали пробираться CSS3. Тень у ссылок в главном меню — большинство пищало от восторга. Вау, круто. И те самые закругленные блоки, теперь можно запросто сделать несколькими строчками:

html

<div class="round-block">Я текст в модном блоке.</div>

css

div.round-block{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding:5px;
    display:inline-block;
    background:#eee;
}

Добавляем тень:

-webkit-box-shadow: 0px 0px 3px #999;
-moz-box-shadow: 0px 0px 3px #999;
box-shadow: 0px 0px 3px #999;

Подробнее о свойствах на html-book.ru

Внутренняя тень, добавляем параметр inset

-webkit-box-shadow:inset 0px 0px 3px #999;
-moz-box-shadow:inset 0px 0px 3px #999;
box-shadow:inset 0px 0px 3px #999;

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

Добавляем градиент

background: -moz-linear-gradient(top,  #ffffff 0%, #e2e2e2 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed)); 
background: -webkit-linear-gradient(top,  #ffffff 0%,#ededed 100%); 
background: -o-linear-gradient(top,  #ffffff 0%,#ededed 100%); 
background: -ms-linear-gradient(top,  #ffffff 0%,#ededed 100%); 
background: linear-gradient(top,  #ffffff 0%,#ededed 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */
background-color: #e2e2e2;

Все результаты можно посмотреть здесь.

Если все остальные свойства работают только в современных браузерах, то градиент поддерживается даже IE6.

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

Использование CSS3: 0 комментариев