Обзор фреймворка Yii

Общее Yii – это объектно-ориентированный фреймворк, написанный на PHP. Если вы не знаете, что такое фреймворк и чем...

Сравнение VPS и облачного хостинга для Bitrix

В современном мире веб-технологий выбор между VPS (виртуальным частным сервером) и облачным хостингом для системы управления контентом, такой...

Как легально увеличить лайки в Ютубе?

Лайки в Youtube и легальные способы их увеличить. Чего не стоит делать при накрутке реакций, и как сделать...

Лендинг на WordPress за три шага

Зайдите в панель управления, оплатите хостинг. 2 шаг Установите WordPress в разделе «Каталог CMS». 3 шаг Установите тему...

Обзор лучших WYSIWYG-редакторов

Разработка #Обзор #Контент #JavaScript #OpenSource Рассматриваем лучшие текстовые WYSIWYG-редакторы, которые можно встроить на сайты и в веб-приложения. Полнофункциональные, быстрые...

Чем занимается Data Scientist

Разработка #Аналитика #Боты #Программы #Технологии #Базы данных С развитием IT-индустрии появились новые профессии и значительно преобразовались традиционные. Например,...

Как создать сайт на WordPress с нуля

Разработка #Настройка #WordPress #Базы данных #Оптимизация Поговорим о том, как создать сайт на базе WordPress и Timeweb. Сайт,...

11 лучших приложений для изучения программирования

Разработка #C/C#/C++ #Программы #Сервисы #Подборка #JavaScript Рассказываем о лучших приложениях для смартфонов, которые помогут обучиться программированию и веб-разработке. ...

Обзор языка PHP: прошлое, настоящее, перспективы

Последовательность появления новых версий: PHP/FI – к середине 1995 года основной модуль был переписан на C. Появились первые...

Что такое виджет и как им пользоваться

Разработка #Веб-дизайн #JavaScript #Оптимизация #Windows Разработчики софта и владельцы сайтов стараются упростить процесс взаимодействия со своим продуктом. Одним из...

Что такое JavaScript: назначение, особенности и сферы применения языка

Разработка #Браузеры #Разбор #JavaScript #HTML/CSS Интерактивные элементы сайтов и мобильных приложений часто выполняются на языке JavaScript. Он хорошо...

Работа со строками в JavaScript

Разработка #Настройка #JavaScript Строка в JavaScript – это неизменяемая, упорядоченная последовательность 16-битных значений, каждое из которых представляет собой...

Авторизация и аутентификация пользователя при помощи JWT. Часть 1: Что такое JWT и как его создать?

Разработка #Хостинг #Серверы #JavaScript #OpenSource #Безопасность Реклама. ООО «ТаймВэб». erid: LjN8KaXqo Что такое JWT? JWT или JSON Web...

Плюсы и минусы покупки готовых шаблонов сайтов

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

Система управления контентом PHPShop.CMS

PHPShop.CMS – продукт российской компании PHPShop Software. Точнее, это общее название для нескольких продуктов-лицензий (как у 1C-Bitrix), а...

Как стать full-stack разработчиком

Разработка #Карьера #Веб-дизайн #JavaScript #HTML/CSS Традиционно разработчики делятся на frontend и backend разработчиков; это обусловлено разделением ответственности между...

Создаем калькулятор-конвертер на базе React. Часть 9: Подключаем Redux и Router

Разработка #Фреймворки #JavaScript Поговорим о важных и популярных сторонних библиотеках для React: Redux и Router. Зачем они нужны и...

Платформы для интернет-магазина: какую выбрать?

Разработка #Обзор #Интернет-магазин #Bitrix #OpenCart Введение По статистике за 2016 год 30,5 млн жителей России совершают покупки в...

«Чистая» ОС, или Неведома зверушка. Ставим ClearOS

Разработка #FTP #Ubuntu #VPN #Firewall #Apache #Routing #Базы данных #Панель управления Как-то раз нужно было быстро запустить веб-сервер с...

Лучшие хостинги серверов Minecraft

Мнение рынка #Хостинг #Игры #Подборка Реклама. ООО «ТаймВэб». erid: LjN8KWY7s Всегда хотели запустить собственный сервер игры, но не...

5 интересных трюков CSS

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

Все возможные варианты наложения на примере смотрите тут.

Для того, чтобы задать режим наложения, нужно использовать mix-blend-mode:

mix-blend-mode: overlay

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

Что делать, если с каким-то элементом режим наложения не нужен? Изолировать его:

div {

isolation: isolate;

}

Теперь к содержащему div изображению не будет применяться режим наложения.

Как на практике применять подобный эффект? Допустим, вам нужно подогнать все изображения под определенную тему. Вместо того, чтобы открывать графический редактор, вы можете просто добавить нужный режим наложения – и вуаля, нужный эффект достигнут:

2 Маскирование

Маскирование (masking) – это одна из популярных операций (наряду с отсечением), которая используется для скрытия части элемента. Части под маской будут частично или полностью непрозрачны. При помощи масок на странице можно создать изображение интересной, креативной формы.

Существует три способа сделать маскирование: использовать изображение с прозрачными частями (например, png), использовать CSS градиент либо SVG-элементы.

img {

  mask-image: url(mask.svg);

}

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

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

То на странице при прокручивании вниз можно сделать так, чтобы буквы постепенно бледнели и заходили за скалы:

3 Отсечение

Отсечение (clipping) уже упоминалось выше – еще один способ поменять форму изображения. Принцип работы – все, что входит в выбранную область, будет отображено; все, что остается за краями, отображаться не будет.

Отсечение, в отличие от маскирования, дает возможность использовать некую базовую векторную фигуру, по которой и будет определяться, что войдет в зону отображения, а что нет:

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

img {

  position: absolute;

  clip: rect(10px, 290px, 190px, 10px);

}

Тем не менее свойство clip уже устарело – сейчас используется свойство clip-path.

Clip-path можно использовать либо на CSS (здесь доступны разные фигуры: polygon, circle, ellipse и так далее); либо на SVG (здесь для обертывания элемента будет использоваться элемент clipPath).

CSS

img {

  clip-path: url(#clipping);

}

SVG

<svg>

  <defs>

<clipPath id="clipping">

   <circle cx="284" cy="213" r="213" />

</clipPath>

  </defs>

</svg>

4 Формы CSS

Здесь речь пойдет о shape-outside и shape-inside.

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

div {

  shape-outside: ellipse(100px 200px at 50% 50%);

  clip-path: ellipse(100px 200px at 50% 50%);

  width: 300px;

  height: 500px;

  float: left;

  opacity: .2;

  background-color: purple;

}

А выглядеть это может вот так:

На странице shape-outside можно использовать, чтобы сделать вот такую красоту:

Shape-inside, наоборот, создает форму, внутри которой будет происходить обтекание.

.container{

  shape-inside: circle(400px, 60px, 160px);

}

В целом использовать формы удобно и полезно – они могут внести значительное разнообразие в дизайн сайта. Можно сделать вот такие интересные изображения:

5 Анимация с использованием SVG

SVG  формат, который уже активно используется в вебе. Он векторный (SVG – Scalable Vector Graphics – масштабируемая векторная графика), а значит, изображение будет нормально отображаться на экране с любым разрешением.

Но использование в качестве отдельной картинки – это не единственное, что для чего вы можете использовать SVG. Этот формат отлично подойдет для анимации с помощью CSS.

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

У SVG, помимо прочих преимуществ, есть еще важное отличие от растровых изображений: текст, вставленный в SVG, хранится в теге <text>, то есть его можно найти, с ним можно взаимодействовать прямо в коде.

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

Самое удивительное при работе с SVG: вы можете взять любую часть и анимировать ее при помощи CSS. А значит, можно делать интересные динамические эффекты даже без использования JS. SVG имеет собственное DOM API, и если вы хотите углубиться в изучение этой темы, обязательно остановите свое внимание на DOM API.

А для начала я советую изучить вот эту статью.

Примеры красочных анимированных рисунков смотрите здесь и здесь.

Заключение

В этой статье перечислены 5 интересных возможностей CSS – но, конечно, их гораздо больше, многое осталось за пределами этой статьи. А чем вы пользуетесь в разработке? Что используете, чтобы сделать сайт интереснее?

Межтекстовые Отзывы
Посмотреть все комментарии
guest