dr.Brain

doctor Brain

мир глазами веб-разработчика

css

CSS фигуры: яйцо

создаем фигуры с помощью CSS (яйцо)

dr.Brain

время чтения 1 мин.

Photo by American Heritage Сhocolate on Unsplash

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

CSS фигуры: шестиугольник

создаем шестиугольник с помощью CSS

dr.Brain

время чтения 3 мин.

Photo by Matthew T Rader on Unsplash

Мы уже умеем рисовать с помощью CSS базовые фигуры и треугольники. Теперь рассмотрим пару способов создания еще одного не менее интересного геометрического объекта - шестиугольника. Как в первом, так и во втором случае неоценимую помощь в создании равностороннего шестиугольника нам окажут псевдо-классы :before и :after.

CSS фигуры: треугольник

создаем треугольник с помощью CSS

dr.Brain

время чтения 2 мин.

Photo by Matthew Harris on Unsplash

В одной из статей мы уже учились рисовать с помощью CSS базовые фигуры. Настало время освоить создание еще одной часто используемой геометрической формы - треугольника. Среди множества способов создания треугольника наиболее распространенным является хак с границами (border hack).

CSS фигуры: основы

создаем фигуры с помощью CSS (квадрат, прямоугольник, круг, овал)

dr.Brain

время чтения 2 мин.

Photo by Cala on Unsplash

Зная CSS, мы можем создавать фигуры. Отлично зная CSS, мы можем создавть очень крутые и сложные фигуры. Для некоторых из нас рисование с помощью каскадных стилей стало искусством.

Что мы знаем про селектор :has

:has псевдокласс родителя в CSS

dr.Brain

время чтения 3 мин.

Photo by Kyler Nixon on Unsplash

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

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.