Статьи, пособия, примеры начинающим вебмастерам.

Горячий поиск: PHP CSS SEO
Главная » ГлавнаяCSS Рисуем в CSS - пособие для начинающих

Рисуем в CSS - пособие для начинающих

Однажды мы уже рассматривали возможности рисования на сервере - речь шла о GD, PHP-библиотеке для работы с графикой, а в этот раз хочу предложить порисовать... без рисунков. Думаете, так не бывает? Давайте попробуем, а в качестве помощника у нас будет CSS. В тетьей версии CSS содержит достаточно мощные и гибкие возможности - мы попробуем рассмотреть их использование. Единственно, что придется учитывать - это IE, который до 8-ой версии включительно не понимает CSS 3.

В качестве готового примера можете рассмотреть иконки подписок на моем блоге - иконка RSS сделана без использования графических изображений. Давайте сделаем такую же кнопку для твиттера?

html-код у нас будет прост до безобразия, всего один параграф, в котором содержится всего одна ссылка:
<p style="padding:20px;">
<a class='twitter' href='http://twitter.com/webamator'>t</a>
</p>

Посмотрите что получилось - не очень напоминает иконку, верно?
* { margin: 0; padding: 0;}
html { overflow-x: auto; }

.twitter{
display: block;
position: relative;
width: 116px;
height: 116px;
padding: 0;
border-color: #000053;
text-align:center;
text-shadow: 0px 0px 10px #fff;
text-transform: lowercase;
font-size: 96px;
font-weight: bold;
font-family: Tahoma;
color: #fff;
background: #0c7eee;
}

Снова смотрим что получилось. Кстати обратите внимание на эффект тени - результат свойства text-shadow. Однако синий квадрат - не совсем то что мы хотели, верно?

Давайте добавим немного магии CSS 3
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);
box-shadow: 0 0 4px rgba(0,0,0,0.4);

обратите внимание, что box-shadow указано три раза (с префиксом webkit, moz и без префикса). Префиксы нужны для того, чтобы данное свойство корректно отображали более старые версии Safari, Google Chrome и Mozilla Firefox. Все новые версии (актуальные на момент написатия статьи) данных браузеров, а также Opera и IE9 понимают данные свойства бес префиксов, так что использовать их или нет - решать только вам.

Если посмотреть текущий результат то можно заметить небольшую тень вокруг синего квадрата - это и есть результат box-shadow.

Давайте добавим еще одно свойство:
-webkit-border-radius:  5px;
-moz-border-radius: 5px;
border-radius: 5px;

Про префиксы уже говорилось выше, а что такое border-radius, думаю скажет каждый кто в 3-ем классе не прогуливал английский. Подсказка для тех кто прогуливал - переводится как "радиус рамки". Смотрим. Уже симпатичнее, верно?
background: -webkit-linear-gradient(top, #3faeee, #0c7ccc);
background: -moz-linear-gradient(top, #3faeee, #0c7ccc);
background: -o-linear-gradient(top, #3faeee, #0c7ccc);
background: linear-gradient(top, #3faeee, #0c7ccc);

Ради более старой версии Opera (11.10 - 11.50) используется префикс -o-
Снова любуемся. Ну как? С градиентом на мой взгляд гораздо симпатичнее. Напоследок давайте добавим немного "красивостей" которые будут появляться при наведении мышкой. А заодно уберем подчеркивание:
a.twitter{
text-decoration:none;
}

a.twitter:hover{
box-shadow: 0px 0px 10px #2e9eee;
text-shadow: 0px 0px 15px #fff;
}

И вот он - итоговый результат. Надеюсь что данный пример послужит уроком, после которого вы сможете "рисовать" элементы сайта при помощи CSS 3.
Категория: CSS
Опубликовано: 22 октября 2011, просмотров: 2522
 (Голосов: 5)

Комментирование данной новости запрещено.
Чужих не бывает

Валидация

Правильний CSS!

Valid XHTML 1.0 Transitional

Статистика

Генерация страницы: 0.35 секунд, SQL-запросов: 10.

Copyright

© 2008-2013 webamator.ru

Условия заимствования материалов.