Функция calc() в CSS3

Одной их наиболее ожидаемых функций для верстальщиков в CSS3 является  функция calc(). На данный момент она поддерживается не только Firefox (начиная с 4 версии), но и Internet Explorer 9, и теперь, я думаю, что настало время для краткого обзора о том, как полезна может быть эта функция.

Показан значок Internet Explorer 10, не нажатый (слева) и нажатый (справа)

Показан значок Internet Explorer 10, не нажатый (слева) и нажатый (справа)

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

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

Композиция фонов

CSS3. Работа с множественными фонами

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

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

Могут быть и другие разумные причины :)

4 симпатичных CSS-эффекта для изображений

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

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

Аккордеон при помощи CSS3

Сегодня мы рассмотрим еще один вариант создания аккордеона при помощи CSS3, в этом примере мы немного поэкспериментируем с обобщенным родственным комбинатором (the general sibling selector) и псевдо-классом :checked. Используя скрытые input-ы и теги label, мы создадим аккордеон, который будет скрывать/открывать содержимое при клике на заголовок.

Есть много вариантов создания аккордеона на CSS, большинство из которых реализуется с помощью псевдо-класса :target. Проблема с использованием псевдо-класса :target в том, что мы не можем закрыть содержимое области при повторном клике по заголовку или открыть несколько разделов одновременно. С помощью скрытых чекбоксов, мы можем контролировать открытие и закрытие отдельных областей. Кроме того, мы можем также использовать радио-кнопки, если только один раздел должен быть открыт в одно и тоже время.

Итак, давайте начнем!

Всё о :Before и :After в CSS

Сегодня мы собираемся  рассмотреть псевдо-элементы :before и :after. Вы, наверное, часто видели как их используют в сложных примерах CSS. Итак, сегодня Вы можете также научиться их использовать самостоятельно.

Что такое псевдо-элемент и чем он отличается от псевдо-класса? Почему псевдо-элементы иногда имеют одно двоеточие, а иногда и два? Как :before и :after реализован в CSS? Какие приемы используют разработчики во всем мире для создания удивительных вещей при помощи CSS? Читайте дальше, чтобы узнать это.