Авторское право © WWW : Балбесов нет: Компьютерная графика
Перепубликация материалов,возможна только с устного или письменного разрешения Администрации сайта !
Название статьи , Опубликовано Статьи » Уроки » Веб-дизайн » Обзоры и рейтинги » Лучшие приемы CSS3 и примеры использования
16 марта 2010 01:38

Мода на CSS3 становится все более и более распространенной. И на самом деле, новые атрибуты CSS3 открывают множество новых возможностей. Посмотрите мою предыдущую статью про "Анимацию в CSS3" и вы увидите, что можно проделать с его помощью. Однако не спешите с эмоциями, потому что пока далеко не все браузеры полностью поддерживают его. Но это не означает, что вы не вообще должны его использовать. Итак, когда же следует использовать новые функции CSS3? Что же, продолжайте чтение этой статьи, и я покажу вам несколько замечательных примеров.

CSS3 для украшения страниц

Рельефный текст

Обратите внимание, как сайт Analog использует тень в один пиксель на тексте, чтобы придать ему рельефный вид. Изображение в зеленом круге взято из браузера, поддерживающего text-shadow , а изображение в красном круге взято из браузера, не поддерживающего этот параметр.

Плавные закругленные углы и тень

Сайт Colly использует border-radius и box-shadow чтобы украсить элементы шаблона закругленными углами и мягкими тенями. В случае, если CSS3 не поддерживается, будут отображены квадратные боксы, которые вы даже вряд ли и отличите.

Выкатывающиеся DVD

Этот сайт использует атрибут webkit-transform чтобы заставить DVD выкатываться из коробки при наведении курсора. Пользователи, использующие браузер с поддержкой webkit, такой как Safari или Chrome, увидят крутящуюся анимацию. Пользователи Firefox увидят, как диск просто выскочит. Пользователи браузеров, которые не поддерживают этот атрибут, увидят статичное изображение DVD диска.

Плавный переход и фэйдинг

Чтобы увидеть этот эффект, прокрутите сайт вниз до того, как верхняя панель поиска закроет собой на контент. Затем наведите курсор на верхнюю панель, и вы увидите, как полупрозрачный фон постепенно превратится в непрозрачный (просматривать нужно в браузере с webkit).

Закругленные углы

Пользователи, чьи браузеры поддерживают атрибут border-radius, увидят закругленные углы на сайтеFuture of Web Design.

Тень для текста

Сайт SquareSpace украшает заголовок своего блога, добавляя к нему небольшую тень, которую вы едва заметите.

В каких случаях следует использовать CSS3?

Не нужноВращать изображения при помощи CSS3

Будьте осторожны, если вы назначаете границы для вращаемых изображений. Границы могут вызвать эффект дрожания.

Можно:Вместо этого экспортировать вращаемые изображения

Чтобы избежать эффекта дрожания, используйте Photoshop, чтобы повернуть изображение, затем используйте трансформацию CSS как это сделано на сайте Chirp.

Можно:Вращать одно большое изображение

Вращающееся изображение земли стало отличным исполнением для страницы 404 на сайте FOWD (просматривайте на браузере с webkit)

Не нужноВращать сразу несколько больших изображений

Тем не менее, не переусердствуйте с вращением нескольких больших изображений, так как это будет создавать нагромождение

Не нужноПолностью полагаться на CSS3

Все смотрится хорошо, когда вы просматриваете сайт Ryan Merrill через браузер с webkit. Но попробуйте открыть его в другом браузере, таком как Flock например. Ого, что случилось? Все пошло наперекосяк. Шрифты больше не отображаются корректно, исчез бокс со слоганом. Поэтому будьте осторожны, если в верстке ваших шаблонов вы полагаетесь на HTML5 и CSS3.

Не нужнопохожие шрифты в качестве альтернативы

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

Заключение

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

    • Источник статьи:www.webdesignerwall.com. Перевод: Балбесов.Нет - компьютерная графика

    URL / WWW
    http://balbesof.net/article/a-157.html