Пользователь:    Пароль:    Запомнить     
 

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

Опубликовано admin-ом в категории css

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

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

html-код у нас будет прост до безобразия, всего один параграф, в котором содержится всего одна ссылка:

  1. <p style="padding:20px;"><a class='twitter' href='http://twitter.com/webamator'>t</a></p>


Посмотрите что получилось - не очень напоминает иконку, верно?

  1. * { margin: 0; padding: 0;}
  2. html { overflow-x: auto; }
  3.  
  4. .twitter{
  5. display: block;
  6. position: relative;
  7. width: 116px;
  8. height: 116px;
  9. padding: 0;
  10. border-color: #000053;
  11. text-align:center;
  12. text-shadow: 0px 0px 10px #fff;
  13. text-transform: lowercase;
  14. font-size: 96px;
  15. font-weight: bold;
  16. font-family: Tahoma;
  17. color: #fff;
  18. background: #0c7eee;
  19. }


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

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


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

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

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


Про префиксы уже говорилось выше, а что такое border-radius, думаю скажет каждый кто в 3-ем классе не прогуливал английский. Подсказка для тех кто прогуливал - переводится как "радиус рамки". Смотрим. Уже симпатичнее, верно?

  1. background: -webkit-linear-gradient(top, #3faeee, #0c7ccc);
  2. background: -moz-linear-gradient(top, #3faeee, #0c7ccc);
  3. background: -o-linear-gradient(top, #3faeee, #0c7ccc);
  4. background: linear-gradient(top, #3faeee, #0c7ccc);


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

  1. a.twitter{
  2. text-decoration:none;
  3. }
  4.  
  5. a.twitter:hover{
  6. box-shadow: 0px 0px 10px #2e9eee;
  7. text-shadow: 0px 0px 15px #fff;
  8. }


И вот он - итоговый результат. Надеюсь что данный пример послужит уроком, после которого вы сможете "рисовать" элементы сайта при помощи CSS 3.

  отпавить с помощью email кому-нибудь   для печати   просмотр в pdf