В предыдущей главе мы говорили о легко реализуемых и полезных CSS3-методи-ках, помогающих создавать адаптивные веб-дизайны. Мы также внесли значительные изменения в визуальные элементы, задействовав CSS3-правило @font-face для добавления пользовательской типографики, и поработали с CSS3-инструментами для выборки элементов объектной модели документа DOM. Таким образом, теперь, когда мы рассмотрели основы CSS3, взглянем на более продвинутые функции CSS3 и узнаем, как можно улучшить эстетику адаптивного веб-дизайна, прибегнув к CSS3-методикам, подавляющее большинство которых не требует ни единого графического изображения, настолько снижая требования нашего адаптивного веб-дизайна к скорости канала подключения пользователя, насколько это представляется возможным.
В этой главе мы поговорим о CSS3, в частности о том, как:
— создавать отбрасываемые текстом тени;
— создавать отбрасываемые блочными элементами тени;
— создавать градиентные фоны;
— использовать множественные фоновые изображения;
— применять фоновые градиенты CSS3 для создания узоров;
— использовать CSS3-правило @font-face для создания значков, объем которых не предъявляет высоких требований к скорости канала подключения пользователя.
На данном этапе я повторюсь, почему считаю CSS3 таким полезным инструментом, когда речь идет об адаптивных веб-дизайнах: использование CSS3 вместо изображений снижает количество запросов HTTP (и, следовательно, способствует более быстрой загрузке страниц), а также делает дизайны более гибкими и удобными в сопровождении. Эти преимущества будут кстати даже для типичного «настольного» веб-дизайна с фиксированной шириной. Однако еще более важно то, что новые CSS3-функции прекрасно сочетаются с адаптивным веб-дизайном, поскольку позволяют с легкостью обеспечивать разные по размеру тени, отбрасываемые блочными элементами и текстом в различных по величине областях просмотра, без необходимости создавать и экспортировать хоть одно изображение. Предполагаю, что вы тоже все это понимаете, поэтому приступим.
ПРЕФИКСЫ ПОСТАВЩИКОВ.
При использовании CSS3 не забывайте добавлять соответствующие префиксы поставщиков для обеспечения наиболее широкой кросс-браузерной совместимости. С другой стороны, если вы любите добавлять в свой код JavaScript, то примите во внимание упоминавшийся ранее сценарий — prefix-free. Он автоматически добавляет соответствующие префиксы в любые CSS-правила, которые в них нуждаются, позволяя вам вносить в таблицу стилей только W3C-версию. Этот сценарий доступен по адресу http://leaverou. github.com/prefixfree/.
Добавить комментарий