Что такое CSS?

CSS (Cascading Style Sheets, или каскадные таблицы стилей) — язык описания внешнего вида документа, созданного с использованием языков разметки HTML, XML или XHTML. Необходимость в создании CSS появилась в середине 1990-х годов, когда быстро развивающийся язык HTML уже не мог удовлетворять всех требований дизайнеров сайтов для оформления сайтов.

Так в 1996 году консорциумом W3C была издана первая редакция-рекомендация CSS 1.

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

В 1998 году вышла рекомендация CSS 2, которая значительно расширила функционал предшественницы и просуществовала без изменений до 2011 года — до прихода доработанной рекомендации CSS 2.1.

Возможности второй рекомендации были поистине волшебными: блочная верстка, расширенное позиционирование, подключение стилей в зависимости от устройства, на которое выводятся страницы, расширенный механизм селекторов. Ревизия 1 (CSS 2.1) не принесла ничего нового, только исправление ошибок и изменение некоторых частей спецификации.

Ушла эпоха табличной верстки, веб-дизайн стал более гибким и изобретательным, но новые задачи поднимали планку все выше и выше, и для воплощения этих идей веб-разработчикам приходилось усложнять сайт массой надстроек и нетривиальных скриптов, увеличивая срок и сложность разработки. (О перепетиях истории веб-дизана читайте в статье Анатолия Попеля «Веб-дизайн 1990-х»).

Казалось бы, выхода нет, мы попали в вечное рабство. Но спаситель идет — третья версия CSS готова дать вам универсальное оружие!

Третий уровень

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

Что такое вендорные префиксы?

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

На данный момент список вендорных префиксов таков:

  • -o — префикс для браузера Opera
  • -moz — префикс для браузера Mozilla Firefox
  • -webkit — префикс для браузеров на базе движка WebKit (например, Google Chrome или Safari)
  • -ms — префикс для браузера Microsoft Internet Explorer

Что нового третья версия уже привнесла в арсенал современных веб-разработчиков? Держитесь крепче, мы начинаем наш хит-парад нововведений CSS3!

Настоящие скругленные уголки — border-radius

Пожалуй, наиболее часто используемое свойство CSS 3 — создание скругленных уголков. Задача эта давно не давала покоя дизайнерам, и для её выполнения придумывали множество решений.

А сейчас все просто:

    border-radius: 5px; 

Все про border-radius:

Тени для всего — box- и text-shadow

Что лучше придаст объема и выразительности дизайну, чем тени? Только сейчас: просто укажите одну, две, сколько угодно теней всего тремя строчками кода!

    -webkit-box-shadow: 10px 10px 25px 10px #ccc; -moz-box-shadow: 10px 10px 25px 10px #ccc; 

А вдавленный текст, такой же прекрасный, как в некогда трендовом стиле iOS?

Нет ничего проще. Свойство text-shadow позволит добиться такого эффекта легко. А также раскроет простор для полета вашей фантазии!

Про тени:

Прозрачность с Opacity и RGBA

Рост популярности формата изображений PNG с полной прозрачностью задал новый виток к творческому подходу в оформлении сайтов. В СSS 3 мы можем контролировать прозрачность сразу двумя путями: определением непрозрачности элементов opacity и определением цветов в формате RGBA.

    background: rgba(200, 54, 54, 0.5); color: rgba(120, 24, 14, 0.5); 

Первые три числа отвечают за значения трех цветовых каналов: Red, Green и Blue, а последнее — за значение канала прозрачности Alpha.

Если нам необходимо задать прозрачность целому элементу или блоку целиком, то нам на выручку придет свойство opacity. Меняя значение от 0 до 1, мы меняем прозрачность объекта от полностью прозрачного до полностью непрозрачного.

Узнать подробности:

Множественные фоны

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

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

Теперь же задача сводится к простому перечислению фоновых изображений элемента и позиционированию их с помощью свойства background-position!

Каждому устройству свой CSS — media-queries

Суть свойства media-queries — в задании параметров элементам на странице в зависимости от типа устройства, на котором выводится страница, его разрешающей способности, или размера области просмотра.

Параметры media-queries:

  • max-width — параметры задаются, если максимальная ширина области просмотра равна этому параметру
  • min-width — параметры задаются, если минимальная ширина области просмотра равна этому параметру
  • max-device-width — запрос срабатывает, если максимальный размер экрана равен этому параметру
  • min-device-width — запрос срабатывает, если минимальный размер экрана равен этому параметру
  • landscape/portrait — определение режимов поворота экрана (альбомный/книжный)
  • -webkit-min-device-pixel-ratio: 2 — специальный режим определения мобильных устройств с Retina-дисплеем

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

Больше media-queries:

Анимированные Переходы

Одним из наиболее интересных нововведений CSS 3 является свойство transition, представляющее собой аналог Tween-переходов из Flash.

Мы имеем две ключевых точки с отличающимися параметрами, а свойство transition осуществляет плавный переход между ними.

Что это нам дает? Абсолютный пир для глаз!

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

Покадровая анимация

Последним номером у нас пойдет свойство animation, которое подводит нас максимально близко к тому моменту, когда мы забудем о Flash, как о страшном сне, а верстальщики станут еще более крутыми ребятами.

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

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

Все параметры свойства animation

Имя параметра Что делает
animation-name Название анимации @keyframes
animation-duration Время, которое требуется для завершения одного полного цикла анимации.
animation-timing-function Характер изменения скорости проигрывания анимации. Так называемый easing
animation-delay Задержка воспроизведения
animation-iteration-count Количество воспроизведений анимации
animation-direction Направление анимации по четным циклам
animation-play-state Состояние анимации по умолчанию — проигрывается или «на паузе»

Примеры использования анимации:

Человек за бортом!

Что осталось за кадром?

Многоколоночная верстка, которая позволяет автоматически разбивать контент внутри блока на колонки, просто задав их количество и ширину; grid-layout — позиционирование элементов на странице по виртуальной сетке; трансформации, которые позволяют поворачивать, двигать, смещать объект, в том числе, в трехмерном пространстве!

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

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

Ваша очередь становиться волшебником!