Фильтры в CSS решают примерно ту же задачу, что и фильтры в фотошопе или инстаграме (кому что ближе). Обычно, фильтры применяются к изображениям, но они могут быть применены к любому элементу на странице. Существует несколько основных фильтров, но можно применять и собственные SVG-фильтры, если вы достаточно уверенно себя чувствуете, работая с этой технологией...
Тени в CSS подразделяются на два вида: тени текста и тени блоков. Тени текста задаются свойством text-shadow, принимающим четыре параметра: сдвиг тени по оси X, сдвиг тени по оси Y, размытие тени и её цвет. Тени блоков задаются свойством box-shadow, принимающим пять параметров: сдвиг по оси X, сдвиг по оси Y, размытие тени, радиус распространения и её цвет. Рассмотрим пример: Тени текста задаются свойством тенью внутри блока с тенью</div> .shadow { text-shadow: 1px 3px 5px grey; box-shadow:...
Градиенты — это плавные перетекания одних цветов в другие, используемые, в основном, для фона. В CSS градиенты бывают двух типов: линейные и радиальные. Линейные градиенты задаются функцией linear-gradient(), которая принимает в качестве параметров направление градиента (в радианах - deg) и список точек (минимум 2), содержащие цвет и позицию точки (в процентах). .gradient { background: linear-gradient( 90deg, /* задаём направление градиента */ blueviolet 0%, /* задаём цвет и позицию...
К этому моменту вы уже точно познакомились со вставкой изображений в HTML-документ. А что с медиафайлами? Как сервисы позволяют нам слушать музыку и смотреть фильмы прямо на сайте? Раньше для этого было необходимо встраивать в страницу Flash Player от Adobe. На данный момент, все корпорации отказываются от этого способа и слишком поздно его рассматривать. <audio> Благодаря тегу audio, мы можем воспроизводить звуки на странице. Этот тег можно использовать как одиночно, так и совместно с тегом source...
Знаете ли вы, что можно совмещать CSS-variables с HSL и calc? Мы можем создавать темы для сайта, основанные на CSS-переменных. Это будет выглядеть так: все цвета мы задаём на сайте не конкретно, а абстрактно,задавая формулу, по которой в дальнейшем будет вычисляться цвет. Так изменяя всего три CSS-переменные, мы можем полностью перекрасить весь сайт. Цвета можно изменять на основе времени суток на часах пользователя или же в зависимости от его особенностей зрения. Для нас главная возможность — упростить с этим нашу работу...
Практически любой сайт (или веб-приложение) проектируется как для компьютера, так и для мобильного телефона. На сегодняшний день мобильный трафик несколько обходит трафик персональных компьютеров, что означает, что нашей задачей, как разработчиков интерфейсов, является адаптация интерфейса как под экраны компьютеров, так и под экраны телевизоров и мобильных телефонов. CSS содержит специальные правила, которые могут включаться в зависимости от разрешения экрана пользователя. Здесь мы рассмотрим лишь базовые примеры, но настоятельно рекомендую углубиться в эту тему...
