Створюємо макет сайту без зображень за допомогою HTML5/CSS3 – частина 2

18

Від автора: В першій частині цієї статті — Створюємо макет сайту без зображень за допомогою HTML5/CSS3 – частина 1 ми закінчили пояснювати всі елементи HTML5, використовувані в коді нашої демо-сторінки index.html і сьогодні обговоримо властивості CSS, застосовувані для того, щоб зробити її красивою.

Створюємо макет сайту без зображень за допомогою HTML5/CSS3 – частина 2

Ось вам пам’ятка про те, як буде виглядати розмітка після того, як ми закінчимо використовувати всі властивості CSS3:

Створюємо макет сайту без зображень за допомогою HTML5/CSS3 – частина 2

Перед тим, як ми приступимо до практичних кроків, я Вам рекомендую переглянути демо-результат роботи.

Також завантажте вихідні коди собі на комп’ютер!

CSS3 — прикрашаємо свою сторінку

Після того, як основа HTML розпланована, пора зробити сторінку красивою за допомогою витонченого CSS3. Я зосереджуся на властивостях CSS3, звівши до мінімуму коментарі до решти CSS. Але, як зазвичай, якщо щось залишиться незрозумілим, будь ласка, додайте коментар, і я розповім про предмет більше.

CSS Reset

Дуже допомагає створювати сумісні з різними браузерами сторінки CSS Reset Еріка Майєра (Eric Meyer). Я трохи модифікував reset, щоб виключити елементи HTML, з якихось причин відсутні в специфікації HTML5.

basefront, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex і dir більше не є частиною специфікації HTML.

Я додав елементи HTML5, які ми використовували для reset, а також встановив їх властивості display на block. Так ми віддаємо вказівку браузерам ставитися до них як до елементів block-level.

Новими доповненнями до CSS reset є наступні елементи: header, nav, article, aside, footer, hgroup та section.

Звичайно, для інших сторінок/вебсайтів ви б включили в reset і інші використовувані елементи HTML5.

Оголошення @font-face

Для того, щоб зробити демо-сторінку незвичніше, ми використовуємо два ненадійних шрифту. Це HighlandGothic і Colaborate, і обидва доступні безкоштовно на сайті Font Squirrel як зручні набори шрифтів @font-face.

Оголошення @font-face CSS працюють, створюючи нове сімейство шрифтів, яке можна застосовувати на сторінці. Після оголошення назви сімейства потрібно послатися на фактичний файл шрифтів, і ось тут все ускладнюється, тому що різні браузери підтримують різні формати.

Створюємо макет сайту без зображень за допомогою HTML5/CSS3 – частина 2

Як видно з вищенаведеної таблиці, найкоротший спосіб охопити всі свої основні потреби – це включити потрібну версію цього шрифту у TTF(TrueType Font), або OTF (OpenType Font) і EOT (Embedded OpenType). Ви, швидше за все, знайдете потрібний вам для вставки шрифт у форматі TTF і/або OTF, а Font Squirrel прийде на допомогу зі своїм набором @font-face Generator, коли вам доведеться конвертувати їх в EOT (і один або обидва інших формату). З допомогою генератора можна конвертувати всі шрифти в потрібні формати в залежності від необхідності, а також він пропонує опцію побудови файлів Cufón.

@font-face {
font-family: ‘Colaborate-RegularRegular’;
src: url(‘fonts/ColabReg-webfont.eot’);
src: local(‘ ‘),
url(‘fonts/ColabReg-webfont.woff’) format(‘woff’),
url(‘fonts/ColabReg-webfont.ttf’) format(‘truetype’),
url(‘fonts/ColabReg-webfont.svg#webfont’) format(‘svg’);
}

Зверніть увагу, що кожне джерело у другому властивості src для кращої читабельності розташований на окремому рядку; в цьому файлі CSS я помістив їх в один рядок.

Синтаксис оголошення @font-face, використаний тут, заснований на синтаксисі Підлоги Айриша (Paul Irish) Bulletproof @font-face. Я не буду вдаватися в подробиці, так як Стать все пояснив у своїй статті. Таким чином, після визначення назви сімейства шрифтів, ми спочатку посилаємося на місце розташування файлу шрифтів EOT, які будуть призначатися для Internet Explorer. Після того ми повторюємо властивість src і, поки Internet Explorer не розуміє визначення local, файли шрифтів, на які посилаються у другому дескрипторі src, завантажуватися IE не будуть. Що стосується розташування різних шрифтових форматів у другому властивості src, ось що про це йдеться в специфікації W3C:

Коли потрібно шрифт, агент користувача итерирует по набору посилань у списку, користуючись першою, яку може успішно активувати.

Таким чином, враховуючи, що браузер буде використовувати перший підтримуваний ним формат, порядок такий: WOFF → OTF/TTF → SVG. Якщо знати про те, що WOFF розшифровується як Web Open Font Format (Відкритий мережевий формат шрифтів) недостатньо для доказу його переваги над OTF/TTF і SVG. Хоча, якщо серйозно, одна її перевага полягає в тому, що вона досить коротка, а інше – те, що містить докладні метадані про походження шрифту та інше. Причина, по якій шрифти SVG поставлені в самий кінець, це факт того, що в основному вони похідні: конвертовані з файлу шифрів OTF або TTF і, цілком можливо, що втратили щось в процесі конвертації.

Показувати текст на своїй сторінці вбудованими шрифтами досить просто, все, що потрібно зробити – це встановити список назв сімейства шрифтів в оголошенні @font-face властивість font(-family) потрібних CSS селекторів. Наприклад, ми використовували шрифт HighlandGothic для логотипу сайту, і оголошення CSS для цього елемента виглядає так:

hgroup h1 {
font: 40px/54px HighlandGothicLightFLFRegular, «Lucida Sans Unicode», «Lucida Grande», sans-serif;
color: #970000;
text-shadow: -1px -1px 0 #650000, 0 0 10px rgba(255,255,255,0.7);
}

Зрозуміло, що шрифт HighlandGothic внесений у список першим, потім ми вносимо два резервних шрифту і, нарешті, назву родового сімейства. Ми також оголошуємо колір шрифту і, нарешті, додаємо логотипу трохи тіні, що веде нас до наступного властивості CSS3: text-shadow.

Властивість text-shadow

Перед переходом до властивості дозвольте невелике відхилення від теми: властивість text-shadow не ново для CSS3, вперше воно було представлено в CSS2, а згодом перемістилося в CSS2.1.

Власне, було б дуже корисно забути про photoshop’е, коли потрібно додати тіні якого-небудь тексту (і @font-face вже допомогло нам не залежати від photoshop’у, застосовуючи для своїх сайтів ненадійні шрифти).

text-shadow: -1px -1px 0 #650000, 0 0 10px rgba(255,255,255,0.7);

Синтаксис властивості text-shadow досить простий: два перших значення відповідно визначають відстань від тексту по горизонталі і вертикалі. Третє значення встановлює величину розмивання кордонів, застосованого до тіні, а останнє значення встановлює колір тіні. Ми можемо додати більше однієї тіні до тестового елементу; просто відокремлюємо кожне визначення тіні коми. Інше, про що слід пам’ятати – те, що тіні накладаються в тому порядку, в якому вони визначені, перша тінь виводиться зверху.

У нашому прикладі перша тінь не розмита, і я обняв її на один піксел ліворуч і вгору так, щоб вона виробляла помилковий ефект відбитка, так часто зараз використовується. Друга тінь розмита і надає логотипу деякий світіння. Безсумнівно, ви помітили, що у другій тіні немає визначення кольору зі стандартним значенням HEX. Ця нова особливість (і парочка інших колірних відмінностей) – предмет обговорення наступного розділу.

Колір і непрозорість

До того, як браузери почали реалізувати властивості CSS3, ви могли встановлювати значення кольорів в CSS трьома способами:

Значенням HEX – #ff0000;

Визначаючи значення кольорів RGB (червоний, зелений, синій) – rgb(255, 0, 0) або

Використовуючи назву кольору CSS – red.

З трьох наведених варіантів я завжди використовував перший, тому що його легше всього скопіювати з photoshop’у. Значення RGB не дуже практичні, тому що їх не так легко скопіювати з photoshop’у і складно запам’ятати. Я вважаю, що третя опція була непридатною і обмеженою.

Всі основні браузери (крім одного, і вам належить цукерочка, якщо здогадаєтеся, якого саме) підтримують нові властивості кольорів CSS3, і перше, про який я хочу поговорити – це непрозорість (opacity).

Непрозорість

Контроль над непрозорістю елементів веб-сторінки був для багатьох веб-дизайнерів довгоочікуваним властивістю, і нарешті воно стало доступним (ну, це якщо ви не користуєтеся Internet explorer’ом). Синтаксис вкрай простий:

opacity: X. X;

Значення непрозорості може варіюватися від 0 – повністю прозоро до 1 – повністю непрозорим величинах .1. Це дуже просто!

Непрозорість може виявитися дуже корисною, але у неї є недолік, який ми обговоримо при поясненні наступного колірного властивості CSS3: кольори RGBA.

Колір RGBA

Як можна уявити собі, RGBA більш вдосконалений, ніж RGB, і додаткова буква означає параметр alpha. Таким чином, визначення колірних властивостей за допомогою RGBA в основному схоже на те ж саме в RGB і включає визначення непрозорості в окрему властивість. Синтаксис досить простий:

rgba(255,255,255,0.7);

Перші три значення в дужках – це RGB-значення, а останнє є непрозорість. Таким чином колір, як зазначено в наведеному прикладі, білий #ffffff з непрозорістю, встановленої на 70%.

Я згадував про те, що використання властивості opacity для визначення прозорості має свою негативну сторону, і для доказу своєї точки зору я візьму наш логотип. Уявіть, що ми визначили тінь для тексту наступним чином:

text-shadow: -1px -1px 0 #650000, 0 0 10px rgb(255,255,255);
opacity: 0.5;

Створюємо макет сайту без зображень за допомогою HTML5/CSS3 – частина 2

Я встановив непрозорість трохи нижче, щоб зробити відмінності більш помітними, а ви можете побачити, що при встановленні opacity на 0,5 весь елемент тепер на 50% прозорий, а це не той ефект, якого ми домагаємося. Якби у нашого логотипу було встановлено фонове зображення або фоновий колір, вони теж стали б на 50% прозорими. Нам потрібно, щоб тільки друга тінь тексту мала властивість прозорості, але замість того весь елемент став напівпрозорим. Так що ми скористаємося кольором RGBA:

text-shadow: -1px -1px 0 #650000, 0 0 10px rgba(255,255,255,0.5);

Створюємо макет сайту без зображень за допомогою HTML5/CSS3 – частина 2

Так набагато краще! І, нарешті, наш заключний приклад з непрозорістю тіні, встановленої на 70%:

text-shadow: -1px -1px 0 #650000, 0 0 10px rgba(255,255,255,0.7);

Створюємо макет сайту без зображень за допомогою HTML5/CSS3 – частина 2

На мою думку, використовувати властивості opacity має сенс тільки в застосуванні до зображення. В іншому випадку легше і зручніше використовувати RGBA або наступну особливість, яку ми обговоримо – колір # hsla-color hsla.

Колір HSL і # hsla-color hsla

Значення кольору HSL засновані на колірній моделі «тон-насиченість-яскравість» (Hue, Saturation, Lightness). Ось наш приклад текстової тіні, встановленої за допомогою квітів # hsla-color hsla:

text-shadow: -1px -1px 0 #650000, 0 0 10px # hsla-color hsla(0,0%,100%,0.7);

Вищенаведений код справить ефект тіні, ідентичний тому, який ми отримуємо, використовуючи кольори RGBA. Значення в дужках відповідають тону, насиченості, яскравості і непрозорості. Пара слів на замітку: насиченість і яскравість виражаються у відсоткових значеннях, а тон – безрозмірне число (у нього немає асоційованої одиниці на зразок відсотка або пікселів; в photoshop’е тон виражається в ступені). Також зверніть увагу, що необхідно включати символ відсотка навіть якщо значення насиченості або яскравості дорівнює нулю. Якщо пропустити символ відсотка, браузер не дізнається синтаксису і не призначить елементу колір.

Створюємо макет сайту без зображень за допомогою HTML5/CSS3 – частина 2

Працюючи зі значеннями кольору CSS, я віддаю перевагу HEX, але зазвичай використовую значення RGBA, коли потрібно додати прозорості. Однак використання значень # hsla-color hsla могло б мати більше сенсу, бо вони ближче всього до колірного сприйняття людини. При використанні HSL можна безпосередньо контролювати тон, насиченість і яскравість кольорів. Так вдається тонко налаштувати кольору і знайти найбільш підходящий набагато легше, просто використовуючи CSS, тому що ви знаєте, що змінює кожне значення, і не доведеться вдаватися до Photoshop для налаштування кольорів, а потім скопіювати їх в CSS як значення HEX або RGB.

Властивість border-radius

Наступну особливість CSS3, яку я хочу обговорити, довго чекали (хоча, якщо бути чесним, ця характеристика була якийсь час відома, але широко не підтримувалася) – закруглені кути. Дуже довго веб-дизайнерам доводилося для застосування закруглених кутів до елементів сторінки вживати зображення або JavaScript, але зараз ми можемо робити це за допомогою одного лише CSS. Браузери добре підтримують властивість border-radius, один тільки IE не робить цього (але, судячи з анонсів, IE9 підтримує, так що скоро все зміниться).

Ми візьмемо елемент основної навігації для демонстрації того, як працює властивість border-radius, а пізніше знову скористаємося елементом nav для пояснення деяких інших чудових властивостей CSS3, від чого він так симпатично виглядає.

Специфікація W3C визначає наступний синтаксис border-radius:

border-radius: 20px;

Створюємо макет сайту без зображень за допомогою HTML5/CSS3 – частина 2

Не може бути більш зрозумілим і виглядає чудово в Opera і IE9 –ми побачимо гарний закруглений на 20 пікселів край елемента nav. Однак зупинитися на цьому означало би виключити два браузерних движка: Gecko (Firefox) і Webkit (Safari, Chrome). Для того, щоб при перегляді через один із цих браузерів у елемента nav були закруглені кути, нам доведеться додати ще дві властивості:

-moz-border-radius: 20px;
-webkit-border-radius: 20px;

У специфікації W3C рекомендується ставити перед властивостями на стадіях розробки префікси, що визначаються фірмою-розробником з тим, щоб вони зверталися тільки до певних браузерів. Дотримуючись цієї рекомендації, Mozilla і Webkit включили відповідні префікси -moz — і -webkit-. Таким чином, кожен префікс, в деякому сенсі, схожий на умовний коментар HTML Internet Explorer у – включаючи префікс, ми точно знаємо, який браузер(и) стане його метою.

У Opera є стратегія невиконання властивостей, незакінчених в специфікації W3C, але думаю, вони відчувають, що властивість border-radius (інакше text-shadow) досить близько до доведення до завершення, так що вони включили його підтримку, хоча і без встановленого фірмою-розробником префікса (-o-).

Іншою перевагою використання властивості border-radius перед використанням зображень є той факт, що це масштабований ефект. Ось скріншот сторінки, збільшеною до 300%:

Створюємо макет сайту без зображень за допомогою HTML5/CSS3 – частина 2

Идеааааально чітко! Вважаю, що ви можете уявити, наскільки зазубреними виглядали б ці краї, збільшені зображення.

Градієнти CSS3

Інша нова характеристика, яка прикрашає наш сайт – властивість linear-gradient. Я кілька разів вжив на веб-сайті лінійний градієнт, а його складно використовувати, тому що кожен браузер реалізує його по-різному (якщо взагалі робить це). Я розділив цей розділ на підрозділи, розглядаючи кожен з чотирьох основних браузерних засобів візуалізації.

Gecko – Mozilla Firefox

Почнемо з реалізації в Firefox:

background-image: -moz-linear-gradient(top, #ca0000, #970000);

У Mozilla використовується рекомендований W3C синтаксис плюс префікс фірми-розробника, а перше значення у дужках представляє кут лінії градієнта (вздовж якої градієнт візуалізується). Його можна визначити значенням background-position (як у нашому прикладі) або кутом в градусах – якщо б ми хотіли намалювати такий градієнт, як у вищенаведеному прикладі, ми б застосували кут в -90deg. Будь ласка, зауважте, що можна пропустити значення кута, і воно буде встановлено за промовчанням на найбільше.

Два наступних значення в дужках – це початкові і кінцеві кольору градієнта, і для їх визначення ви можете користуватися будь-кольоровою системою (HEX, RGB(A), HSL(A)). Крім того, ви не обмежені двома кольорами. Для отримання більш повної інформації про синтаксис -moz-linear-gradient перегляньте керівництво від Mozilla.

Webkit – Safari і Google Chrome

Давайте розглянемо синтаксис, який скаже Safari і chrome для у візуалізувати градієнт:

background-image: -webkit-gradient(linear,left, top,left bottom,color-stop(0, #ca0000),color-st

Webkit явно користується іншим синтаксисом, але все ж включає префікс фірми-розробника. Перше значення у дужках визначає вигляд градієнта, який ми хочемо візуалізувати: лінійний або радіальний. Дві наступні позиції встановлюють початкову та кінцеву точки лінії градієнта; можна користуватися числами (пікселями), відсотками або ключовими словами (top, bottom, left, right). Нарешті, у нас є color stop’и (початкові і кінцеві кольору) і, звичайно, їх може бути більше двох. У color stop’ів є два аргументи: значення stop (відсотки або число від 0 до 1) і значення кольору (і знову приймаються всі діючі колірні системи CSS).

Trident – Internet Explorer

Це суще покарання, Internet Explorer, не підтримує градієнти CSS, але ми можемо застосувати фільтр DirectX для візуалізації градієнта на тлі елемента:

-ms-filter: «програми:DXImageTransform.Microsoft.gradient(GradientType=’0′, StartColorStr=’#ca0000′, EndColorStr=’#970000′)»;

Отже, тут у нас є три параметра:

GradientType – управляє розташуванням градієнта: 0 — це вертикально, а 1 – горизонтально;

StartColorStr – визначає початковий колір градієнта і вам слід відразу використовувати формат HEX (я не зміг змусити його працювати належним чином за допомогою RGB(A) або HSL(A));

EndColorStr – визначає кінцевий колір градієнта і знову ж: застосовуйте формат HEX.

Я помістив всі фільтри DirectX в окремий файл CSS, на який посилаюся на початку файлу index.html:

<!—[if lt IE 9]>
<link href=ie.css rel=stylesheet />
<![endif]—>

Пара нотаток:

Може здатися дивним, що я розміщую спеціальні стилів для IE в окрему таблицю стилів в той час, як спеціальні стилі для інших браузерів знаходяться в основній таблиці. Власне, IE – єдиний браузер, на який можна націлюватися з допомогою умовних коментарів, так що ми забезпечуємо таблицю стилів тільки для нього. Крім того, у вживанні знаходиться безліч фільтрів DX, і нам потрібно, щоб наш CSS підтверджував їх правильність, чи не так? Інша причина їх переміщення – зменшення розмірів основного файлу CSS. Додатковий запит HTTP робиться, коли IE отримує доступ до сторінки, але я думаю, що акуратна і правильна основна таблиця стилів того варто.

Я лише спробував зробити так, щоб сторінка гідно виглядала (читайте: виглядала близько до візуалізації в сучасних браузерах) Internet Explorer 8, я не турбувався про IE6 та IE7.

IE9 все ще знаходиться в розробці і в даний момент, здається, підтримує закруглені кордону, псевдоелементи CSS і це вже багато чого (з властивостей, використаних у нашій демо-сторінці). Я відчував, що нам не слід витрачати на це час, не знаючи, які з властивостей будуть підтримуватися в кінцевій версії.

Presto – Opera

Opera не підтримує градієнти CSS і фільтри DirectX, але тут є свій обхідний шлях – властивість box-shadow. В наступному розділі я поясню, як воно працює, а потім покажу, як його використовувати для імітації градієнтів.

Властивість box-shadow

Це інша властивість, яке широко застосовувалося в нашій демо-сторінці. Синтаксис властивості box-shadow досить сильно схожий на синтаксис text-shadow. Ось код зовнішньої тіні основної навігації:

box-shadow: inset 0 0 15px #900, inset 0 35px 35px -18px #ca0000, 0 0 20px #446b6b;
-moz-box-shadow: inset 0 0 15px #900, 0 0 20px #446b6b;
-webkit-box-shadow: 0 0 20px #446b6b;

Одна відмітна риса, яку ви напевно помітили, полягає в тому, що нам потрібно застосовувати префікси фірми-розробника для браузерів, заснованих на Gecko — і Webkit, в той час як за замовчуванням властивість box-shadow працює в Opera. Крім цього, ми можемо встановлювати множинні тіні, а порядок розташування ідентичний порядку властивості text-shadow. Характерними для властивості box-shadow є дві нові опції: це ключове слово inset і значення spread radius.

Спочатку давайте розглянемо ключове слово inset, його присутність встановлює, що тінь повинна бути намальована швидше всередині елемента, ніж поза його країв.

Створюємо макет сайту без зображень за допомогою HTML5/CSS3 – частина 2

Я впевнений, що ви бачите внутрішню тінь навколо краю (готовий обожнювати функцію збільшення). Цей скріншот взято з Opera і буде виглядати дуже схоже Firefox. Але у Google Chrome в даний час є дефект, що перешкоджає правильної візуалізації вкладених тіней.

Створюємо макет сайту без зображень за допомогою HTML5/CSS3 – частина 2

Ви бачите, що колір фону розтікається для наповнення квадратного обриси елемента. Це одна з причин для того, щоб не включати вкладену тінь inset у властивість -webkit-box-shadow. Інша – це факт того, що в даний момент Safari не підтримує вкладені тіні.

Нарешті, ми приходимо до іншої тіні inset властивості, що мають своєю метою Opera; тіні, яка буде імітувати градієнт:

inset 0 35px 35px -18px #ca0000

Отже, у нас є ключове слово inset; два значення, які визначають місце розташування тіні; spread radius; розмір тіні і її колір. Spread radius змушує тіні збільшуватися, якщо має позитивне значення і стискатися при від’ємному значенні. Зверніть увагу, що тінь збільшується/стискається в напрямку, перпендикулярному до свого краю. Тепер, що стосується вкладених тіней inset, позитивний spread radius змусить їх скорочуватися і навпаки.

Основна ідея полягає в тому, щоб отримати тінь inset, яка буде більше елемента (звідси і негативний spread radius), а ми зрушимо її таким чином, щоб вона покривала нижню половину елемента nav, створюючи ілюзію застосування градієнта. Якщо порівняти два вищенаведених зображення (з Opera і Chrome), ви побачите, що ефекти вельми схожі навіть при збільшенні.

До цього обхідному шляху додається застереження: використання негативного spread radius для вкладеної тіні змусить Opera збільшити ширину елемента, таким чином роблячи його ширше, ніж він є насправді. Це не має великого значення, якщо це маленький об’єкт або він не знаходиться на краю розмітки. Я згадую краю тому, що так розмітка стане ширше 960 пікселів, встановлених CSS, і, якщо у вас низький дозвіл, з’явиться горизонтальна смуга прокрутки (дозвіл, який не має дати вашому браузеру відображати горизонтальні смуги прокручування для розмітки ширше 960 пікселів, наприклад 1024х768).

Зауважте, що те ж саме відбувається в Firefox, але в ньому нам не потрібен той же вид імітації градієнта. Таким чином, якщо ви знаєте, що у відвідувачів вашого сайту широкі монітори з високою роздільною здатністю, то не хвилюйтеся про це.

Анімація і переходи CSS3

Красива анімація, яку можна бачити на демо-сторінці, зроблена виключно за допомогою CSS, не вживалося ніякого JavaScript’а. У цьому розділі я пройдуся по сторінці і трохи розповім про кожну анімації.

Висуваються підменю

У нашій основної навігації є підменю, висуваються, коли ви проводите мишею над пунктом меню Services (сервіси). До того, як поринути з головою в особливості анімації, дозвольте сказати кілька слів про стилях підменю.

Так як я хотів, щоб підменю збільшувалася по вертикалі, а не просто з’являлося, я встановив його height на 0, а z-index – на-1. Height посилання підменю line-height також встановлені на 0:

nav#global ul li #subMenu {
height: 0;
z-index: -1;
[…]
}
nav#global ul li #subMenu li a {
height: 0;
line-height: 0;
[…]
}

Коли над пунктом меню Services проводять мишею, ми застосовуємо наступні стилі:

#services:hover > #subMenu { z-index: 2 }
#services:hover > #subMenu li a { height: 40px; line-height: 40px }

Ми вжили селектор > — (child), щоб сказати браузерам, що коли над пунктом меню Services проводять мишею, підменю має висунути z-index, і посилання в підменю повинні відновити повну висоту full (line-)height.

Це добре, але як щодо анімації? Ну, анімація досягається шляхом додавання властивості transition до того пункту, який запускає її. У нашому випадку спусковим гачком служить посилання всередині пункту списку id services:

#services a {
transition: all 0.3 s linear;
-o-transition: all 0.3 s linear;
-moz-transition: all 0.3 s linear;
-webkit-transition: all 0.3 s linear;
}

Властивість transition говорить браузеру, що властивості елемента повинні бути анімовані у період 0,3 секунд, і що у переходу повинна бути функція лінійної розгортки в часі. Я не хочу вдаватися в деталі, бо специфікації видно, що тут безліч опцій. Не бійтеся пограти зі значеннями, поки не отримаєте самого задовільного для себе ефекту.

Замітка про префіксах фірм-розробників: щоб це властивість працювало, доводиться включати префікс навіть для Opera. Підтримка цієї характеристики трохи більш обмежена: Internet Explorer її не підтримує (який сюрприз!), а Firefox не стане її підтримувати, поки не вийде наступна версія (це буде версія 3.7; втім, можна завантажити тестовий варіант). Отже, для майбутньої стійкої таблиці стилів є перше (беспрефиксное) і третє (-moz-) властивості transition.

Висуваються посилання

Переходи CSS3 використовуються для висунення посилань у розділах Blogroll і Popular Posts так само, як посилання на акаунт Twitter @TheBlackAdder трохи правіше. Це досягається шляхом простого додавання лівого поля до станів проведення мишею над посиланнями.

Кнопки Continue Reading

Іншим елементом, анімованим властивістю transition є кнопка Continue Reading, яка з’являється в нижньому колонтитулі елементів article. На цей раз лівий відступ кнопки для стану :hover зменшується, так що згенерований елемент :before може придвигаться ближче до тексту кнопки.

Цитата «хмарці» з Twitter’а

Цитата з Twitter’а в «хмарці» має іншу анімацію. Для збільшення її розміру при проведенні мишею було використано зміна масштабу.

blockquote:hover {
transform: scale(1.05);
-o-transform: scale(1.05);
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
}

Синтаксису простіше бути не може: всього лише визначте величину масштабування і можете продовжувати. Якщо хочете збільшити масштаб, застосуйте більше число 1; хочете зменшити – менше 1.

Стиль цитати в «хмарці» з Twitter’а грунтується на одному з прекрасних speech bubbles з чистого CSS від Ніколаса Галлахера (Nicolas Gallagher).

Повернені року

Аналогічне зміна масштабування було використано в розділі року в датах публікацій розділу статей:

.year {
transform: rotate(270deg);
-o-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
[…]
}

Зверніть увагу, що зміни застосовувалися до стану за замовчуванням елементів класу year. Таким чином, поворот відбувається, як тільки завантажена таблиця стилів.

Останні слова

Отже, ось перед вами друга частина статті. Треба було охопити безліч елементів і, сподіваюся, все було зрозуміло. Якщо немає, будь ласка, додайте питання в коментарях, і я постараюся пояснити.

Спасибі за прочитання, з нетерпінням чекаю будь-яких запитань і коментарів.

Створюємо макет сайту без зображень за допомогою HTML5/CSS3 – частина 2

E-mail: [email protected]