12 классных функций CSS3, которые вы наконец-то можете использовать


Оглавление (нажмите, чтобы открыть):

20 впечатляющих CSS3 примеров, техник и библиотек

В данной подборке собраны самые лучшие и качественные CSS фишки. Тут Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной.

Размытое меню

Это действительно красивое и качественно выполненное меню на чистом CSS. Правильный и удачный пример использования новых технологий CSS.

CSS 3D облака

В этом демо Вы сможете создавать и редактировать причудливые облака в 3D. Данные облака на CSS дают понять нам, что возможности веб технологий практически безграничны.

Логотипы на чистом CSS

Это примеры логотипов сделанных только на чистом CSS. Вы только вдумайтесь, при создании не использовались изображения. Это просто нечто.

Алфавит с CSS анимацией

Отличный и художественный пример использования CSS в алфавите

3D навигация для сайта

Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов.

Дудл от Google на CSS

Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации

Слайдер

Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.

Двойное анимированное кольцо

Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS

Размытие на CSS

Мне кажется очень нужный фильтр, тем более он сделан на чистом CSS. с помощью размытия можно привлечь внимание пользователя к определённой точке.

Полное руководство по Flexbox

Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.

Красочное и анимированное меню на CSS3

Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.

CSS фильтры

Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.

CSS формы

Пост о CSS формах с многочисленными примерами

Прогресс бары на CSS

Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.

Анимация — Animate.css

Самый популярный проект CSS анимации в интернете на сегодняшний день. И наверное самый простой и качественный, и к тому же бесплатный.

Индикаторы загрузки — Spinkit

Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS.

Кнопки

Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант

Генератор для создания переключателей

Небольшое и качественное интернет приложение, с помощью которого Вы сможете создать красивые переключатели для использования на сайте.

Всплывающие подсказки

CSS библиотека бесплатных всплывающих подсказок — Hint.css

Цветовые схемы


Схемы цветов для людей, которые не любят копаться в коде

6 лучших анимационных «фишек» CSS3

источник изображения http://ruseller.com/

CSS (англ. Cascading Style Sheets) — каскадные таблицы стилей; язык для описания стиля веб-страниц и элементов на них (изображения, отступы, таблицы, кнопки)

Почему именно CSS?

Потому что имеется множество неоспоримых плюсов при его использовании.

  1. Наличие стандарта, что резко увеличивает совместимость с разнообразными платформами.
  2. При выносе описания элементов в отдельный файл существенно ускоряется загрузка страниц (все описания стилей как раз находятся в отдельном файле .css). Подгружается только структура, а описание кэшируется. Как результат — уменьшается нагрузка на сервер.
  3. Описание сайта и описание элементов разделены. Реализован принцип «Мухи отдельно, котлеты отдельно». Это дает большую скорость работы при внесении исправлений и поддержке ресурса.
  4. При грамотном использовании CSS ваша страница будет корректно отображаться как на стационарных мониторах, так и на экранах мобильных гаджетов.
  5. К тому же любой текстовый браузер воспринимает css-верстку как текст и принимает без проблем.
  6. При масштабировании изображение, созданное с помощью CSS, не теряет в качестве, в отличии от растровых изображений, которые чувствительны к увеличению масштаба.
  7. CSS на вашем сайте не зависит от настроек браузера пользователя. В браузере можно отключить выполнение скриптов, но не выполнение стилей.

Актуальная версия CSS — CSS3, расширенная и дополненная «фичами». Эти дополнения хороши тем, что с их помощью вы сможете реализовывать практически любые анимационные эффекты. Всё зависит от вашей фантазии.

Самые эффектные примеры CCS3

Общий div для всех примеров:

1. Одно из лучших применений свойства transform — поворот объекта. Красиво смотрится на странице, добавляя ей динамику. При наведении курсора на объект он поворачивается на указанное количество градусов. Вы можете менять угол поворота и направление вращения в rotate. Время, за которое должно произойти событие, задаётся в transition, в нашем случае это 0.9 секунды. Не забываем про объявление класса в body.

Результат (наведите курсор на объект):

2. Увеличение/уменьшение элемента. Очень полезная вещь. Эту функцию можно использовать для привлечения внимания пользователя к элементу. Событие происходит при наведении курсора.

3. Есть еще приятный и полезный визуальный эффект — покачивание объекта из стороны в сторону, то есть несколько перемещений вправо-влево (в нашем случае). Результат — затухающие колебания.
Код, который заставляет покачиваться объект:

4. Прозрачность. Не только функционально, но и красиво. С помощью этого приёма вы можете привлечь внимание к объекту. Или, наоборот, снизить его к кнопке или месту на сайте, чтобы обратить внимание посетителя на что-то более важное.

5. Эффект 3D текста также легко можно реализовать на css3. Никаких gif-ов, только код. Всё очень просто, но в то же время красиво. Реализуется с помощью добавления свойства text-shadow, которое формирует тень и уже известного нам по первому примеру свойства transform.

6. Скругление углов. Этот вид анимации работает при использовании свойства border-radius. Можно скруглить углы или превратить прямоугольник в овал, изменяя значение процента.

Поиграться с кодом любого из примеров вы можете, нажав на ссылку JSFiddle в правом верхнем углу каждого фрейма. Как вы понимаете, это скелеты, но с помощью них можно сделать очень многое. Желание и фантазия творят чудеса!

Кстати, на этом портале реализованы некоторые подобные эффекты. А вы их заметили?

Тем, кто хочет стать программистом, рекомендуем профессию «Веб-разработчик».

источник изображения http://ruseller.com/

CSS (англ. Cascading Style Sheets) — каскадные таблицы стилей; язык для описания стиля веб-страниц и элементов на них (изображения, отступы, таблицы, кнопки)

Почему именно CSS?

Потому что имеется множество неоспоримых плюсов при его использовании.

  1. Наличие стандарта, что резко увеличивает совместимость с разнообразными платформами.
  2. При выносе описания элементов в отдельный файл существенно ускоряется загрузка страниц (все описания стилей как раз находятся в отдельном файле .css). Подгружается только структура, а описание кэшируется. Как результат — уменьшается нагрузка на сервер.
  3. Описание сайта и описание элементов разделены. Реализован принцип «Мухи отдельно, котлеты отдельно». Это дает большую скорость работы при внесении исправлений и поддержке ресурса.
  4. При грамотном использовании CSS ваша страница будет корректно отображаться как на стационарных мониторах, так и на экранах мобильных гаджетов.
  5. К тому же любой текстовый браузер воспринимает css-верстку как текст и принимает без проблем.
  6. При масштабировании изображение, созданное с помощью CSS, не теряет в качестве, в отличии от растровых изображений, которые чувствительны к увеличению масштаба.
  7. CSS на вашем сайте не зависит от настроек браузера пользователя. В браузере можно отключить выполнение скриптов, но не выполнение стилей.

Актуальная версия CSS — CSS3, расширенная и дополненная «фичами». Эти дополнения хороши тем, что с их помощью вы сможете реализовывать практически любые анимационные эффекты. Всё зависит от вашей фантазии.

Самые эффектные примеры CCS3

Общий div для всех примеров:

1. Одно из лучших применений свойства transform — поворот объекта. Красиво смотрится на странице, добавляя ей динамику. При наведении курсора на объект он поворачивается на указанное количество градусов. Вы можете менять угол поворота и направление вращения в rotate. Время, за которое должно произойти событие, задаётся в transition, в нашем случае это 0.9 секунды. Не забываем про объявление класса в body.

Результат (наведите курсор на объект):

2. Увеличение/уменьшение элемента. Очень полезная вещь. Эту функцию можно использовать для привлечения внимания пользователя к элементу. Событие происходит при наведении курсора.

3. Есть еще приятный и полезный визуальный эффект — покачивание объекта из стороны в сторону, то есть несколько перемещений вправо-влево (в нашем случае). Результат — затухающие колебания.
Код, который заставляет покачиваться объект:

4. Прозрачность. Не только функционально, но и красиво. С помощью этого приёма вы можете привлечь внимание к объекту. Или, наоборот, снизить его к кнопке или месту на сайте, чтобы обратить внимание посетителя на что-то более важное.

5. Эффект 3D текста также легко можно реализовать на css3. Никаких gif-ов, только код. Всё очень просто, но в то же время красиво. Реализуется с помощью добавления свойства text-shadow, которое формирует тень и уже известного нам по первому примеру свойства transform.

6. Скругление углов. Этот вид анимации работает при использовании свойства border-radius. Можно скруглить углы или превратить прямоугольник в овал, изменяя значение процента.

Поиграться с кодом любого из примеров вы можете, нажав на ссылку JSFiddle в правом верхнем углу каждого фрейма. Как вы понимаете, это скелеты, но с помощью них можно сделать очень многое. Желание и фантазия творят чудеса!

Кстати, на этом портале реализованы некоторые подобные эффекты. А вы их заметили?

Тем, кто хочет стать программистом, рекомендуем профессию «Веб-разработчик».

Можно ли использовать CSS3


Прежде чем читать данную статью посмотрите на дату её написания, если прошло уже больше года, то она может быть не актуальной. Сама же статья будет посвящена ответу на вопрос: «Можно ли использовать CSS3?«. Давайте разберёмся с этим вопросом поподробнее.

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

Но, к сожалению, далеко не все свойства поддерживаются даже современными браузерами. А вот IE8, который ещё по прежнему относительно популярный, вообще не поддерживает ничего. И вот именно из-за этого браузера CSS3 вообще использовать я не рекомендую. Если IE6 и IE7 — это уже история, как я писал, то IE8 — это до сих пор сегодняшний день.

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

Лично я сам очень жду, когда IE8 будет уже неиспользуемым, и в этот момент можно будет смело использовать CSS3 по полной программе, что очень сильно упростит работу верстальщика.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 16 ):

    У вас тут ошибка: «верстальщики используются CSS3» «используют» надо

    Как избежать ошибок в CSS3

    20 февраля 2012 | Опубликовано в css | 2 Комментариев »

    Новые свойства CSS3 не только дают нам дополнительные возможности, но приводят к некоторым трудностям. Эта статья поможет узнать Вам, правильно ли Вы используете новые функции и избежать распространенных ошибок.

    Мастер Йода рекомендует:  PHP функция для удаления определенных HTML-тегов и атрибутов PHP

    Наконец-то пришло время CSS3. Вы уже, наверное, заметили, что некоторые свойства CSS3 имеют более сложный синтаксис: нужно использовать странные префиксы, понимать специфику разных веб-обозревателей и оставаться в курсе последних изменений.

    В общем, некоторые моменты пугают. Сегодня мы рассмотрим ошибки, которые можно совершить при написании CSS3-кода и узнаем, как их избежать.

    Не забывайте указывать префиксы для всех браузеров

    Префиксы для браузера (vendor prefixes) добавляются перед свойствами CSS. Использование этих приставок без прикреплённых свойств фактически бессмысленно.

    Например, свойство CSS3 transform мы укажем как -moz-transform для Mozilla Firefox, как -webkit-transform для Safari и Chrome, как -o-transform для Opera и, наконец, как -ms-transform — для Internet Explorer.

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

    Не забывайте и не ленитесь добавлять каждую приставку. Возможно, у Вас мало посетителей, которые используют Оперу, или Вы ненавидите этот браузер, всё равно постарайтесь перебороть себя. Вы не только дадите возможность каждому пользователю насладиться сайтом, но и сами получите незаменимый опыт.

    Больше про эту особенность Вы сможете прочитать в статье Эрика Мейера .

    Не ставьте свойство с приставкой в конец списка

    Мы находимся на очень интересной стадии развития CSS3 , где некоторые свойства уже стандартизированы, а некоторые — нет. Самое печальное то, что у них отличается синтаксис. Свойства с приставками имеют ряд особенностей и Вы в первую очередь должны убедиться, что все они работают .

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

    Safari5 понимает два эти свойства по-разному. Свойство без префикса округлит верхний левый и нижний правый углов на 30px и верхний правый и нижний левый угол на 10px. Свойство с приставкой округлит углы по горизонтали на 30px и добавит вертикальное округление радиусом 10px. Если Вы ставите свойство с префиксом в конец списка, то браузер не воспроизведёт его .

    Можете узнать больше об этой особенности из статьи Криса Коера.

    Оставайтесь в теме

    Google Chrome стремительно развивался от версии 0 до версии 10 за последние пару лет. Следовательно, есть некоторые различия в том, как эти версии отображают код CSS3.

    Простой пример — то, как мы указываем линейные градиенты для Mozilla и WebKit . Мы видим, что у них разный синтаксис для одного и того же свойства:

    Версия Mozilla более проста и ближе к стандартам, чем версия WebKit. Возможно, в последних версиях браузерах WebKit (Chrome10, и Safari 6), они будут иметь другой синтаксис (это не точно), похожий на синтаксис Мозиллы.

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

    Рекомендуем замечательный сервис сss3please — онлайн-ресурс для копипасты отрывков CSS3, у которых есть все «свежие» свойства CSS3 в правильном порядке.

    Плохое форматирование


    Плохое форматирование — не такой смертный грех, как предыдущие, но все же давайте рассмотрим и этот вопрос. Если Вы используете много символов подряд, код выглядят ужасно, и Вы можете в нём запутаться.

    Пусть код будет чистым:

    CSS довольно снисходителен с отступам, так почему бы этим не воспользоваться.

    Не переборщите

    Вы, конечно, можете заставить всё вращаться и изменяться в размере, добавить везде прозрачность, использовать 10 различных шрифтов и сделать так, чтобы каждый элемент на странице отбрасывал тень, но зачем всё это нужно сразу?

    Не буду объяснять Вам, что такое хороший вкус. Вы — веб-дизайнер и должны сами всё знать.

    Только учтите, что у многих свойст CSS3 есть некоторые особенности. У WebKit, например, есть превосходное свойство keyframe-анимации, Если Вы «оживляете» только несколько элементов на странице,анимация будет долго воспроизводиться, и возможно, даже, будет подтормаживать браузер.

    Ещё один пример — большие тени приводят к проблемам с прокруткой страницы в WebKit, которую пользователи будут наблюдать на старых версиях в течение некоторого времени.

    Просто имейте в виду, что удалив некоторые свойства CSS3, вы избавитесь от нескольких проблем.

    Что касается мобильных устройств

    Ещё одно потрясающее свойство CSS3 — это media queries. Теперь у нас есть возможность подстраивать сайты под разные устройства и изменять ширину элементов. Вы можете прямо в стилях включить стили для очень маленьких экранов:

    Уберите элементы, которые Вы считаете менее значимыми. Удостовериться, что размеры изображений указаны правильно, и внизу не появляется горизонтальная прокрутка. И помните о тех проблемах о которых мы говорили? Это вдвойне касается мобильных устройств, ведь малейшая неточность может вызвать серьезные неудобства. Рассмотрим на примере как это лучше сделать:

    10 самых используемых правил CSS3

    В данном обзоре представлены 10 самых популярных правил CSS3, которые уже активно используются в различных проектах.

    Большинство из правил требуют использования префикса для соответствующего браузера:

    -moz- для браузеров, построенных на основе механизма Mozilla;

    -webkit- для браузеров, построенных на основе механизма Webkit.

    1. Скругленные углы

    Для создания скругленных углов рамки вокруг элемента вместо 4-х изображений используется команда:

    IE не поддерживает команду для вывода скругленных углов.

    2. Тень элемента

    Для создания тени от элемента используется команда box-shadow с префиксом для браузера. Нужно задать три параметра и цвет эффекта:

    1. Смещение тени по горизонтали — положительное значение означает смещение вправо, а отрицательное — влево.
    2. Смещение тени по вертикали — положительное значение для смещения тени вниз, а отрицательное — вверх.
    3. Степень размытия тени.

    IE не поддерживает команду для вывода тени элемента.

    3. Прозрачность

    Прозрачность всегда была трюком. Различные браузеры поддерживали прозрачность с помощью различных команд. Команда RGBA способствует кросс-браузерности кода и имеет более логичный синтаксис. В ней используется 4 параметра: первый, второй и третий являются соответственно значениями для цветовых каналов красного, зеленого и синего (0-255), а четвертый параметр — значение для альфа канала или прозрачности (0-1).

    Для команды RGBA не требуется использовать префиксы браузеров ( -moz- , -webkit- ):

    Свойство background-color установит нежно голубой цвет для фона с прозрачностью 50% в браузерах, которые поддерживают команду RGBA.

    К сожалению Internet Explorer также реализует свойство background-color , но не воспринимает команду RGBA. В нашем примере для отключения использования правила в IE используется псевдо-селектор last-child :

    Команда RGBA не поддерживается IE.

    4. Колонки

    Способность использовать колонки была добавлена в CSS3. Вместо контейнера с плавающими элементами можно установить число колонок, их ширину и правило форматирования:

    Колонка номер 1

    Колонка номер 2

    5. Несколько изображений для фона

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

    Для размещения изображения справа и слева можно использовать следующие команды:

    Данный набор команд будет неверно выводиться в Internet Explorer, потому что он не воспринимает 2 фоновых изображения для одного элемента. Поэтому изменим код, чтобы игнорировать IE:

    Использование нескольких фоновых изображений могут существенно изменить подход к разработке дизайна.


    6. Модель прямоугольника

    Каждый элемент на странице выводится в соответствии с моделью прямоугольника. Стандартная модель прямоугольника W3C теперь является изменяемым свойством и устанавливается с помощью команды CSS3 box-sizing: content-box .

    Данный элемент имеет ширину 200px и отступы 10px, а значит, общая ширина его составляет 220px при использовании стандартной модели прямоугольника.

    Данный элемент также имеет ширину 200px и отступы 10px, но отступы включены в ширину элемента, поэтому оно составляет 200px.

    7. Обводка

    Свойства обводки идентичны свойствам рамки, но дополнительное смещение позволяет смещать обводку наружу или внутрь элемента:

    C помощью комбинации рамки и обводки можно создавать вокруг элемента две рамки разного цвета.

    8. Фоновые градиенты

    Safari использует концепцию со значениями color-stop :

    Градиент может содержать много значений color-stop , что позволяет организовывать сложные композиции.

    9. Вращения

    Данную команду хорошо использовать для графических элементов, а текст может быть сильно деформирован в процессе вывода.

    10. Анимации

    Последний пункт нашего обзора действует только в Safari и Firefox 4 beta, которые поддерживают трансформации элементов. Трансформации включают вращения, переходы между элементами, позволяют задавать временные параметры для преобразования и многое другое!

    Простым примером может служить изменение эффекта при наведении курсора мыши на ссылку: плавное изменение цвета от одного к другому.

    Сначала определяем цвет ссылки:

    Устанавливаем цвет и свойства для анимации с помощью transition-property :

    10 приемов CSS3, которые можно и нужно использовать

    О @font-face мы говорили совсем недавно, когда разбирались с уникальными шрифтами Google Fonts. @font-face позволяет использовать практически любой шрифт. Все, что нужно, это загрузить этот шрифт на веб-сервер и подключить его в файле css:

    Так как @font-face появился достаточно давно, практически все браузеры его поддерживают. К примеру, IE6 поддерживает @font-face, правда требует для этого файл формата eot. А IE9 на данный момент поддерживает и файлы woff.

    Правда поддержка поддержкой, а баги все-таки есть. Например, IE6 даже используя файлы eot может неправильно рендерить шрифт. Чтобы избежать этого имеет смысл объявить @font-face дважды: первый — используя только eot файл, второй — все остальные типы файлов для того же шрифта.

    У WebKit браузеров тоже не все в порядке — они не применяют стили bold, italic и т.д. к шрифту заданному через @font-face. Решение здесь простое — задать normal для параметров font-weight, font-style, font-variant в объявлении @font-face

    Полный синтаксис
    Синтаксис с учетом всех багов будет выглядеть вот так:

    А итогом по @font-face будет ссылочка на прекрасный сервис fontsquirrel.com, на котором вы сможете найти огромное число шрифтов либо воспользоваться генератором для создания собственного набора.

    С помощью свойств opacity вы можете контролировать прозрачность элемента. Свойство opacity применяется ко всему элементу и всем его дочерним элементам. Так же если вы хотите использовать прозрачность на полную — используйте RGBa схему задания цветов, где тоже используется прозрачность. Синтаксис до ужаса прост:

    Значение может быть задано от 0.0 до 1.0 (непрозрачный). Так же допускается использование сотых, к примеру 0.37. Пока IE не поддерживает opacity имеет смысл использовать специальный фильтр:

    Вот так выглядит полный синтаксис для IE:

    А так будет выглядеть новый фильтр для IE 8-9:

    Обратите внимание, что сначала нужно использовать конструкцию для IE 8-9 первой, для IE 6-7-8 второй.
    Полный синтаксис

    О RGBA я писал в цикле статей CSS3 для начинающих. RGBA — это одна из моделей задания цвета. Что делает ее особенной? Вы можете помимо задания цвета, задать так же и прозрачность. Синтаксиси RGBA таков:

    Значение цветов указываются в пределах от 0 до 255. А значение для прозрачности указывается в районе от 0.0 до 1.0. Все современные браузеры поддерживают RGBA модель, в том числе и IE9. Что с ранними версиями IE? Все не совсем так хорошо. Есть баг в старых версиях IE: если вы задаете фоновый цвет (background-color) какого-либо элемента с помощью RGBA, то цвет не будет отображен. Решением здесь выступает использование заглушек — цвет указанный в RGB или hex формате. Это поможет отобразить цвет, но не прозрачность. Для того, чтобы отобразить прозрачность в старых IE можно использовать фильтр.

    Полный синтаксис
    Простой вариант:

    Более специфичный вариант:

    А вот синтаксис с фильтрами для IE:

    border-radius позволяет нам делать углы закругленными и создавать интересные формы. border-radius одно из самых простых и частоиспользуемых свойств CSS3. Постарайтесь использовать сокращенные формы если вы задаете одинаковые параметры для всех 4х углов. Вот сокращенный синтаксис:

    Есть так же различные варианты синтаксиса для разных браузеров. Например, при указании префикса -moz- для Mozilla Firefox, вы можете задать несколько разных значений для каждой позиции в сокращенной форме. -webkit- префикс требует наличия отдельных свойств для каждой позиции. Поддержка border-radius хорошая. Исключение как всегда составляют старые версии браузера IE. Есть два пути решения проблемы. Первый — использовать для старых версий IE основанную на изображениях схему создания закругленных углов. Второй — показывать пользователям старых браузеров квадратные углы, а закругленные углы будут стимулом обновить браузер.

    Полный синтаксис
    Пример с одинаковыми значениями для всех 4х углов:

    Различные значения для углов:

    Хорошим инструментом автоматизации для создания закругленных углов будет сервис http://border-radius.com/. Сервис генерирует кроссбраузерный код для border-radius.

    Еще одно из долгожданных свойств CSS3 box-shadow позволяет создавать тень для элемента без использования изображений. Синтаксис:

    * position (позиция): стандартное значение outset и оно не требует определения. Другое значение inset и должно быть задано.
    * x-offset (горизонтальное смещение): положительное значение позиционирует тень справа от элемента; отрицательное значение позиционирует тень слева от элемента.
    * y-offset (вертикальное смещение): положительное значение даст тень снизу элемента, отрицательное — сверху. Если третий параметр опущен, то размытие будут установлено в 0.
    * blur radius (радиус размытия): 0 — без размытия; числа больше нуля — увеличивают размытие.


    box-shadow имеет достаточно неплохую поддержку современными браузерами, в том числе и IE9. В Firefox 4 на данный момент не требуется указывать префикс -moz-, но он все еще нужен для версий 3.5 и ниже. Вне зависимости от префиксов вендоров синтаксис идентичен. Допускается так же использование нескольких теней для одного элемента. Для возможно использование и специальных фильтров для создания теней. По словам Роберта Ньюмана фильтры IE создают более приятную тень.
    Полный синтаксис

    Различные примеры с использованием box-shadow я описал в статье Drop-shadow – простые примеры

    text-shadow позволяет добавлять тень к тексту и создавать различные эффекты. Например, в статье 6 эффектов с использованием text-shadow я показывал некоторые из них. Синтаксис у text-shadow примерно такой же как и box-shadow. Так же как и старший брат, text-shadow имеет хорошую поддержку современными браузерами, возможность задавать несколько теней для одного элемента, что дает возможность создавать действительно красивые эффекты.

    К вопросу о кроссбраузерности: есть специальный фильтр для IE, который позволит отбросить изображения вовсе. Имеет смысл использовать условные комментарии для Internet Explorer.

    Существует так же огромное количество сервисов для автоматического создания теней. К примеру, http://westciv.com/tools/shadows/.

    Мастер Йода рекомендует:  21 пример команд OpenSSL, которые помогут вам на практике

    Градиент по сути не является свойством CSS. Это скорее набор значений, которые можно использовать в свойствах background, border-image, list-style-image. Градиент генерируется браузером, который, по сути, создает изображение, которое потом применяется в определенном свойстве. Градиент имеет множество различных вариантов синтаксиса для разных браузеров. Вот несколько советов по линейному градиенту:

    * Синтаксис с префиксом -moz- и стандартный синтаксис содержит тип градиента перед списком параметров
    * Синтаксис с префиксом -moz- позволяет задавать значения в градусах
    * Названия позиций отличаются в разных браузерах
    * Синтаксис для webkit браузеров позволяет использовать color stop — промежутки для цветов.

    На данный момент ни Opera ни Internet Explorer (даже девятый) не поддерживают градиент. Для Opera имеет смысл использовать изображение для реализации градиента. Для IE есть специальный фильтр, который создает линейный градиент. К сожалению, не существует фильтра для создания радиального градиента для IE.

    Более подробно о градиентах в CSS в статьях Градиенты в CSS и Градиентная заливка с помощью CSS3.

    Фон из нескольких изображений

    С помощью CSS вы можете создать фон для элемента из нескольких изображений. Эта возможность была и в CSS 2.1. В CSS3 изображения выстраиваются как слои — первое располагается на самом верху, второй ниже и т.д. Синтаксис достаточно прост — нужно просто перечислить наборы параметров через запятую. Только последний из наборов параметров может иметь внутри себя задание цвета.

    33 подсказки, хитрости, статьи и обучающие сайты о CSS3, с которыми должен ознакомиться каждый

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

    Так как CCS3 тесно связан с HTML 5, то в скором времени мы, также, поделимся с Вами интересной информацией об этом языке веб-программирования, так что следите за обновлениями нашего сайта! Вперед к знаниям!

    В этой статье Вам будет рассказано о том, почему следует пользоваться CSS3 в разработке дизайнов и о том, как дизайнеры уже сейчас успешно применяют его на практике. Отличная статья, с которой Вам следовало бы начать!

    Здесь собраны 5 способов применения CSS3 из будущего, но Вы уже сейчас можете попрактиковаться в их применении.

    Научитесь делать отличные кнопки с помощью CSS3.

    Шпаргалка CSS3 с возможность печати, в которой собраны все функции, типы селекторов и валидные значения в W3C. (Можно скачать PDF-версию)

    CSS3 можно представить как нового ребенка в семье таблиц стилей. CSS3 предлагает новые интересные возможности воздействия на Ваши проекты дизайнов, и позволяет Вам гораздо шире использовать таблицы стилей. Также не забудьте посмотреть страницу предварительного просмотра CSS3 здесь, в которой отображены новые возможности.

    Отличная обучающая статья о CSS3, в которой рассказывается о новых возможностях CSS3, а также возможные решения по их применению.

    В этой 6-томной статье Вам предоставляется информация о новом стандарте CSS3, который вскоре заменит CSS2.

    В этом документе собрана информация о возможностях CSS, рекомендации по CSS2 о том, как напрямую влиять на доступность веб-документов. Некоторые из описанных тут возможностей по доступности также можно применять в CSS1. В целом, материал предоставлен так, что на него без вопросов можно ссылаться с других источников.

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

    В этой статье xhtml.com берет интервью у Берта Боса, председателя группы разработчиков CSS в W3C. Беседа ведется о следующем выпуске технических условий CSS и о том, как предыдущие варианты CSS влияют на его дальнейшее развитие.

    Отличное интервью с Эриком Мейером по поводу CSS3.

    В статье рассказывается о некоторых проблемах и вопросах, возникающих при работе с CSS3.

    В этой статье Вам будет рассказано об интересных возможностях CSS3, которые Вы сможете применить на практике уже сегодня.

    Одна из самых важных возможностей CSS3, по которым истосковались все дизайнеры, несомненно, border-radius! Ведь именно с этой функцией CSS3 возможно создавать окружности и закругленные углы без использования изображений.

    Крэйг Граннелл обращается в нечто между Джеффри Зельдманом и Расселом Грантом, кратко охватывая то, что стоит ожидать от CSS в будущем. Не без помощи Opera, Safari и Firefox.

    В статье описаны многие способы применения CSS3, но особе внимание уделяется тому, с помощью которого создается прогрессивное визуальное расширение. Border radius, @font-face, анимация и переходы, text-shadow, box-shadow, множественные фоновые изображения, RGBa, градации, изображение вместо границы и др.

    В этой статье Вам будет рассказано о том, как создать страницу блога, используя функции HTML 5 и CSS3 нового поколения. В общем, статья о том, как можно будет пользоваться этими языками, когда их поддержка будет полностью разработана.

    В этой статье взятой с Nettuts Вам будет рассказано о старых классических функциях CSS, и как их можно реализовать в CSS3.

    Фоновые изображения или тексты используются почти всегда и в различных целях. Часто они добавляют ту самую изюминку в дизайн сайта. Теперь же, с приходом CSS3, фоновые изображения можно будет изменять в размерах и даже тиражировать их.

    Вам понравился материал? Поблагодарить легко!
    Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

    Создаем сшитый ленточный баннер при помощи CSS3

    Create CSS3: многофункциональный генератор кода CSS3

    Fancy Input: привлекательные поля ввода на CSS3

    Photobox: jQuery-галерея изображений на CSS3

    Morf.js: пользовательские функции замедления для переходов в CSS3

    Параметры CSS3 в IE посредством PIE


    Шаргалки по CSS2.1 и CSS3 (PDF)

    CSS3, Please! – Кросс-браузерный генератор правил CSS3

    Шпаргалка по CSS3 (PDF)

    Создаем кнопку на CSS3 с красивыми эффектами

    • 26.10 | 18:00 —

    Топ UX тренды для банкинга в 2020 году

    2009—2014 © CoolWebmasters.Com — онлайн-журнал для профессиональных веб-дизайнеров и разработчиков. Все права защищены.
    Наш онлайн-журнал предоставляет самую свежую и актуальную информацию для профессиональных веб-дизайнеров и разработчиков в виде переводов статей и новостей, полученных с зарубежных информационных ресурсов. Дизайн и разработка сайта — лаборатория D.L.E. Templates.Com

    Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на наш сайт!

    Мы сами вдохновляемся материалами, которые предлагаем вам на обозрение, будь то интересные руководства или полезные и впечатляющие подборки (дизайнов, шаблонов, сниппетов и т.д.), и мы всегда сохраняем ссылки на источники, и сообщаем авторов изображений, использованных в подборках или руководствах. Зачастую, ссылка на источник не ведёт напрямую к автору шедевра, но мы ведь не волшебники, чтобы угадывать, кто является автором.

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

    Возможности CSS, которые вам понравятся в 2015

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

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

    CSS-селекторы четвёртой версии

    Спецификация селекторов третьей версии хорошо реализована в браузерах и предоставляет нам такие полезные селекторы, как :nth-child . Четвёртая же версия даёт нам гораздо больше способов разметить контент при помощи CSS.

    Отрицающий псевдокласс not

    Селектор :not появился в третьей версии, но в четвёртой он был обновлён. В третьей спецификации вы можете передать селектор, к которому не должны применяться CSS-свойства. Для того чтобы весь текст, кроме текста с классом .intro стал полужирным, вы можете использовать следующее правило.

    В четвёртой версии вы можете передавать список селекторов через запятую.

    Псевдокласс has

    Этот псевдокласс принимает список селекторов в качестве аргумента и CSS-свойства будут применяться, если любой из переданного списка селекторов найдёт подходящий элемент. Лучше посмотреть на примере. Здесь каждому элементу a , который содержит в себе изображение, будет нарисована чёрная рамка:

    Во втором примере я совмещаю :has и :not и выбираю только те элементы li , которые не содержат элемент p :

    Псевдокласс совпадения matches

    Этот псевдокласс означает, что мы можем применить правила к группе селекторов, например:

    Чтобы проверить, поддерживает ли ваш браузер эти селекторы, вы можете использовать css4-selectors.com. Там же вы можете узнать больше о новых селекторах.

    Режимы наложения в CSS

    Если вы знакомы с режимами наложения в фотошопе, тогда, возможно, вас заинтересует спецификация смешивания и наложения. Эта спецификация позволяет нам применять режимы наложения к фонам и любым HTML-элементам прямо в браузере.

    В приведённом ниже CSS у меня есть контейнер с фоновым изображением. Добавляя цвет фона и устанавливая background-blend-mode в значения hue и multiply , я могу применить интересный эффект к изображениям.

    Свойство mix-blend-mode позволяет наложить текст поверх изображения. В примере ниже у меня есть заголовок h1 и затем в .box2 я устанавливаю mix-blend-mode: screen .

    Режимы наложения в CSS на удивление хорошо поддерживаются современными браузерами, за исключением Internet Explorer. background-blend-mode и mix-blend-mode доступны в Safari и Firefox, в качестве экспериментальной опции в Opera и Chrome. При осторожном использовании это как раз тот вид спецификации, с которым можно поиграться, чтобы усовершенствовать ваш дизайн, при условии, что будет запасной вариант для браузеров не поддерживающих эту возможность.

    Если вам требуется более полная поддержка для старых браузеров и вы не уверены, что стоит использовать режимы наложения в продакшене, не забывайте — их можно использовать на этапе разработки, чтобы избежать работы с фотошопом. А когда вы получите итоговые изображения, создайте для продакшена картинки в графическом редакторе, заменив CSS-эффекты.

    Узнайте больше об использовании режимов наложения в статье на CSS Tricks, на сайте Adobe и Dev Opera.

    Функция calc

    Функция calc() является частью модуля CSS-значений и единиц измерения третьей версии. Она даёт возможность выполнять математические вычисления прямо в CSS.

    В качестве простого примера можно использовать calc() для расположения фонового изображения относительно нижнего правого угла элемента. Чтобы расположить на расстоянии 30px от верхнего левого угла, вы должны использовать:

    Однако, вы не сможете этого сделать относительно правого нижнего угла, если не знаете размеров контейнера. Функция calc() означает, что вы можете вычесть 30 пикселей из стопроцентной ширины или высоты:

    В современных браузерах calc() хорошо поддерживается, хотя использование для вычисления позиции фона в IE9 приводит к падению браузера.

    CSS-хитрости и функция calc() — забавная статья об использовании calc() для решения проблем CSS. Вот несколько простых кейсов на CSS Tricks.

    CSS-переменные

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


    CSS-переменные, описанные в первой версии модуля пользовательские CSS-свойства для каскадных переменных, приносят эту функциональность в CSS.

    К сожалению, поддержка браузерами CSS-переменных в настоящее время ограничена Firefox.

    Посмотреть больше примеров и узнать подробности вы можете в статье на Mozilla Developer Network.

    CSS-исключения

    Мы все знакомы с обтеканием в CSS. Самым простым примером может служить обтекание текстом изображения. Но обтекание довольно ограничено, так как плавающий элемент всегда прижимается кверху, и пока мы можем прижимать изображение к левому краю и обтекать его текстом справа и снизу. Не существует способа разместить изображение по центру документа и обтекать его текстом со всех сторон.

    Исключения позволяют окружить текстом позиционируемые элементы со всех сторон. Само по себе оно не определяет новый метод позиционирования и может быть использовано только в соединении с другими методами. В приведённом ниже примере я абсолютным позиционированием располагаю элемент, затем определяю его как исключение, задавая свойство wrap-flow и его значение both , после чего текст начинает воспринимать позицию элемента и обтекает его со всех сторон.

    Исключения в Internet Explorer

    Поддержка браузерами исключений и wrap-flow: both сейчас ограничена IE10+, требующим префикс -ms . Обратите внимание, что исключения до недавнего времени были связаны со спецификацией CSS-фигур, которую я рассмотрю ниже, так что часть информации может пересекаться.

    CSS-фигуры

    Спецификация по исключениям рассматривает обтекание текстом вокруг прямоугольных объектов. CSS-фигуры предоставляют нам более мощную возможность такую, как обтекание текстом по кривой.

    В первой версии спецификации CSS-фигуры определяются новым свойством shape-outside . Оно может быть использовано на плавающем элементе. В примере ниже я использую shape-outside чтобы изогнуть текст вокруг обтекаемого изображения.

    CSS-фигуры позволяют нам изогнуть текст вокруг изображения воздушного шара

    Фигуры поддерживают Chrome и Safari, это означает, что вы можете начать использовать их для устройств с iOS. Во второй версии спецификации вы сможете придавать форму тексту внутри элементов при помощи свойства shape-inside , а с этим придёт много интересных возможностей.

    Вы можете узнать больше о фигурах в статьях (один и два) на A List Apart.

    CSS-сетки

    Самую интересную тему я оставил напоследок. Я большой фанат появления спецификации по сеткам с момента первой реализации в Internet Explorer 10. CSS-сетки предоставляют нам способ создавать при помощи CSS структурные сетки и размещать на них наш дизайн.

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

    Мастер Йода рекомендует:  Взаимодействие роботов и людей удалось улучшить с помощью дополненной реальности

    В примере ниже мы объявляем сеткой элемент с классом .wrapper . Он содержит три колонки с шириной в 100px , отступом в 10px между ними и три строки. Мы располагаем контейнеры внутри этой сетки, используя номера линий до и после, выше и ниже той области, где мы хотим расположить элемент.

    Пример сетки в Chrome

    Поддержка браузерами последней спецификации сеток ограничена Chrome с отметкой «экспериментальная возможность». Существует приличная реализация начальной версии спецификации в Internet Explorer 10 и выше.

    Узнать больше о сетках вы можете на моём сайте Grid by Example, где можно увидеть несколько примеров сеток, которые работают в Chrome с включёнными экспериментальными возможностями. Я также делал доклад на CSS Conf EU по сеткам и вы можете посмотреть это видео на YouTube.

    У вас есть любимая новая спецификация, не рассмотренная здесь?

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

    12 классных функций CSS3, которые вы наконец-то можете использовать

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

    1. Закругленные углы
    Замечательный эффект закругленных углов для объекта. Причем скруглять углы можно выборочно и с разной степенью округлости.

    2. Тень у текста
    Очень любимый мной эффект. Используя тень для текста можно легко задать объем или с помощью белой тени создать иллюзию тиснения.

    3. Выпадающее меню
    С помощью CSS3 можно создать современное, многоуровневое выпадающее меню с различными эффектами.

    4. Диалоговое окошко
    А так выглядит диалоговый модуль на основе CSS3 с произвольным текстом сообщения, появляющийся поверх основного контента.

    5. Разговорные блоки
    Можно оригинально оформить текст с помощью разнообразных разговорных блоков, которые, опять таки, сделаны на основе CSS3 технологий.

    6. Навигация на вкладках
    Нажимая на пункт меню, образуется вкладка с текстом, объединенная с самим пунктом меню. Есть множество вариантов оформления.

    7. Кнопки
    Наконец-то можно отказаться от графических кнопок и сделать разнообразные симпатичные кнопки с помощью CSS3.

    8. Галерея картинок
    Можно создать оригинальную галерею картинок с необычными эффектами при наведении курсора.

    9. Загнутые края ленты
    Замечательный эффект, создающий иллюзию завернутой за края ленты. Всегда смотрится очень симпатично.

    10. ON/OFF переключатель
    С помощью CSS3 можно легко сделать ON/OFF переключатель для панели настроек, а также панель для выбора одного из нескольких вариантов.

    11. Полупрозрачные блоки
    Такие полупрозрачные всплывающие блоки имеют ряд преимуществ. Можно донести вспомогательную информацию не заслоняя контент.

    12. Эффект тиснения
    С помощью такого эффекта тиснения объект выглядит как бы вдавленным в поверхность. Смотрится очень здорово.

    13. Многоколоночный текст
    Теперь стало очень просто форматировать текст в виде колонок текста. Можно задать количество колонок, расстояние между ними.

    14. Вертикальная выпадающая панель
    С края монитора можно поместить полезную информацию, которая будет появляться в виде выпадающей панели.

    15. 3D эффект для картинки
    Потрясающий эффект, в котором из картинки можно создать трехмерное изображение, реагирующее на движение мышки.

    16. 3D Куб
    Еще один вариант использования трехмерного эффекта. Информацию можно представить в виде куба c тремя гранями.


    17. Вертикальный аккордеон
    Так называют вертикальное выпадающее меню с динамическим эффектом, когда используемый пункт раскрывается.

    18. Несколько бэкграундов
    Передовые технологии CSS3 позволяют использовать несколько фоновых изображений в одном контейнере.

    19. Аналоговые часы
    Эту красоту тоже можно сделать с помощью CSS3. В результате получатся настоящие аналоговые часы, показывающие реальное время.

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

    Что такое CSS3?

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

    Спецификация CSS3 не является частью спецификации HTML5. Эти два стандарта были разработаны отдельно друг от друга, разными людьми, работающими в разное время в различных местах. Но даже организация W3C призывает веб-разработчиков использовать HTML5 и CSS3 вместе, как часть одной новой волны современного веб-дизайна.

    Внедрять CSS3 в веб-сайт можно, по большому счету, используя три стратегии:

    Стратегия 1: используйте то, что можно

    Логично использовать возможности с высоким уровнем поддержки на всех основных браузерах. В качестве примера одной из таких возможностей можно назвать применение веб-шрифтов. Используя шрифты правильного формата, эту функциональность можно заставить работать на таких старых браузерах, как Internet Explorer 6. К сожалению, очень немногие возможности CSS3 входят в эту категорию. Почти все иные возможности не будут работать на все еще популярных браузерах IE 7 и IE 8.

    Стратегия 2: рассматривайте возможности CSS3 как усовершенствования

    У фанатов CSS3 есть боевой клич: «Веб-сайты не должны выглядеть абсолютно одинаково на всех браузерах».

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

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

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

    По этой причине следует подходить к применению некоторых усовершенствований CSS3 с определенной долей осторожности. Ограничьтесь использованием возможностей, которые уже поддерживаются несколькими браузерами (и поддержка которых, по крайней мере, уже реализована в IE 10). И никогда не применяйте эти возможности так, чтобы производимое вашим сайтом впечатление резко менялось при его просмотре в старых браузерах.

    Что касается поддержки CSS3, Internet Explorer большой слабак в этой области. Существует воинствующее меньшинство веб-дизайнеров, которые считают, что веб-дизайнеры должны игнорировать этот браузер и применять возможности CSS3 как только они начинают поддерживаться другими браузерами. А как иначе оказывать давление на Microsoft и стимулировать усовершенствование Интернета?

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

    Стратегия 3: добавляйте резервные решения с помощью библиотеки Modernizr

    Использование частично поддерживаемой возможности CSS3 хорошая идея, если веб-сайт будет достойно выглядеть и без нее. Но иногда без этой возможности легко потерять важную часть дизайна своего веб-сайта, или же сайт может выглядеть просто неприглядно. Рассмотрим, например, что случится, если использовать многоцветную рамку, поддерживаемую только в браузере Firefox:

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

    Результаты применения этого правила показаны на рисунке:

    Вверху: браузеры, которые не понимают CSS3, используют первую часть правила для header и окрашивают фон сплошным желтым цветом. Внизу: браузеры, которые понимают CSS3, используют вторую часть правила и заполняют фон радиальным градиентом.

    В некоторых случаях замещение свойств стиля не работает, т.к. устанавливаются комбинированные свойства. Примером комбинированного свойства является многоцветная рамка. Эффект многоцветности устанавливается свойством border-colors, но появляется только если установлена большая толщина рамки посредством свойства border-thickness. В браузерах, которые не поддерживают многоцветные рамки, толстая рамка одного цвета режет глаза независимо от цвета.

    Одним из способов решения подобных проблем будет использование библиотеки JavaScript — Modernizr, которая проверяет поддержку возможностей HTML5 конкретным браузером.

    С помощью этой библиотеки можно определить альтернативные настройки стилей для браузеров, не поддерживающих свойства стилей, которые вы хотите использовать в первую очередь. Допустим, что нам нужно создать две версии рамки для верхнего колонтитула. Мы хотим использовать скругленные углы в браузерах, которые поддерживают эту возможность, и двойную рамку в браузерах, которые эту возможность не поддерживают. Добавив в разметку страницы ссылку на сценарий Modernizr, можно использовать следующую комбинацию правил таблицы стилей:

    Этот набор правил работает следующим образом. В корневой элемент страницы вставляется атрибут :

    Когда загружается Modernizr, этот сценарий выполняет быструю проверку на поддержку данным браузером ряда возможностей HTML5, JavaScript и CSS3. По результатам проверки сценарий вставляет в корневой элемент страницы целую кучу классов, разделенный пробелами:

    Наличие в этом списке класса без префикса no- означает, что данный браузер поддерживает соответствующую возможность. Если же класс указан с префиксом, соответствующая возможность в данном браузере не поддерживается. В данном случае пример запущен на последней версии Chrome, поэтому поддерживаются почти все возможности.

    Эти классы можно вставить в селекторы таблицы стилей, чтобы отфильтровать настройки стилей в зависимости от предоставляемой поддержки. Например, если данный браузер поддерживает свойство border-radius, селектор .borderradius header получит все элементы внутри корневого элемента . В противном случае класс .borderradius будет отсутствовать, селектор ни с чем не совпадает, и правило не применится.

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

    С помощью Modernizr можно также создавать резервные решения на JavaScript. В данном случае нужно просто проверить значение соответствующего свойства объекта Modernizr, как при проверке на поддержку возможностей HTML5. Этот метод можно использовать, чтобы компенсировать отсутствие более продвинутых возможностей CSS3, таких как переходы или анимации. Но для этого требуется так много усилий и настолько разные модели, что для необходимых возможностей веб-сайта обычно лучше всего придерживаться решений только на основе JavaScript.

    Стили, специфичные для конкретных браузеров

    При разработке новых возможностей CSS часто приходится сталкиваться с дилеммой курицы и яйца. Для того чтобы усовершенствовать возможности, разработчикам нужно иметь отзывы и замечания об этих возможностях от разработчиков браузеров и веб-дизайнеров. Но чтобы разработчики браузеров и веб-дизайнеры могли предоставить такие отзывы и замечания, им нужно реализовать эти новые и несовершенные возможности.

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

    Чтобы предотвратить такое развитие событий, разработчики браузеров используют , чтобы изменять названия свойств и функций CSS, пока они еще находятся в процессе разработки. Возьмем, например, новое свойство радиального градиента. Чтобы использовать его в браузере Firefox, нужно установить разработочную версию этого свойства, которое называется -moz-radial-gradient. Префикс разработчика -moz- (сокращение от Mozilla — организации, занимающейся проектом Firefox) обозначает свойство для браузера Firefox.

    Для каждого браузера существует собственный префикс разработчика:

    Префиксы разработчиков браузеров

    Префикс Браузер
    -moz- Firefox
    -webkit- Chrome и Safari (в обоих браузерах используется один и тот же движок визуализации)
    -ms- Internet Explorer
    -o- Opera

    Хотя префиксы разработчиков браузеров невероятно усложняют жизнь веб-разработчиков, для их использования есть хорошее основание. Разные разработчики браузеров добавляют поддержку возможностей в различное время, при этом часто используя разные предварительные версии одной и той же спецификации. Хотя все браузеры будут поддерживать одинаковый синтаксис для конечной версии, синтаксис свойств и функций, специфичных для конкретных разработчиков, часто бывает разным.

    Поэтому, если вы хотите использовать в своем веб-сайте радиальный градиент уже сегодня, для того чтобы он правильно отображался во всех браузерах (включая Internet Explorer 10), вам нужно использовать раздутое правило CSS наподобие следующего:

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

    Зачем использовать CSS3 если есть JavaScript и Flash?

    Появление некоторых новых возможностей CSS3 не касающихся стилизации элементов страницы (такие как анимации и переходы) вызвали кучу вопросов о их необходимости, ведь таких же эффектов можно добиться использованием JavaScript, либо подключаемых модулей Flash или Silverlight. Давайте рассмотрим преимущества и недостатки каждого подхода:

    Добавить комментарий