Сводим воедино CSS3-свойства

До сих пор мы в основном рассматривали абстрактные реализации разнообразных CSS3-свойств. Теперь используем их для создания ссылки THESE SHOULD HAVE WON («Вот они должны были стать победителями»). В Photoshop-файле оригинальной композиции сайта And the winner isn’t. для оформления текста применяется пользовательская типографика, которую мы уже обсуждали в главе 5. При этом у данной ссылки в оригинальной композиции также имеется красный градиентный фон, скругленные углы и тень. Вот что определено в нашей таблице стилей на текущий момент:

#content a {

Text-decoration: none;

Font: 2.25em /* 36pxx16 */ ‘BebasNeueRegular’;

}

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

#content a {

Text-decoration: none;

Font: 2.25em /* 36pxx16 */ ‘BebasNeueRegular’; background-color: #b01c20;

}

Далее обеспечим скругление углов. Заметьте, что, как и в остальной части текущей главы, для всех CSS3-свойств, которые я буду добавлять, может потребоваться определить префиксы поставщиков. Я не стал включать их в приведенный здесь пример ради краткости:

#content a {

Text-decoration: none;

Font: 2.25em /* 36pxx16 */ ‘BebasNeueRegular’; background-color: #b01c20; border-radius: 8px;

}

Вот что у нас имеется на данном этапе (рисунок 6.21).

Для ссылки заданы красный фон и скругленные углы

Теперь сделаем текст белым (опять-таки, поскольку мне нужно, чтобы он был видим и в устаревших браузерах, я придерживаюсь простого определения цвета) и добавим отступ (его также можно было бы указать в процентах), чтобы вокруг текста всегда было небольшое пространство:

#content a {

Text-decoration: none;

Font: 2.25em /* 36pxx16 */ ‘BebasNeueRegular’;

Background-color: #b01c20;

Border-radius: 8px;

Color: white;

Padding: 30px;

}

Вот что у нас получилось в результате (рисунок 6.22).

На текущем этапе отступ «посягает» на территорию текста вверху, поэтому наряду с градиентом добавим объявление float: left:

#content a {

Text-decoration: none;

Font: 2.25em /* 36pxx16 */ ‘BebasNeueRegular’;

Background-color: #b01c20;

Border-radius: 8px;

Color: white;

Padding: 30px;

Float: left;

Background: linear-gradient (90deg, #b01c20 0%, #f15c60 100%);

}

Ссылка все больше приобретает требуемый вид

Рисунок 6.22. Для текста ссылки задан белый цвет

Рисунок 6.23. Для фона ссылки установлен линейный градиент

Помимо добавления небольшого отступа сверху, я задействую свойство box-shadow:

#content a {

Text-decoration: none;

Font: 2.25em /* 36pxx16 */ ‘BebasNeueRegular’;

Background-color: #b01c20;

Border-radius: 8px;

Color: white;

Padding: 30px;

Float: left;

Background: — moz-linear-gradient (90deg, #b01c20 0%,

#f15c60 100%);

Margin-top: 30px;

Box-shadow: 5px 5px 5px hsla (0, 0%, 26.6667%, 0.8);

Быстрая проверка в браузере показывает, что мы почти достигли цели (рисунок 6.24). Теперь, несмотря на то что этого нет в нашем Photoshop-файле, я собираюсь добавить небольшую тень к тексту и тонкую белую границу, чтобы ссылка-кнопка казалась слегка выпуклой. В этом и состоит вся прелесть использования CSS вместо файлов изображений — можно легко оценивать изменения на лету!

#content a {

Text-decoration: none;

Font: 2.25em /* 36pxx16 */ ‘BebasNeueRegular’;

Background-color: #b01c20;

Border-radius: 8px;

Color: white;

Padding: 30px;

Float: left;

Background: — moz-linear-gradient (90deg, #b01c20 0%,

#f15c60 100%);

Margin-top: 30px;

Box-shadow: 5px 5px 5px hsla (0, 0%, 26.6667%, 0.8); text-shadow: 0px 1px black; border: 1px solid #bfbfbf;

}

Вот как теперь наша ссылка будет выглядеть в Firefox 8 (рисунок 6.25).

Рисунок 6.25. Ссылка-кнопка стала выпуклой

Рисунок 6.24 — ссылка практически приобрела требуемый вид.

Единственная оставшаяся проблема заключается в том, что шрифт символа двойной угловой кавычки (» в HTML) в нашем Photoshop-файле отличается от шрифта основного текста. Не думаю, что есть смысл загружать дополнительный шрифт ради одного символа, поэтому я собираюсь заключить этот символ в строчный тег, чтобы можно было увеличить его размер. Вот как будет выглядеть измененная разметка:

<a href="#">these should have won <span>&raquo;</span></a>

Кроме того, добавим CSS-правило для корректировки размера шрифта:

#content a span {font-size: 1.3em;

}

Это финальный штрих, позволяющий добиться безупречного внешнего вида (рисунок 6.26).

Ссылка приобрела надлежащий вид.

Замечательной особенностью этой конструкции, созданной с использованием CSS3, а не изображения, является то, что она может включать любое содержимое, которое потребуется, и никогда при этом не «развалится» (рисунок 6.27).

При изменении текста ссылка не теряет своего оформления.