Масштабируемые значки, идеально подходящие для адаптивных веб-дизайнов

Умные люди уже занимаются расширением списка возможностей, которые предоставляет CSS3. Мне довелось увидеть реализацию одной интересной методики, и теперь я сам регулярно применяю ее. Она заключается в использовании значков, устанавливаемых в веб-дизайнах правилом @font-face.

«А что они собой представляют?» — слышу, как вы громко спрашиваете. Что ж, я все вам расскажу. Помните, как в предыдущей главе мы использовали CSS3-правило @font-face для добавления пользовательской типографики в наш веб-дизайн? Значки, устанавливаемые правилом @font-face, — это всего лишь шрифты, специально предназначенные для создания широко используемых значков. Вместо того чтобы применять множество отдельных графических файлов для каждого значка или даже объединять их в одно более крупное по размеру спрайтовое изображение, значки из правила @font-face позволят вам применять отдельный шрифт для каждого включенного значка (а это подразумевает лишь один запрос HTTP — здорово!). Более того, поскольку это шрифт, он превосходно масштабируется, что идеально подходит для адаптивных веб-дизайнов. Отличным примером является сайт Fico, доступный по адресу http://fico. lensco. be/.

Главная страница сайта Fico

Резюме..

В этой главе мы использовали более широкий набор новых CSS3-свойств. Фоновые градиенты CSS3 дали нам возможность создавать интересные эффекты, применяя исключительно CSS3. Мы даже задействовали их для создания фоновых

Узоров. Мы также научились применять свойство text-shadow для создания эффекта рельефного текста и box-shadow для добавления эффекта отбрасываемой тени снаружи и внутри элементов.

При использовании методик адаптивного веб-дизайна создание эстетических эффектов с применением исключительно CSS3 будет нести в себе огромное преимущество. Однако бывают ситуации, когда приходится использовать изображения. Хотя CSS3 и здесь позволяет нам проявлять большую гибкость. Например, в этой главе мы рассмотрели CSS3-методику, позволяющую задавать множественные фоновые изображения, чтобы добавить разнообразные фоны и обеспечить их независимое позиционирование на странице. Такая методика сводит на нет необходимость в дополнительной разметке, что ранее было неизбежным. По большей части мы используем все эти эффекты для добавления в адаптивные веб-дизайны визуальных «украшательств», относящихся к тому виду деталей, которыми смогут насладиться лишь пользователи современных браузеров независимо от размера области просмотра. Хотя наскучившие устаревшие браузеры вроде Internet Explorer не способны визуализировать такие визуальные эффекты, они никак не повлияют на внешний вид адаптивных веб-страниц.

Однако до сих пор элементы во всех наших примерах CSS3-кода были статичными; они располагались на одном месте и оставались неизменными на страницах в том или ином состоянии. Но CSS3 позволяет сделать намного больше. В следующей главе мы рассмотрим способы обеспечения перехода из одного состояния в другое, а также направим наш CSS-код туда, где он никогда не использовался прежде, — в область анимаций.