Геометрические фигуры на css. Создание идеальных адаптивных фигур с помощью единицы измерения CSS vw

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

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

Например, обратите внимание как текст обтекает круглые картинки в следующем дизайне. Без Фигур, текст имел бы прямоугольную форму – выбрасывая утонченный прием, который поднимает дизайн на следующий уровень.

Обратите внимание как текст принимает округлую форму по краям тарелки в этом примере. Используя Фигуры СSS, мы можем создать похожий дизайн и для веб-страницы .

Давайте подробно разберем как работают Фигуры и как вы можете начать их использовать.

Поддержка браузеров

CSS Фигуры пока что поддерживаются только в Webkit Nightly и Chrome Canary, но их Модуль 1 Уровня достиг статуса кандидатской рекомендации, таким образом, свойства и синтаксис, определенные в спецификации являются достаточно стабильными. Пройдет немного времени до того, как и остальные браузеры начнут их поддерживать. Этот уровень концентрируется на тех свойствах Фигур, которые меняют поток контента вокруг фигуры. В частности, он концентрируется на свойстве shape-outside и связанных с ним.

В сочетании с другими последними возможностями, такими как Обрезка и Наложение маски , CSS фильтры и Коллажирование и Слияние , CSS Фигуры позволят нам создавать более сложный изысканный дизайн без необходимости прибегать к графическим редакторам, таким как Photoshop и InDesign.

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

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

Чтобы сегодня использовать CSS Фигуры в Chrome Canary, вам необходимо включить флажок, делающий доступными экспериментальные возможности.

Создание CSS Фигуры

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

Фигуры могут быть созданы с помощью одной из следующих функций:

Каждая фигура определяется набором точек. Некоторые функции принимают точки в качестве параметров; другие – принимают параметры смещения, но все они в конечном итоге отрисовывают фигуры на элементе как набор точек. Мы разберем параметры для каждой из этих функций на примерах.

Фигура также может быть определена из изображения с помощью извлечения альфа канала. Когда изображение передается свойству shape, браузер извлекает фигуру из изображения на основании значения shape-image-threshold. Фигура определяется пикселями, альфа значение которых выше заданного порога. Изображение должно иметь CORS совместимость . Если предоставленное по какой-то причине недоступно (например, оно не существует), тогда никакая фигура применена не будет.

Следующие фигуры принимают вышеописанные функции в качестве значений:

shape-outside: заставляет контент огибать фигуру (снаружи)

shape-inside: контент принимает форму фигуры изнутри

Вы можете использовать свойство shape-outside в сочетании с shape-margin для того, чтобы добавить внешний отступ вокруг фигуры, который отодвинет контент от фигуры, оставляя пространство между ними. Также как и shape-outside получает свойство shape-margin, shape-inside получает свойство shape-padding, что добавляет внутренний отступ.

Используя свойства фигуры или функции, объявляя элемент фигуры, можно обойтись всего одной строчкой CSS кода:

Element { shape-outside: circle(); /* контент будет обтекать круг, заданный элементу */ }

Element { shape-outside: url(path/to/image-with-shape.png); }

Element { shape - outside : url (path / to / image - with - shape . png ) ; }

Но… Если вы применяете эту строчку CSS кода к элементу, фигура не будет применена к нему, если не будут соблюдены следующие условия:

Элемент должен быть плавающим. Будущие уровни CSS Фигур позволят нам определять фигуры для не плавающих элементов, но пока нет такой возможности.

Элементу должны быть заданы размеры. Высота и ширина, заданные элементу будут использованы для установления системы координат.

Как вы видели в функциях выше, фигуры определяются набором точек. Потому что точки имеют координаты, браузеру необходима система координат для того, чтобы знать где именно должна размещаться каждая точка на элементе. Таким образом, пример выше работал бы, если б имел следующее:

Element { float: left; height: 10em; width: 15em; shape-outside: circle(); }

Element { float : left ; height : 10em ; width : 15em ; shape - outside : circle () ; }

Однако, задание определенных размеров элементу не влияет на его отзывчивость (мы поговорим об этом позднее). Так как каждая фигура определяется как набор точек, расположенных с использованием пары координат, изменение координат точки напрямую повлияет на созданную фигуру. Например, следующий рисунок показывает шестиугольник, который может быть создан с помощью функции polygon(). Фигура состоит их шести точек. Изменение горизонтальной координаты оранжевой точки изменит окончательную фигуру, а также повлияет на размещение контента внутри/снаружи любого элемента, к которому применяется фигура.

Если элемент плавает и выравнен по правому краю, а также к нему применена фигура, контент слева от него изменит свое расположение, когда будет изменена одна из координат оранжевой точки внутри функции polygon() .

Справочный блок Фигуры

CSS Фигуры определяются и создаются внутри справочного блока (reference box), где и происходит отрисовка фигуры. В добавок к высоте и ширине элемента, составные части блочной модели элемента — margin box, content box, padding box и border box – также являются справочниками для определения фигуры элемента.

По умолчанию, блок внешнего отступа (margin box) используется как справочный, таким образом, если элемент, к которому вы применяете фигуру уже имеет внешний отступ снизу, то фигура будет заканчиваться у края внешнего отступа, а не у границы. Если вы хотите использовать какие-то другие значения блочной модели, вы можете указать их вместе с функцией фигуры, которую вы передаете свойству фигуры:

shape-outside: circle(250px at 50% 50%) padding-box;

shape - outside : circle (250px at 50 % 50 % ) padding - box ;

Ключевое слово padding-box в этом правиле определяет применение фигуры и ограничение в виде padding box (площадь внутреннего отступа). Функция circle() определяет круг, его размеры и размещение относительно элемента.

Определение Фигур с помощью функций

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

Используя CSS Фигуры, текст вокруг изображения пользователя обтекает по форму, вместо того, чтоб сохранять прямоугольную форму .

Мы будем использовать функцию circle() для того, чтобы применить круглую форму к изображению профиля, используя следующую разметку:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?

Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.

< img src = "//api.randomuser.me/0.3.2/portraits/men/7.jpg" alt = "profile image" / > < p > Lorem ipsum dolor sit amet , consectetur adipisicing elit . Harum itaque nam blanditiis eveniet enim eligendi quae adipisci ? < / p > < p > Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error ! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi . < / p >

Вы можете спросить: «Почему мы не можем применить border-radius для округления картинки?» Ответ: свойство border-radius никак не влияет на расположение контента внутри и снаружи элемента, к которому оно применено. Оно влияет только на границы элемента или фон. Фон обрезается по скругленным углам, на этом все. Контент внутри элемента останется прямоугольным, и контент снаружи элемента будет вести себя также, будто элемент остается прямоугольным.

Мы собираемся использовать свойство border-radius для того, чтобы сделать изображение круглым – вот то, что мы делаем для того, чтобы округлить картинки или другие элементы на странице:

img { float : left ; width : 150px ; height : 150px ; border - radius : 50 % ; margin - right : 15px ; }

Без CSS Фигур текст видит картинку как квадратную и обтекает квадратную фигуру, а не круглую .

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

img { float: left; width: 150px; height: 150px; border-radius: 50%; shape-outside: circle(); shape-margin: 15px; }

img { float : left ; width : 150px ; height : 150px ; border - radius : 50 % ; shape - outside : circle () ; shape - margin : 15px ; }

При помощи этого кода, текст сможет «увидеть» круглую фигуру, примененную к изображению, и будет обтекать его, как показано на первом скрин-шоте. (Вы можете посмотреть на результат .) В браузерах, не поддерживающих фигуры, это будет выглядеть так, как показано на втором изображении.

Вы можете использовать функцию circle() в чистом виде или передавать ей параметры. Вот ее официальный синтаксис:

circle() = circle([]? ? [ at < position > ] ? )

Вопросительные знаки показывают, что эти параметры опциональны и могут быть пропущены. Те параметры, которые вы пропускаете, будут принимать значения по умолчанию. Когда вы используете circle() как есть, вместо прямого указания положения, по умолчанию, центр круга будет находиться в центре элемента, к которому вы его применяете.

Вы можете задать радиус круга, используя любые единицы длины (px, em, pt, и т.д.) Также вы можете задать радиус с помощью параметров, используя closest-side или furthest-side, но closest-side – значение по умолчаниюe, что означает, что браузер будет принимать за радиус расстояние от центра элемента до ближайшей стороны, farthest-side использует расстояние от центра до дальней стороны.

shape-outside: circle(farthest-side at 25% 25%); /* определяет круг, чей радиус равняется половине наиболее длинной стороны, расположенный в точке с координатами 25% 25% в системе координат элемента */ shape-inside: circle(250px at 500px 300px); /* определяет круг, чей центр расположен в 500px горизонтально и 300px вертикально,с радиусом в 250px */

Функция ellipse() работает также как и circle(), с тем же набором значений, за исключением того, что вместо параметра радиуса, она принимает два: один радиус по оси-х, другой – по оси-у.

ellipse() = ellipse([{2}]? ? [ at < position > ] ? )

Функция inset() не имеет прямого отношения к кругу или эллипсу, она используется для создания прямоугольных форм внутри элемента. Так как элементы и так являются прямоугольными, нам она не нужна для создания прямоугольников. Вместо этого, inset() может помочь нам создавать прямоугольники со скругленными углами, так чтобы контент обтекал скругленные углы.

Функция inset() принимает от одного до четырех параметра смещения, которые определяют смещение относительно краев справочного блока, что определяет местонахождение прямоугольгика внутри элемента. Скругленные углы обозначаются точно таким же способом, как и border-radius, используя одно из четырех значений, в сочетании с ключевым словом round.

inset() = inset(offset{1,4} ?)

inset () = inset (offset { 1 , 4 } [ round < border - radius > ] ? )

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

Element { float: left; width: 250px; height: 150px; shape-outside: inset(0px round 100px) border-box; }

Element { float : left ; width : 250px ; height : 150px ; shape - outside : inset (0px round 100px ) border - box ; }

Последняя функция Фигур – это polygon(), которая определяет более сложные неоднозначные фигуры, используя любое количество точек. Функция принимает набор пар координат, где каждая пара определяет положение точки.

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

CSS код для изображения выше выглядит следующим образом:

img.right { float: right; height: 100vh; width: calc(100vh + 100vh/4); shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); }

img . right { float : right ; height : 100vh ; width : calc (100vh + 100vh / 4 ) ; shape - outside : polygon (40 % 0 , 100 % 0 , 100 % 100 % , 40 % 100 % , 45 % 60 % , 45 % 40 % ) ; }

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

Чтобы визуально представить созданный многоугольник, нам нужно «обрезать» части изображения за пределами фигуры. В этом нам поможет свойство clip-path из спецификации CSS Masking Module .

Свойство clip-path принимает те же функции фигуры и значения, что и свойство фигуры. Если мы передадим ту же многоугольную фигуру, которую мы использовали для свойства shape-outside, свойству clip-path, то оно обрежет часть изображения, находящуюся за пределами фигуры.

img.right { float: right; height: 100vh; width: calc(100vh + 100vh/4); shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); /* обрезка картинки по контуру фигуры */ clip-path: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); }

img . right { float : right ; height : 100vh ; width : calc (100vh + 100vh / 4 ) ; shape - outside : polygon (40 % 0 , 100 % 0 , 100 % 100 % , 40 % 100 % , 45 % 60 % , 45 % 40 % ) ; /* обрезка картинки по контуру фигуры */ clip - path : polygon (40 % 0 , 100 % 0 , 100 % 100 % , 40 % 100 % , 45 % 60 % , 45 % 40 % ) ; }

Результат выглядит так:

Свойство clip-path пока поддерживается вместе с префиксами, т.е. оно будет работать в Хроме с добавлением префикса –webkit-. Вы можете посмотреть на демо .

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

Функция polygon() также принимает опциональное ключевое слово для заполнения, которое может быть либо nonzero либо evenodd. Оно определяет то, как будут вести себя пересекающиеся области внутри многоугольника. Ознакомьтесь со свойством SVG fill-rule для получения подробностей.

Определение фигуры с помощью изображения

Чтобы задать фигуру с помощью изображения, в изображении должен присутствовать альфа канал, из которого браузер извлечет изображение.

Фигура определяется пикселями, чье альфа значение выше определенного порога. Значение порога по умолчанию составляет о.о (полностью прозрачный), или вы можете задать его прямо с помощью свойства shape-image-threshold. Таким образом, любой непрозрачный пиксель может быть использован как часть фигуры, определяемой изображением.

Будущий уровень CSS Фигур может позволять переключаться на использования данных яркости изображения вместо альфа канала. Если это произойдет, shape-image-threshold будет расширен, чтобы включать порог или для яркости или для альфа канала, в зависимости от состояния переключателя.

Мы используем следующее изображение, чтобы определить фигуру элемента и заставить текст обтекать его:

) ; shape - margin : 15px ; shape - image - threshold : 0.5 ; background : #009966 url(path/to/background-image.jpg); mask-image: url(leaf.png); }

Конечно же, если вы применили фон к элементу, фон будет необходимо обрезать за пределами заданной фигуры. Свойство mask-image (с соответствующими префиксами) из Модуля Масок, может помочь в этом, так как свойство clip-path не принимает значение альфа канала в качестве значения. Результат выглядит вот так:

Если вы создаете сложные фигуры, вам возможно будет удобно задавать фигуру с помощью картинки. Это позволит использовать альфа канал изображения в Photoshop, вместо того,чтобы задавать точки вручную.

Вам также будет удобно использовать изображение вместо функции фигуры, когда у вас много плавающих элементов или обасти исключения внутри элемента – потому что на данный момент нет возможности объявить несколько фигур одному элементу. Но если изображение содержит несколько областей, браузер извлечет эти области и использует их.

CSS Фигуры в отзывчивом дизайне

Могут ли CSS Фигуры подойти для отзывчивого дизайна? Текущая спецификация для shape-outside включает этот момент, потому что она позволяет задавать размеры элементу либо в процентах, либо в единицах длины, и точки определяющие фигуру (параметры функции фигуры) также могут быть заданы в процентах. Это означает, что элемент с заданным shape-outside может быть полностью отзывчивым, также как и любой плавающий элемент с размерами, заданными в процентах.

Свойство shape-inside пока что не отзывчивое, но это потому что, оно было сдвинуто в Модуль 2 Уровня. Многие из его текущих ограничений уйдут на следующем уровне.

Инструменты для создания Фигур

Создание сложных фигур с использованием функций может оказаться трудоемкой задачей, особенно если вы создаете фигуру с множеством точек и координат, используя polygon(). К счастью, команда веб-платформы Адобе работает над производством интерактивных инструментов, чтобы сделать этот процесс гораздо легче. Bear Travis создал коллекцию Инструментов для создания Фигур , которая позволяет нам визуально создавать многоугольные фигуры. Инструмент генерирует функцию фигуры. Это может быть полезным, но имеет свои ограничения, если вы ходите создать фигуру на основе определенного изображения, потому что инструмент такой возможности не предоставляет.

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

Редактирование многоугольной фигуры прямо в браузере, используя режим превью в Brackets. Запись экрана сделана Razvan Caliman .

Этот инструмент станет незаменимым, так как он облегчает созлание, редактирование и дебаггинг фигур. Razvan Caliman , которая объясняет как вызвать редактор Фигур в Brackets и начать его использовать.

Будущее: CSS Исключения

Спецификация CSS Фигур была спецификацией, посвященной CSS Фигурам и Исключениям, но она была разделена. В то время как CSS Фигура определяет свойства shape-inside и shape-outside, CSS Исключения определяют свойства, которые заставляют контент обтекать не плавающие элементы, например, имеющие абсолютное позиционирование. Они делают возможным обтекание контентом целой фигуры с разных сторон, как показано на изображении ниже.

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

Новый Уровень Фигур

Текущая спецификация CSS Фигур – это всего лишь первый шаг. Вскоре, новые возможности дадут нам больше контроля надо созданием и обтекающим контентом, таким образом, нам будет проще превращать макеты в живой дизайн с помощью всего нескольких строчек кода. На сегодняшний день редакторы спецификаций сосредоточены на завершении shape-outside, и возможно вы увидите поддержку CSS Фигур большим количеством браузеров к концу 2014 года.

Вы можете использовать Фигуры уже сегодня как часть стратегии progressive enhancement, зная, что у них есть приемлемая замена в не поддерживающих браузерах. Я недавно начала применять их на своем сайте и замена выглядит вполне приемлемой. Для более сложного дизайна, вы можете использовать скрипт для проверки поддержки браузером, и предоставлять любую замену, если нет поддержки. Вы также можете использовать тесты Modernizr с помощью этого скрипта , чтобы проверить поддерживается ли свойство shape-outside, или загрузить собственную сборку, включающую этот тест.

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

Фронтенд-разработчик и векторный иллюстратор

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

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

Дело в том, что оба навыка, по сути, заключаются в соединении различных компонентов для создания конечного продукта. Иллюстраторы соединяют воедино различные фигуры и работают с формами для того, чтобы в итоге получить рисунок. Фронтенд-разработчики, в свою очередь, соединяют воедино компоненты кода для создания веб-страницы.

Изучение основ векторной графики знакомит вас с макетами, цветовыми паттернами, динамикой форм и в целом с творчеством, которое присутствует в работе фронтенд-разработчика.

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

Создание изображения на чистом CSS подразумевает, что вместо программного обеспечения для создания векторных иллюстраций (такого, как Inkscape, Illustrator, Affinity Designer или Sketch) вы напрямую работаете с CSS-кодом.

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

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

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

Компоненты изображений на чистом CSS

Для начала разберёмся, что такое «чистый CSS».

Создание изображений на «чистом CSS» подразумевает добавление CSS-стилей нескольким HTML-тегам div .

К примеру, мы можем создать квадрат всего лишь одним div и применённым к нему стилем:

Body{ background: #1D1F20; } .square{ width: 100px; height: 100px; background: #A58CB6; }

Мы будем создавать фигуры, стилизуя блоки, чтобы сформировать из них финальную картинку.

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

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

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

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

Структура фигур

Во-первых, всё изображение коалы было построено поверх невидимого квадратного холста (это не официальный термин). Это невидимое поле будет располагаться в центре body , а голова - в центре поля. Лично мне кажется, что это хорошая практика, которая упрощает отзывчивый дизайн (подробнее об этом в конце статьи).

А пока просто имейте в виду, что нам предстоит иметь дело с невидимым прямоугольным полем, которое я выделил ниже:

Во-вторых, у нас есть круг в центре веб-страницы, на основе которого мы будем создавать голову .

Далее мы создадим уши , которые располагаются по бокам головы. Каждое ухо состоит из двух разноцветных кругов , которые накладываются друг на друга, один круг немного меньше другого. Мы будем проводить различие между div уха и div «внутреннего уха».

Кроме того, у нас есть два глаза , которые также являются кругами, наложенными один поверх другого. Они отличаются цветом и размером: больший круг - белый, а круг поменьше (зрачок) - черный.

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

Еще одна важная вещь, о которой стоит упомянуть - это то, что для создания изображения мы также будем использовать разные слои. Уши будут позади головы, нос - перед глазами и т.д. Это станет понятнее, когда мы перейдем к работе с CSS.

HTML

Примечание чтобы добавить нашей коале волосы, мы будем использовать метод clip-path . Он поддерживается в Chrome, Safari и Opera. Если вы пользуетесь Firefox, советую сменить его на другой браузер на время изучения этого руководства.

Как правило, я добавляю один div , который будет фигурой, затем я стилизую её, а после приступаю к следующему div .

Однако, поскольку это инструкция, давайте сначала взглянем на HTML-код и разберем его:

Важно заметить, что некоторые div вложены в другие. Давайте посмотрим на div правого уха нашей коалы:

«Ear-right» (правое ухо) является родительским div , а «inner-ear» (внутреннее ухо) - дочерним.

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

Например, представим, что у нас есть div , вложенный в body с height: 100% и width: 100% :

Классу some-div назначается фиксированная позиция, которая на 10% ниже верхней части родительского блока. Так как some-div встроен в body , который имеет 100% ширины и 100% высоты, div будет расположен на 10% ниже верхней части этого блока.

Теперь вложим другой div в some-div и зададим ему такой же стиль:

Как вы можете видеть, мы получим совершенно другое расположение.

В этом примере another-div (синий квадрат) на 10% ниже, чем some-div (красный квадрат).

Теперь переместим another-div из some-div в body и увеличим отступ до 30%:

another-div теперь отступает на 30% от верха body , а не some-div .

Имея это в виду, перейдем к стилям CSS.

CSS стили

body

Для начала зададим body фоновый цвет. Пусть это будет оттенок синего, как у Твиттера:

Body{ background: #25A9FC; }

box

Теперь добавим стили невидимому блоку. Он будет отцентрирован по горизонтали (чтобы следить за изменением положения поля, добавьте ему фон или рамку):

Box{ position: relative; margin: auto; display: block; // опциональные фон и рамка background: white; border: solid 4px red; // пишите код здесь }

position: relative означает, что элемент позиционируется относительно своего нормального положения, которое находится в верхнем левом углу, так как это первый div в body .

Когда свойство position установлено в relative , используйте display: block; и margin: auto; , чтобы автоматически отцентрировать поле по горизонтали.

Затем мы можем добавить следующую часть кода, чтобы поместить поле на 8% ниже, а также установить height и width с размерами, как на изображении выше, и, наконец, присвоить необходимое значение фона:

Box{ position: relative; margin: auto; display: block; margin-top: 8%; width: 600px; height: 420px; background: none; }

Отметим, что мы используем свойство margin-top: 8% , чтобы опустить поле на 8%. Поскольку мы специально настраиваем top , это не отразится на наших предыдущих отступах, заданных через margin:auto .

Теперь, когда поле настроено, все наши остальные div будут вложены в него. Опять же, это важно, потому что когда мы будем назначать абсолютные положения в процентах, это расположит div на столько же процентов от поля, но не от body . Этот же принцип будет работать и с нашими высотой и шириной.

Голова

Посмотрим на код для создания головы, а затем разберем его шаг за шагом:

Head{ position: absolute; top: 16.5%; left: 25%; width: 50%; height: 67%; background: #A6BECF; border-radius: 50%; }

Процентные показатели для top и left означают, что div будет в 15% от верхнего края поля и в 25% - от левого. Ширина div - 50% от ширины поля, а высота - 67% от высоты поля. После этого мы устанавливаем светло-серый цвет фона.

Далее мы используем border-radius: 50% . Если вы пропустите это свойство, голова всегда будет в форме прямоугольника (или квадрата). border-radius является тем свойством, которое меняет фигуру. Если вы знакомы с Illustrator, то можете сравнить добавление свойства border-radius с тем, как в нём нужно потянуть за края квадрата, чтобы закруглить его. Чтобы округлить форму до круга, мы всегда используем показатель, равный 50%.

border-radius можно использовать не только для создания круга, но и для того, чтобы закруглить любую фигуру, например, прямоугольник для носа нашей коалы.

Прежде чем мы пойдем дальше, я объясню, откуда я взял процентные показатели верхней и левой границ, ширины и высоты. Мы задали полю ширину в 600 пикселей, так что 50% дают нам 300 пикселей. Учитывая, что поле было высотой всего в 400 пикселей, процентный показатель для головы должен быть выше.

Скорее всего вы ждете, что я дам вам точную формулу для вычисления высоты. Честно говоря, обычно я нахожу нужное значение методом тыка.

Чем больше изображений вы создадите на чистом CSS, тем быстрее вы будете находить оптимальные значения. Но о чем вам действительно нужно подумать сейчас, так это о высоте и ширине родительского div и о том, какой размер необходим дочернему div по отношению к его предку.

Теперь, имея проценты позиций, вычислить абсолютный центр гораздо проще. Вот формула:

Left = (100 - width) / 2 top = (100 - height) / 2 // наш случай (100 - 67)/2 = top: 16.5%; (100-50)/2 = left: 25%;

Теперь этот фрагмент кода работает для div нашей головы, потому что мы хотим разместить её по центру. Однако мы, к примеру, не хотим помещать в самый центр уши. Мы скоро подойдем к этому моменту, и я также объясню, когда использовать bottom и right вместо top и left .

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

Вот что мы должны получить на данном этапе:

Копия головы

.head-copy{ width: 100%; height: 100%; position: absolute; background: #A6BECF; border-radius: 50%; z-index: 2; }

Div копии головы делается исключительно для того, чтобы уши могли появиться за головой. Для этого используется свойство z-index . Обратите внимание на последнюю строку предыдущего фрагмента кода:

Z-index: 2;

z-index используется для обозначения уровня расположения div относительно других по оси, направленной перпендикулярно экрану (то есть на вас или от вас). С помощью этого свойства задаются слои.

В нашем финальном изображении глаза будут над головой, нос - над глазами и т.д. Всё это будет контролироваться с помощью z-index . Чем больше значение z-index, тем выше расположен div .

Так что если у вас два div, z-index: 1 будет вашим нижним слоем, а z-index: 2 - верхним. Когда мы добавляем копию головы, мы даём ей значение z-index: 2 , значит, уши нашей коалы будут располагаться за головой.

Если хотите, можете убрать копию головы, когда мы добавим уши, и посмотреть, что получится.

Мы не должны увидеть каких-либо изменений. Изображение по-прежнему выглядит следующим образом:

Уши

Как говорилось ранее, у нас будет по одному уху, состоящему из кругов, для каждой стороны. Два светло-серых круга побольше и два темно-серых круга поменьше поверх каждого уха (назовём их внутренними ушами - inner-ear).

Ear-left{ position: absolute; width: 60%; height: 65%; left: -20%; top: 5%; background: #A6BECF; border-radius: 50%; z-index: 1; } .ear-right{ position: absolute; width: 60%; height: 65%; right: -20%; top: 5%; background: #A6BECF; border-radius: 50%; z-index: 1; } .inner-ear{ position: absolute; border-radius: 50%; width: 80%; height: 80%; top: 10%; left: 10%; background: #819CAF; }

Для каждого класса мы используем border-radius:50% , так как нам нужны круги, а затем добавляем цвет, используя background .
Как вы видите, мы написали два разных стиля для ушей, но только один для внутреннего уха. Это станет очевидным, когда мы разберемся с позиционированием.

Родительским div для правого и левого уха является голова. Таким образом, процентные показатели будут рассчитываться относительно головы, так же как высота и ширина. Рассчитываем высоту и ширину, основываясь на том, что мы хотим большие уши, которые, однако, должны быть меньше головы. Таким образом, мы получаем width:60% и height:65% .

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

Left = (100 - width) / 2 top = (100 - height) / 2 // наш случай (100 - 80)/2 = top: 10%; (100-80)/2 = left: 10%;

Так как left и right рассчитываются относительно ушей, мы можем использовать один и тот же стиль для левого и правого уха, поэтому у нас всего один div внутреннего уха. Мы вынуждены использовать два раздельных div для ушей, потому что они будут иметь различные показатели left и right , т.к. они позиционируются относительно головы.

Мы хотим, чтобы уши торчали слева и справа от головы. Мы используем отрицательные значения left: -20% и right: -20% для сдвига в указанном направлении.

Вот что получилось в итоге:

//левое ухо width: 60%; height: 65%; left: -20%; top: 5%; //правое ухо width: 60%; height: 65%; right: -20%; top: 5%;

Напоследок мы добавляем z-index: 1 ; так что наши уши отправляются под голову. Вот что должно у нас получиться:

Глаза

.eye-left{ position: absolute; background: white; width: 30%; height: 33%; top: 25%; left: 21%; border-radius: 50%; z-index: 3; } .eye-right{ position: absolute; background: white; width: 30%; height: 33%; top: 25%; right: 21%; border-radius: 50%; z-index: 2; } .pupil{ position: absolute; width: 28%; height: 30%; top: 35%; left: 36%; border-radius: 50%; background: #27354A; }

Как вы видите, глаза нашей коалы похожи на её уши. У нас есть два больших белых круга (левый и правый глаз) и один зрачок.

Для них мы используем border-radius:50% , так как они являются кругами, а также используем background ,  чтобы задать соответствующий цвет.

У нас есть зрачок, который помещается в каждый глаз. Мы угадываем height и width зрачка, размещаем его по центру и получаем такой результат:

Width: 28%; height: 30%; top: 35%; left: 36%;

Для определения отступов левого глаза вы также можете использовать метод проб и ошибок или вышеприведённую формулу. Между тем, показатели height и width мы просто угадываем, пока не найдем оптимальное значение.

//левый глаз width: 30%; height: 33%; top: 25%; left: 21%; //правый глаз width: 30%; height: 33%; top: 25%; right: 21%;

Что касается z-index , следующие значения позволят поместить нос прямо над глазами:

//левый глаз z-index: 3; //правый глаз z-index: 2;

В итоге у нас должна получиться вот такая картинка:

Нос

.nose{ position: absolute; background: #BE845F; width: 25%; height: 42.5%; left: 37%; top: 45%; border-radius: 50px; z-index: 4; }

Теперь займемся носом. Все значения мы подбираем аналогично, вот оптимальные:

Width: 25%; height: 42.5%; left: 37%; top: 45%;

Мы задаем коричневый цвет для фона, используя background , и глубину с помощью z-index:4 , чтобы нос оказался над глазами.

Мы также используем border-radius: 50px , с помощью которого закругляем углы прямоугольника так, как нам нужно. Когда фигуру нужно закруглить совсем чуть-чуть, проще указывать количество пикселей, а не процентов.

Теперь у нас получается вот такое изображение:

Волосы

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

Hair-left{ position: absolute; top: -8%; left: 30%; width: 20%; height: 20%; background: #A6BECF; -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } .hair-right{ position: absolute; top: -4%; left: 48%; width: 20%; height: 20%; background: #A6BECF; -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }

Как видите, здесь мы не используем border-radius , но у нас есть вот такой код с clip-path:

Webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Для любой фигуры, кроме квадрата, треугольника и круга, проще использовать метод clip-path .

Это может казаться немного непонятным, но, к счастью, есть прекрасный инструмент Clippy , который выдаёт clip-path для различных фигур. Справа вы увидите множество различных фигур:

На изображении выше выбран треугольник, так что вы можете скопировать clip-path и вставить его в CSS-класс для волос.

Мы снова задаем цвет с помощью background и устанавливаем width и height в 20% для обоих пучков. Мы задаем левому пучку значение left: 30% , а правому - left: 48% . Это хороший пример для обсуждения, что использовать: right или left . Предположим, что мы хотим передвинуть правый пучок на 5% вправо. Мы можем добавить 5% к 48%, чтобы получить значение left:53% . Однако правилом хорошего тона считается переход с left на right и наоборот при значении выше 50%. Поэтому left: 53% будет эквивалентно right:47% .

Верхние сдвиги будут отрицательными, поскольку мы хотим, чтобы оба пучка волос торчали над головой. Левый пучок будет торчать чуть сильнее, так что мы задаем ему height: 8% , а правый пучок - чуть меньше, с показателем height: 4% .

Наша картинка коалы готова!

В итоге CSS-код должен выглядеть так:

Body{ background: #25A9FC; } .box{ position: relative; margin: auto; display: block; margin-top: 8%; width: 600px; height: 420px; background: none; } .head{ position: absolute; top:16.5%; left: 25%; width: 50%; height: 67%; background: #A6BECF; border-radius: 50%; } .head-copy{ width: 100%; height: 100%; position: absolute; background: #A6BECF; border-radius: 50%; z-index: 2; } .ear-left{ position: absolute; width: 60%; height: 65%; left: -20%; top: 5%; background: #A6BECF; border-radius: 50%; z-index: 1; } .ear-right{ position: absolute; width: 60%; height: 65%; right: -20%; top: 5%; background: #A6BECF; border-radius: 50%; z-index: 1; } .inner-ear{ position: absolute; border-radius: 50%; width: 80%; height: 80%; top: 10%; left: 10%; background: #819CAF; } .eye-left{ position: absolute; background: white; width: 30%; height: 33%; top: 25%; left: 21%; border-radius: 50%; z-index: 3; } .eye-right{ position: absolute; background: white; width: 30%; height: 33%; top: 25%; right: 21%; border-radius: 50%; z-index: 3; } .pupil{ position: absolute; width: 28%; height: 30%; top: 35%; left: 36%; border-radius: 50%; background: #27354A; } .nose{ position: absolute; background: #BE845F; width: 25%; height: 42.5%; left: 37%; top: 45%; border-radius: 50px; z-index: 4; } .hair-left{ position: absolute; top: -8%; left: 30%; width: 20%; height: 20%; background: #A6BECF; -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } .hair-right{ position: absolute; top: -4%; left: 48%; width: 20%; height: 20%; background: #A6BECF; -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }

Дальнейшая практика

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

Также я предлагаю вам два бесплатных способа прокачать свои навыки по этой теме:

1. Видеокурс «Pure CSS Images» .
2. Челлендж «Daily CSS Images» .

Хинт для программистов: если зарегистрироваться на соревнования Huawei Honor Cup, бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании. .

Так как верстка страниц становится все более сложной, разработчикам требуется доступ к большему количеству единиц измерений, чтобы воплотить дизайн в жизнь. Кроме привычных процентов, em и rem, и пикселей существуют более новые единицы измерения vw и vh, и родственные им vmin и vmax, предоставляющие более мощные способы создания адаптивного дизайна, которые нередко могут помочь отказаться от использования точек перехода @media.

Выходим за пределы использования процентов

Традиционные единицы измерения CSS создают следующие проблемы в веб-дизайне:

• Единица измерения процент не всегда работает, как ожидается. Разработчикам приходится помнить о внешних отступах, задавая размеры элементам. Не следует использовать единицу измерения процент для задания высоты элементу body. Запись font-size: 50% задает тексту размер, равный половине его стандартного размера, а не устанавливает зависимость между размером текста и размером содержащего его элемента.
• Почти невозможно создавать фигуры идеальной формы для разных размеров окна браузера. Очень сложно добиться того, чтобы элемент был идеально квадратным и в то же время адаптивным.

Единицы измерения vw и vh в значительной мере решают все эти проблемы.

Поддерживание идеальных пропорций

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

Div.twentysquare { background : #999 ; width : 20vw; height : 20vw; }

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

Используя тот же способ, можно легко создать прямоугольник, высота которого вдвое больше его ширины при любых размерах окна браузера:

Div.onetworect { width : 20vw; height : 40vw; }

Задать баннеру идеальное соотношение размеров очень просто с помощью следующего кода CSS:

Div.goldenrect { width : 100vw; height : 61 .8vw ; background : red ; }

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

Перевод — Дежурка

Проблема

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

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

Решение на основе трансформации

Основная идея та же, что и в первом решении из предыдущего секрета (см. секрет «Параллелограммы» выше), - нам необходимо обернуть наше изображение в