Нові можливості дизайну з CSS3

Нові можливості дизайну з CSS3В хитросплетінні Каскадних Таблиць Стилів (CSS) є чимало хвилюючих особливостей, котрі буквально спричинять вибух креативу в інтернеті. Ці нові деталі включають в себе правила стилів CSS, які будуть реалізовані у майбутній специфікації CSS3. Якщо глянути реалістично, то ви навряд чи зможете використовувати їх на повну силу у найближчі кілька років для своїх проектів, але для дизанерських блогів та сайтів, ці можливості допоможуть вийти за рамки сучасного вебу вже сьогодні, додаючи ту саму “ізюминку” у ваш дизайн та рухаючи дизайн-індустрію вперед.

Наведемо 5 технік, взяті з майбутнього, які ви можете практикувати на своєму сайті прямо тепер.

Border radius

rounded corners in css3

Мабуть, це найзагальніша особливість CSS3, яка зараз використовується, – border-radius. Стандартні HTML-блоки мають квадратну форму з кутами у 90 градусів. Правило CSS3 дозволяє використовувати заокруглені кути.

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

Border-radius також може бути використаний для стилізації будь-якого окремого кута, хоча синтаксис для -moz- i -webkit- дещо відмінний:

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Підтримується у браузерах Firefox, Safari i Google Chrome.

Використовується у Твіттері.

Border image

border image in css3

Border-image, як стає зрозуміло із назви, дозволяє файлу зображення бути використаним у якості границі об”єкта. Картинка спочатку створюється відносно кожної сторони об”єкта, де кожна сторона зображення відповідає стороні об”єкта HTML. Після чого воно здійснюється з наступним синтаксисом:

border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;

Атрибут {border: 5px} конкретизує повну ширину границі, і потім правило border-image з цільовим файлом каже браузеру, скільки зображення використовувати, щоб заповнити ті 5px області границі.

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

border-bottom-right-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-right-image
border-right-image

Підтримується у Firefox 3.1, Safari, Chrome.

Використовується у Blog.SpoonGraphics.

Тіні для блоків і тексту

box and text shadows in css3

Тіні: хіба ви їх лише не любите? Вони можуть легко як створити, так і зруйнувати ваш дизайн. Тепер, за допомогою CSS3 вам навіть не потрібен Photoshop. Використання, яке ви бачите на зображенні (тінь від блоку з датою та тінь від слів Making Modular…), вже чудово використовується на сайті 24 Ways.

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

Два перші атрибути визначають відходження (offset) тіні від елементу, в нашому випадку це 10 пікселів по x та y осям. Третій атрибут призначає рівень розмивання (blur) тіні. Ну, і насамкінець, колір.

Атрибут text-shadow використовується для тіні від текстового контенту:

text-shadow: 2px 2px 5px #ccc;

Підтримується у Firefox 3.1, Safari, Chrome (box-shadow лише) та Opera (text-shadow).

Проста прозорість з RGBA та opacity

opacity in css3

Використання PNG файлів у веб-дизайні зробило прозорість однією з його ключових властивостей. Зараз показник alpha або правило непрозорості можуть бути вказані безпосередньо у CSS.

rgba(200, 54, 54, 0.5);
/* example: */
background: rgba(200, 54, 54, 0.5);
/* or */
color: rgba(200, 54, 54, 0.5);

Перші три числа посилаються на червоний, зелений, синій кольорові канали, а останнє число – на альфа-канал, що викликає ефект прозорості.

В якості альтернативи, разом з правилом непрозорості колір може бути вказаний як зазвичай, а саме правило – як окреме.

color: #000;
opacity: 0.5;

Підтримується у Firefox, Safari, Chrome, Opera (непрозорість), IE7 (непрозорість, з виправленнями).

Використовується у 24 Ways (RGBA).

Власні шрифти з @font-face

custom fonts in CSS3

Завжди існував набір т.зв. безпечних шрифтів, які могли вільно використовуватись у вебі, як ви знаєте: Arial, Helvetica, Verdana, Georgia, Comic Sans, та інші. CSS3-правило @font-face дозволяє включати шрифт з будь-якого шрифтового файлу, розміщеного у вас на сервері. Це певною мірою приносить проблеми, пов”язані з авторським правом, адже є не так багато шрифтів, котрі можуть бути використані для @font-face включень.

Стилізація на практиці виглядає ось так:

@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

Решта шрифтових опцій викликається як зазвичай:

h1 { font-family: 'Anivers', Helvetica, Sans-Serif;

Підтримується у Firefox 3.1, Safari, Opera 10, IE7 (з силою-силенною виправлень, якщо ви хоробрі, то зможете змусити працювати обраний шрифт у ІЕ7)

Використовується у TapTapTap.

Хоча CSS3 все ще перебуває на стадії розвитку, правила, описані тут, вже зараз підтримуються у деяких браузерах. Safari, зокрема, має обширну підтримку цих нових особливостей. Але на жаль, будучи високоякісним браузером, він має досить малу аудиторію, тому можливо, ці додаткові особливості CSS3 не є важливими для його групи користувачів. Але з комп”ютерами Mac від Apple, котрі впроваджуються у життя, використання Safari також зростатиме.

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

Google Chrome був випущений минулого року. Базований на двигуні WebKit, цей браузер має майже все те саме, що і у Safari. Поки Safari додає численну пропорцію Mac-користувачів, Chrome надає пропорцію прихильників Windows.

Якщо ми глянемо на статистику використання браузерів від W3C за листопад 2008 року, то 44,2% користувачів подорожували в інтернеті з Firefox, 3,1% з Google Chrome, 2,7% – з Safari. Це означає, що близько 50% всіх інтернет-користувачів матимуть можливість побачити ці нові властивості. А в межах веб-дизайнерської спільноти, котра є значно свідоміша щодо вибору браузера, відсоток юзерів з підтримкою CSS3 зросте до рівня 70%.

Зворотній бік медалі

Ваш сайт тепер має широкий діапазон нових можливостей, але є кілька негативних моментів, що завадять цьому:

  • Internet Explorer. 46% інтернет-користувачів не зможуть побачити нові можливості. Тому не використовуйте їх як критичну частину вашого дизайну. Впевніться, що має місце і другорядний вибір, наприклад, стандартна границя замість border-image.
  • Непрацездатні таблиці стилів. Нові властивості CSS3 не були випущені в якості фінального релізу. Вони зараз виконуюються з ознаками, котрі є різними для різних браузерів. Тому вони можуть зробити недійсною вашу таблицю стилів.
  • Додатковий код. Звертаючи увагу на попередній пункт, бачимо, що ми мусимо додавати різні теги для різних браузерів, щоб описати одне правило. Це додає багато рядків до вашого CSS-коду.
  • Потенційна небезпека використання. Так само, як це робиться з стандартними фільтрами у Photoshop, використання цих нових стильових властивостей може призвести до появи болісно-страхітливих дизайнів. Тому будь ласка, краще не зловживайте ефектом тіні! :)

Про автора

Кріс Спунер – фрілансер, графічний та веб-дизайнер з Великобританії. Він живе темою дизайну і насолоджується тим, що йде нога-в-ногу з цією сферою. Кріс також публікує статті по дизайну, різноманітні туторіали на своєму блозі Blog.SpoonGraphics.

Посилання по темі:

Оригінал статті – Push your web design into the future with CSS3

Переклад на українську мову – Блогорідер

Напишіть відгук

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

*