7 вещей, которые умеет CSS и о которых вы не знали

7 вещей, которые умеет CSS и о которых вы не знали

От автора: CSS и JavaScript, хотите – верьте, хотите — нет, стали пересекаться друг с другом, по мере того как у CSS появляются новые возможности. Когда я писал статью 5 способов взаимодействия CSS и JavaScript, о которых вы не знали, люди были удивлены тем, как CSS и JavaScript могут пересекаться. Сегодня я выделю семь задач, которые можно выполнить на CSS, без привлечения изображений или JavaScript.

CSS @supports

Любой хороший фронт-энд разработчик тестирует поддержку браузером определенных возможностей до их применения. Тестирование поддержки всегда осуществлялось с помощью JavaScript, и многие использовали Modernizr, впечатляющий набор утилит со множеством функционала для тестирования возможностей браузера. Однако, появился новый API для того, чтобы тестировать возможности браузера с помощью CSS: @supports. Здесь можно увидеть несколько примеров того, как работает @supports:

Новая возможность @supports, которая также имеет аналог на JavaScript, появилась уже давно и мы с нетерпением ждем повода ее использовать!

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

CSS Filters

Напишите сервис для изменения оттенков изображения и вы можете продать его Фейсбуку за миллиард долларов! Конечно же, это упрощение, но написание фильтров для изображения – это не ракетостроение. Я написал крошечное приложение во время первой недели работы в Mozilla (которое победило в конкусре, это к слову), которое использовало математику в JavaScript для того, чтобы создавать фильтры для изображений с помощью canvas, но сегодня мы можем создавать фильтры для изображений только лишь на CSS!

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

Посмотреть демо

Указатели событий и блокировка кликов

Свойство CSS pointer-events предоставляет метод для эффективного отключения элемента, таким образом, что клик по ссылке не вызывает событие JavaScript:

В примере выше, событие клика даже не будет вызвано, благодаря значению CSS pointer-events. Я нахожу это чрезмерно полезным, т.к. вам не нужно везде делать проверки по названию класса или атрибуту для того, чтобы убедиться, что что-то отключено.

Посмотреть демо

Выезд вниз и вверх

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

Мудрое использование свойства max-height позволяет элементу увеличиваться, и уменьшатся при необходимости.

Посмотреть демо

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Счетчики на CSS

У нас часто возникает недопонимание по поводу того, что означает слово «счетчик» в интернете, на счетчики на CSS – это нечто совсем другое. CSS счетчики позволяют разработчикам увеличивать счетчик и показывать его для данного элемента с помощью :before или :after:

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

Посмотреть демо

CSS классы в Юникод

Есть множество документов, посвященных лучшей практике CSS, и все они начинаются с именования CSS классов. То, чего вы никогда не увидите в этих документах – это как использовать символы Юникод для именования классов:

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

Посмотреть демо

Круги на CSS

CSS треугольники – это интересная техника, также как и круги на CSS. Используя border-radius не совсем по назначению, вы можете создавать безупречные круги!

Вы можете добавлять градиенты вашим кругам и даже использовать CSS анимации, чтобы поворачивать их! У CSS вскоре появится более формализованное API для создания Фигур, но вы можете создавать круги уже сейчас!

Посмотреть демо

Вот и все: семь приемов CSS, которые вас удивят. Несколько очень полезных, несколько – для редких случаев.

Автор: David Walsh

Источник: http://davidwalsh.name/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Саша

    Реально круто!!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree