Практика » Малюємо в CSS - посібник для початківців


22 жовтня 2011 від admin
Якось ми вже розглядали можливості малювання на сервері - мова йшла про 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>

Подивіться що вийшло - не дуже нагадує іконку, правда? Тож спробуємо додати стилі для класу twitter:

* { 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);

Знову подивимось. З градієнтом на мій погляд набагато симпатичніше. Наостанок давайте додамо трохи ефектів, які будуть з'являтися при наведенні мишкою. А заодно приберемо підкреслення:

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

І ось він - підсумковий результат. Сподіваюся що даний приклад послужить уроком, після якого ви зможете "малювати" елементи сайту за допомогою CSS 3.