Чтение онлайн

на главную - закладки

Жанры

CSS3 для веб-дизайнеров
Шрифт:

Вспоминая изученное в первой главе о свойстве

border-radius
и о браузерных префиксах, которые позволяют нам использовать это свойство сегодня, мы можем добавить следующие строки к существующим правилам для ссылок:

#nav li a {

padding: 5px 15px;

font-weight: bold;

color: #ccc;

color: rgba(255, 255, 255, 0.7);

text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);

– webkit-border-radius: 14px;

– moz-border-radius: 14px;

border-radius: 14px;

}

#nav li a: hover,

#nav li a: focus {

color: #fff;

background: rgba(255, 255, 255, 0.15);

}

Рис. 3.14 показывает фон ссылки в состоянии

:hover
 – теперь со скругленными углами, полученными с использованием свойства
border-radius
. Так страница выглядит в браузерах Safari, Chrome, Firefox, Opera, равно как и в IE9. Помните, что беспрефиксное свойство
border-radius
поставлено в списке последним, чтобы оно получилось приоритет над всеми остальными. Например, Safari 5 поддерживает как беспрефиксное свойство
border-radius
, так и 
– webkit-border-radius
, поддерживаемое в Safari 4.

Рис. 3.14. Как скруглить углы, пользуясь свойством border-radius

Возможно, читатель спросит: почему объявление

border-radius
ставится в правило для
#nav li a
, а 
не #nav li
a: hover
(где скругленные углы появляются на экране)? Ответ кроется в CSS-переходе, который мы сейчас добавим как последний штрих.

Добавим анимацию

Вспомним изученное во второй главе и добавим переход в состояния

:hover
и 
:focus
у ссылок в меню. Такой эффект смягчит появление фона: он будет постепенно всплывать позади текста. Переход также сгладит смену цвета текста от полупрозрачного белого до полностью белого (рис. 3.15).

Рис. 3.15. Представьте себе, как постепенно изменяются значения свойств, когда действует переход

В этом примере мы напишем код перехода, работающий в Safari, Chrome, Firefox (4.0) и Opera, и самым последним добавим свойство

transition
без префикса – для свежих версий существующих браузеров и для новых браузеров.

#nav li a {

padding: 5px 15px;

font-weight: bold;

color: #ccc;

color: rgba(255, 255, 255, 0.7);

text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);

– webkit-border-radius: 14px;

– moz-border-radius: 14px;

border-radius: 14px;

– webkit-transition: all 0.3s ease-in-out;

– moz-transition: all 0.3s ease-in-out;

– o-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

#nav li a: hover,

#nav li a: focus {

color: #fff;

background: rgba(255, 255, 255, 0.15);

}

Помните, что свойства перехода выставляются для обычного состояния элемента, на который накладывается переход. Переходы построены таким способом, чтобы они реагировали не только на состояние

:hover
, но и на
:focus
и 
:active
.

В коде анимации используется значение all, чтобы отследить все свойства, которые изменяются в состояниях

:hover
и 
:focus
, – в этом примере color и background. Ту же анимацию можно было бы получить другим способом, перечислив все свойства через запятую:

– webkit-transition:

color 0.3s ease-in-out,

background 0.3s ease-in-out;

– moz-transition:

color 0.3s ease-in-out,

background 0.3s ease-in-out;

– o-transition:

color 0.3s ease-in-out,

background 0.3s ease-in-out;

transition:

color.3s ease-in-out,

background.3s ease-in-out;

Легко заметить, что значение

all
более компактно и эффективно, когда нужно анимировать несколько изменений одного элемента.

Построение взаимодействия

Мы изучили довольно простой пример, добавляя различные свойства CSS3 к элементам нашей страницы, которые относятся исключительно к взаимодействию. Браузеры, поддерживающие эти свойства, будут показывать анимацию полупрозрачного фона со скругленными углами, на котором расположены затененные текстовые ссылки. Браузеры, не поддерживающие CSS3, не отразят улучшенное взаимодействие при наведении на ссылку, но это нормально. Они покажут семантически структурированный список ссылок – и это самое важное в этом примере.

Это маленькое упражнение также показывает, насколько эффективно достигать средствами CSS3 того, для чего раньше требовались Flash и/или JavaScript. Использованные CSS-правила просты, естественны и безвредны для тех браузеров, которые их пока что не поддерживают.

Мы также позаботились о том, что написанный CSS3-код выдержит проверку временем: свойство transition из спецификации включено в список правил последним. Копировать эти правила, помечая их соответствующими префиксами, – это необходимые действия, которые влекут за собой большой выигрыш: мы можем использовать CSS3 прямо сейчас, улучшая взаимодействие для многих пользователей.

Поделиться:
Популярные книги

Газлайтер. Том 38

Володин Григорий Григорьевич
38. История Телепата
Фантастика:
городское фэнтези
аниме
попаданцы
5.00
рейтинг книги
Газлайтер. Том 38

Ваше Сиятельство 6

Моури Эрли
6. Ваше Сиятельство
Фантастика:
попаданцы
аниме
5.00
рейтинг книги
Ваше Сиятельство 6

Личник

Валериев Игорь
3. Ермак
Фантастика:
альтернативная история
6.33
рейтинг книги
Личник

Кодекс Охотника. Книга XXIII

Винокуров Юрий
23. Кодекс Охотника
Фантастика:
боевая фантастика
попаданцы
5.00
рейтинг книги
Кодекс Охотника. Книга XXIII

Последний Паладин. Том 5

Саваровский Роман
5. Путь Паладина
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Последний Паладин. Том 5

Ожерелье Странника

Хаггард Генри Райдер
Приключения:
исторические приключения
7.50
рейтинг книги
Ожерелье Странника

Чужак из ниоткуда 2

Евтушенко Алексей Анатольевич
2. Чужак из ниоткуда
Фантастика:
попаданцы
альтернативная история
5.00
рейтинг книги
Чужак из ниоткуда 2

Законник Российской Империи. Том 2

Ткачев Андрей Юрьевич
2. Словом и делом
Фантастика:
городское фэнтези
альтернативная история
аниме
дорама
6.40
рейтинг книги
Законник Российской Империи. Том 2

Кодекс Императора VI

Сапфир Олег
6. Кодекс Императора
Фантастика:
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Кодекс Императора VI

Цикл "Отмороженный". Компиляция. Книги 1-14

Гарцевич Евгений Александрович
Отмороженный
Фантастика:
боевая фантастика
рпг
постапокалипсис
5.00
рейтинг книги
Цикл Отмороженный. Компиляция. Книги 1-14

Афганский рубеж

Дорин Михаил
1. Рубеж
Фантастика:
попаданцы
альтернативная история
7.50
рейтинг книги
Афганский рубеж

Ваше Сиятельство 3

Моури Эрли
3. Ваше Сиятельство
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Ваше Сиятельство 3

Вагант

Листратов Валерий
6. Ушедший Род
Фантастика:
боевая фантастика
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Вагант

Российские фантасмагории (сборник)

Булгаков Михаил Афанасьевич
Юмор:
юмористическая проза
5.00
рейтинг книги
Российские фантасмагории (сборник)