выходим за рамки и взрываем звезды с border-image и градиентами — CSS-LIVE
Как вы думаете, сколько CSS-градиентов нужно, чтобы нарисовать каждую из этих фигур?
Один! 🤯 Причем его даже не надо дублировать: достаточно указать один раз в одном-единственном свойстве. Таким примером в CodePen на днях поделился Темани Афиф, автор занятного и познавательного проекта css-challenges.com.
Эта «магия» — заслуга свойства border-image. У нас уже есть статья о нем и его возможностях. Увы, громоздкий синтаксис и неинтуитивное поведение — особенно с градиентами — до сих пор мешают ему стать популярным. Сам Афиф в Твиттере признал, что «border-image принадлежит к тёмной стороне CSS»: очень уж трудно представить себе наглядно, как масштабируются, нарезаются и потом опять масштабируются части картинки. И многие даже не пытаются разобраться в нем. А зря!
Во-первых, уникальная способность border-image выходить за края элемента может быть очень полезна в массе практических задач.
See the Pen
Untitled by Ilya Streltsyn (@SelenIT)
on CodePen.
или «отзывчивая» имитация старого ЭЛТ-экрана:
See the Pen
responsive old CRT screen with border-image and gradient by Ilya Streltsyn (@SelenIT)
on CodePen.
А во-вторых, border-image — уже не единственное свойство с таким синтаксисом. Недавно к нему добавилось еще одно — mask-border, из модуля СSS-масок 1 уровня. Оно уже работает в Safari и Chrome с аналогами (в виде border-image (можете еще раз посмотреть пример с косыми секциями, в самом низу:).
Чтобы овладеть мощью этой темной стороны CSS, надо поупражняться. Упражнение будет типичное для темной стороны: взорвать звезду! Правда, делать это мы будем на безопасном (относительно: может затянуть, как черная дыра!:) полигоне — в игре CSSBattle, одно из заданий которой (№83) так и называется — «Сверхновая»:
Напомним, задача этой игры — воспроизвести картинку 400×300 в окне такого же размера минимально возможным CSS-кодом. Рисовать «облака плазмы» по отдельности — не наш, не «тёмносторонний» путь 👾. Поступим проще: нарисуем 4 голубых круга на синем фоне, а поверх наложим синий квадрат с желтым кругом и повернем на 45°.
Круги получаются частично «наехавшими» друг на друга. Рисовать их отдельными элементами, множествеными фонами, тенями и т.п. — долго и скучно. Можно проще и короче!
See the Pen
Recreating CSSBattle Target#83 with border-image, part 1 by Ilya Streltsyn (@SelenIT)
Вот как это работает:
- Определяем контуры будущей рамки. Пользуясь тем, что можно выходить за края элемента, добавляем по
50pxсверху и снизу, получается квадрат 400×400. - Заливаем этот квадрат синим градиентом с голубым кругом радиусом
64pxв центре. Это и будет наша исходная картинка для нарезки. - Из этой картинки выделяем и копируем 4 угловых «плитки» размером 254×254 пикселя (см. прошлую статью для наглядности). Центр круга попадает в каждую «плитку», но два крайних сегмента по 9px оказываются отрезанными.
- Масштабируем плитки до нужной толщины рамки. У нас рамка заполняет весь квадрат, без центральной «дырки», так что толщина —
200px(половина стороны). Радиусы кругов уменьшатся в 254/200 = 1.27 раза, т.е. до50px(столько и было нужно!) - Кладем плитки на углы квадрата, обрезанные края кругов стыкуются друг с другом.
Всё!
Всё!Толщину в п. 4 можно задать не ровно 200px, но и больше (например, 288px = 3in): итоговый размер плиток всё равно будет 200×200, они всегда ужимаются, чтобы поместиться. Этим можно сэкономить один-два символа.
Теперь маленький квадрат: у него размер 120×120, а круг внутри желтый, радиусом 30px и строго по центру. Здесь нам фактически не нужна сама рамка, только центральная плитка — аналог фона. За нее отвечает ключевое слово fill, у которого есть еще и приятный побочный эффект — картинка рисуется независимо от наличия обычного border-а:
See the Pen
Recreating CSSBattle Target#83 with border-image, part 2 by Ilya Streltsyn (@SelenIT)
on CodePen.
В CSSBattle мы по умолчанию на «тёмной стороне» HTML — в Quirks mode, «режиме совместимости со старыми глюками». А значит, можем отбросить height (в Quirks mode html) и px у margin-а (предупреждение: так можно только в CSSBattle, не повторяйте это в реальных проектах!), еще чуть уменьшив код.
Копируем его в окошко игры, жмем Submit… БУМ! 💥 В космосе звук не распространяется, но радость от успешного испытания слышна аж на сервере 😂
Но писать «border-image: radial-gradient» два раза — всё равно долго и скучно. Подправим-ка стили border-image с html:
body {
border-image: radial-gradient(#EEB850 30px,#243D83 0) 0 fill / 0 / 50px 0;
margin: 140; /* размер автоматом станет 120x20 */
}
Самому body не обязательно быть квадратным, квадратной должна быть лишь рамка – так что делаем его прямоугольным (заодно margin сократился) и используем уже знакомый трюк. Теперь можно написать border-image: radial-gradient() один раз, для универсального селектора, а для body только переопределить цвет и радиус внутреннего круга и начальный/конечный размер угловых плиток. Это можно сделать с помощью кастомных свойств (CSS-переменных).
currentColor для цветов и единица измерения em для размеров. Так что решение сокращается до… See the Pen
Recreating CSSBattle Target#83 with border-image, part 2 by Ilya Streltsyn (@SelenIT)
on CodePen.
У html переход от первой цветовой зоны ко второй находится в 4em = 64px от центра, т.е. дальше края второй (желтой) зоны, а значит, вторая зона не видна. У 1em = 0), и видна только желтая. Заодно обнуляется и толщина рисованной рамки. Лишь для «вырезки» плиток пришлось использовать отдельную переменную, а не размер в em — это безразмерное число, а не длина, и в CSS это несоизмеримые друг с другом величины (как метры и килограммы).
Путем зверской минификации это решение можно ужать как минимум до 150 знаков.
Заявка на место в первой десятке! Еще раз посмотрим на процесс нарезки и масштабирования «плиток» в анимации:
See the Pen
Recreating CSSBattle Target#83 with border-image, part 1 by Ilya Streltsyn (@SelenIT)
on CodePen.
Можете поменять значения вверху и посмотреть, что изменится (примечание: тут отображается только рамка, без центральной «плитки» — так нагляднее). Надеюсь, это упражнение поможет вам легче понять, что и как вырезается, копируется и растягивается в примерах в начале статьи, и создавать свои по аналогии.
Пускай же CSS раскрывает перед вами все свои тайны, даже темные, пополняя ваш арсенал суперсилами для побед над самыми сложными задачами. Дерзайте, не бойтесь экспериментировать!
P.S. Это тоже может быть интересно:
Креативный текст с использованием фигур CSS
Вспоминая, как много лет назад я начинал свою карьеру дизайнера, я помню, как создавал креативные текстовые потоки в Adobe InDesign.
Начав как дизайнер печати, я много работал в этой программе верстки. При работе с макетами текст иногда обтекал изображение или «обтекал» форму. В мире печати это называется «переносом текста». Это не тот термин, который используется в Интернете, но такая же идея доступна в стилях CSS.
Контент играет ключевую роль на любом веб-сайте. Когда дело доходит до веб-типографики, существует множество передовых практик, но самое важное правило дизайна — сохранять разборчивость и оптимизировать типографику для лучшего просмотра.
С большой властью приходит большая ответственность. При разработке и планировании типографики и потока текста важно помнить об удобстве чтения для ваших пользователей. То, что вы можете делать что-то «забавное и необычное», не означает, что вы обязательно должны это делать, если это отвлекает или негативно влияет на разборчивость. Разборчивость — главный приоритет, но ваше творчество не должно быть ограничено, если вы хотите немного разбить сетку.
Давайте посмотрим, как творческие текстовые потоки могут быть включены в ваш дизайн.
Как можно объединить фигуры и текст?
Прошло некоторое время, но я помню, как читал статьи и слышал, как дизайнеры говорят: «Все веб-сайты выглядят одинаково». Вероятно, это было несколько лет назад, и теперь я не вижу, чтобы все было полностью единообразно, когда я просматриваю веб-страницы.
Я говорю об этом, потому что теперь стало больше гибкости, поскольку браузеры стали более продвинутыми. Веб-сайты кажутся уникальными и интересными, потому что дизайнеры используют уникальную графику, анимацию и такие вещи, как творческие текстовые потоки. Хорошая новость заключается в том, что использование CSS для стилизации обеспечивает гибкость, и вы можете делать интересные вещи с потоком текста в своих проектах. Простые формы и контуры обрезки — это способы проявить творческий подход с потоками текста.
Формы
Простые формы довольно просты, когда дело касается кругов, эллипсов и прямоугольников.
Здесь используется свойство shape-outside для перекомпоновки текста. Это свойство позволяет нам отойти от прямоугольной формы, к которой мы привыкли. Это позволит тексту обтекать другие фигуры.
Простая форма
В качестве простого примера я хочу, чтобы мой текст обтекал круг. Это добавляет визуального интереса к длинному тексту, и что-то подобное довольно легко стилизовать. Это один из тех случаев, когда легче всего научиться на практике. Используя свойство shape-outside, текст обтекает круг, а не прямоугольники, которые мы привыкли видеть. Основная идея выглядит так:
Вот пример на CodePen:
Примечание. Чтобы свойство shape-outside работало, вам необходимо включить float и установить высоту и ширину. В приведенном выше примере были установлены ширина и высота 200 пикселей и объявлен левый плавающий объект. Одна вещь, о которой стоит подумать, поскольку поплавок определяет, на какой стороне фигуры будет обертывание, не будет обертывания вокруг всей формы.
Вместо круга, возможно, вы захотите использовать в качестве формы эллипс. Имейте в виду, что это довольно быстрое решение — настроить круг, чтобы он превратился в эллипс. Одно измерение удлинено по сравнению с другим. В зависимости от эллипса горизонтальная или вертикальная ось больше. Я немного не разбираюсь в геометрии, но rx — это значение радиуса по оси x. Ry — значение по оси ординат.
Вы можете увидеть что-то вроде clip-path: ellipse (100px 200px при 50% 50%), если хотите использовать эллипс. Здесь есть два набора чисел. Мы знаем, что первый набор определяет размеры, но что такое второй набор чисел? Это cx и cy. Это координаты центра эллипса.
Посмотрите, как координаты могут регулировать размещение: эллипс (100 пикселей 200 пикселей при 20% 30%) по сравнению с эллипсом (100 пикселей 200 пикселей при 50% 50%)Использование файла .png
Простой круг довольно прост, но имейте в виду, что свойство shape-outside также работает с изображениями .
png. Чтобы использовать файлы .png, проще всего объединить изображение с фигурой. Это изображение растения сочетается с кругом, поэтому текст лучше всего обтекает его. Здесь в игру вступает поле формы.
Вот пример на CodePen (попробуйте настроить размер и поле формы, чтобы увидеть, что произойдет):
Shape margin
В этом примере листья имеют некоторые органические формы, поэтому визуально он выглядит лучше, если между изображением и текстом есть отступ. Shape-margin определяет фигуру, поэтому она не связана непосредственно с потоком текста, а связана с интервалом. Вы могли заметить, что в нескольких примерах текст был близок к форме. Это может быть или не быть тем, к чему вы стремитесь. Приятно иметь некоторое пространство между ними, поэтому хорошая новость в том, что есть способ добавить немного места.
Float
Определение float важно, потому что оно необходимо для упаковки. С этим легко экспериментировать, но помните, что float требуют противоположного мышления. Если это изображение растения перемещается вправо, обертывание происходит в левой части изображения. Вам также нужно будет установить размеры изображения, поэтому не забудьте установить высоту / ширину.
Создание pull-quote с помощью content-box
Это довольно простая концепция, но терминология может немного сбивать с толку, поскольку мы не полагаемся на форму, как в примерах выше. Подумайте о таком элементе дизайна, как pull quotes. Иногда они предназначены для обтекания их текстом статьи. Это хороший способ объединить текст статьи и ключевые цитаты (часто бывает в журналах). Это, безусловно, вариант в Интернете. Просто нужно немного стилизовать.
Shape-outside будет выглядеть немного иначе. Content-box относится к количеству содержимого, которое включает pull quote, и внешний контент будет обтекать его.
Нет определенной формы, поэтому используется стандартный прямоугольник. Как и в других примерах, при использовании shape-outside необходимы width, height и float.
Вот CodePen:
Сложные формы
Пути обрезки
Работая над этими примерами, я обнаружил, что Clippy, создатель контуров клипов CSS, очень помогает при создании базовой формы. В некоторых случаях вам может понадобиться работать с более сложными формами, такими как многоугольники. Для таких вещей, как многоугольники, вы будете работать с отсечками. Было бы неприятно видеть много значений, когда вы видите что-то вроде clip-path: polygon (50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%), но использование такого инструмента, как Clippy, действительно помогает. Это довольно простой семиугольник, но этот же прием можно использовать для более сложных путей.
Вот пример на CodePen:
Для этого могут потребоваться не очень сложные формы, но подумайте о сочетании форм.
Поскольку содержимое обтекает фигуру с противоположной стороны, обозначенной плавающим элементом, вы можете иметь две плавающие фигуры и текст между ними. Это дает интересный эффект.
Поддержка браузера
При использовании фигур CSS всегда важно проверять поддержку браузером. Can I use — это всегда полезный ресурс. Хорошая новость в том, что эти текстовые потоки улучшают дизайн. Контент всегда находится в центре внимания, поэтому пользователи по-прежнему должны иметь доступ к тексту независимо от того, переносится ли поток или нет.
Вывод
Фигуры CSS могут быть простыми или сложными. Теперь, когда у вас есть основы текстовых потоков и фигур CSS, вы можете включить некоторые из этих концепций в свои веб-макеты.
Создание обычных фигур CSS — квадрат, прямоугольник, прямоугольник со скругленными углами, овал и круг, треугольник вверх вниз влево и вправо Использование абсолютного положения с ::after | Учебники по CSS | WebtricksГлавная | Учебники по веб-дизайну, разработке и SEO
Css — хитрая вещь, с помощью которой мы можем создавать уникальные формы, будь то на заднем плане или в виде объекта на переднем плане. Возможно, вы заметили, что по краям некоторых блоков добавлены маленькие симпатичные треугольники, чтобы придать им уникальный вид, в то время как квадраты, прямоугольники, прямоугольники со скругленными углами, овалы и круги — это обычные прямоугольники, которые мы чаще всего видим на веб-страницах. Давайте посмотрим, как мы можем легко создавать такие фигуры с помощью css.
Обычные фигуры CSS — квадрат, прямоугольник, прямоугольник со скругленными углами, овал и круг
Квадратные формы очень распространены в CSS. Мы постоянно используем его в качестве фона или блоков контента. Все, что нам нужно сделать, это определить одинаковую высоту и ширину для элемента div, который мы хотим стилизовать, и добавить фон.
.площадь{
ширина: 100 пикселей;
высота: 100 пикселей;
фон: #222;
}
Прямоугольник
Еще одна распространенная форма CSS, которую веб-дизайнер чаще всего использует, — это прямоугольник. Это разнообразная форма квадрата, где мы определяем неравную высоту и ширину для любого элемента div, который мы хотим стилизовать.
.прямоугольник{
ширина: 200 пикселей;
высота: 100 пикселей;
фон: #222;
}
Квадрат/прямоугольник со скругленными углами
Другой распространенной формой CSS является прямоугольник со скругленными углами. Это разнообразная форма квадрата/прямоугольника, где мы определяем радиус границы, чтобы сделать углы скругленными.
.прямоугольник с закругленными углами{
ширина: 200 пикселей;
высота: 100 пикселей;
фон: #222;
радиус границы: 10px;
}
Овальный
Если мы отклонимся от прямоугольника со скругленными углами к значительно большему значению радиуса границы, мы получим овальную форму. Мы получим овальную форму, если зададим более высокий радиус границы для прямоугольника.
.овал{
ширина: 200 пикселей;
высота: 100 пикселей;
фон: #222;
радиус границы: 50%;
}
Круг
Подобно квадратной форме, круг также должен иметь одинаковую ширину и высоту с радиусом границы 50%.
Если вы хотите добавить значение радиуса границы в пикселях, то это половина значения высоты или ширины фигуры.
.круг{
ширина: 100 пикселей;
высота: 100 пикселей;
фон: #222;
радиус границы: 50%;
}
Css-фигуры — треугольники
Треугольники также часто встречаются на веб-страницах, особенно для обозначения активных ссылок или для стилизации обычных блоков содержимого для придания уникального вида.
Создать треугольник намного проще, чем кажется. Вам просто нужно определить ширину и высоту треугольника как 0. Затем определите размер границы трех сторон треугольника, опуская одну сторону, с которой вы хотите, чтобы верхняя точка вашего треугольника была обращена. Определите большее базовое значение границы и добавьте немного цвета границы, задав меньшее, но одинаковое базовое значение для двух других сторон с прозрачным цветом границы.
Мы можем заставить треугольник поворачиваться в любую сторону, просто изменив свойства его границы.
Треугольник вверх
Добавьте более высокое значение ширины границы со сплошным цветом границы внизу, а также меньшие значения ширины границы слева и справа с прозрачным цветом границы, и вы получите треугольник, обращенный вверх .
.треугольник{
ширина: 0;
высота: 0;
граница слева: 50px сплошная прозрачная;
граница справа: 50px сплошная прозрачная;
нижняя граница: 100px сплошная #222;
}
Треугольник вниз
Замените свойство border-bottom на свойство border-top, и вы получите треугольник, обращенный вниз.
.треугольник вниз{
ширина: 0;
высота: 0;
граница слева: 50px сплошная прозрачная;
граница справа: 50px сплошная прозрачная;
верхняя граница: 100px сплошная #222;
}
Треугольник слева
Замените свойство border-left на свойство border-top или border-bottom, и вы получите треугольник, обращенный вниз.
.треугольник слева{
ширина: 0;
высота: 0;
нижняя граница: 50px сплошная прозрачная;
граница сверху: 50px сплошная прозрачная;
граница справа: 100px сплошная #222;
}
Треугольник справа
Замените свойство border-right на border-left, и вы получите треугольник, обращенный вниз.
.треугольник вправо{
ширина: 0;
высота: 0;
нижняя граница: 50px сплошная прозрачная;
граница сверху: 50px сплошная прозрачная;
граница слева: 100px сплошная #222;
}
Css-фигуры — прямоугольные треугольники
Прямоугольные треугольники создаются быстрее и проще, чем обычные. Нам нужно определить границы только с двух сторон, задав высоту и ширину равными 0.
Верхний левый треугольник
Чтобы создать верхний левый треугольник с прямым углом, нам нужно определить свойство border-top со сплошным цветом и рамкой. -правое свойство как прозрачная граница.
.верхний левый{
ширина: 0;
высота: 0;
верхняя граница: 100px сплошная #222;
граница справа: 100 пикселей сплошная прозрачная;
}
Верхний правый треугольник
Чтобы создать верхний правый треугольник с прямым углом, нам нужно определить свойство border-top со сплошным цветом и свойство border-left как прозрачную границу.
.верхний левый{
ширина: 0;
высота: 0;
верхняя граница: 100px сплошная #222;
граница слева: 100px сплошная прозрачная;
}
Нижний левый треугольник
Чтобы создать нижний левый треугольник с прямым углом, нам нужно определить свойство border-bottom со сплошным цветом и свойство border-right как прозрачную границу.
.Нижняя левая{
ширина: 0;
высота: 0;
нижняя граница: 100px сплошная #222;
граница справа: 100 пикселей сплошная прозрачная;
}
Нижний правый треугольник
Чтобы создать нижний правый треугольник с прямым углом, нам нужно определить свойство border-bottom со сплошным цветом и свойство border-left как прозрачную границу.
.верхний левый{
ширина: 0;
высота: 0;
верхняя граница: 100px сплошная #222;
граница слева: 100px сплошная прозрачная;
}
Позиционирование треугольной формы рядом с обычной фигурой (используя абсолютное положение с ::after)
Теперь вы знаете, как создавать эти фигуры.
Давайте добавим один из них к обычному. Давайте попробуем создать всплывающую подсказку или пузырь комментария, подобную фигуре, объединяющей две фигуры в css.
Вот настоящий css, используемый в этом элементе.
.комментарий-пузырь{
ширина: 200 пикселей;
отступ: 10px 20px;
радиус границы: 30px;
фон: #222;
положение: родственник;
нижняя граница: 30px;
цвет: #fff;
выравнивание текста: по центру;
размер шрифта: 12px;
}
.комментарий-пузырь:после{
содержание: '';
положение: абсолютное;
ширина: 0;
высота: 0;
верхняя граница: 15px сплошная #222;
граница слева: 10px сплошная прозрачная;
граница справа: 10px сплошная прозрачная;
верх: 100%;
справа: 45%;
}
0 Нравиться 0 Не нравится Поделиться Твитнуть
CSS-фигуры 1-го уровня | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.
Могу ли я использовать
Поиск?
CSS-фигуры Уровень 1
— CR
global»>Глобальное использование
96,97% + 0% знак равно 96,97% Позволяет задавать геометрические фигуры в CSS для определения области обтекания текста. Включает свойства shape-outside , shape-margin и shape-image-threshold
Chrome
- 4 — 33: Not supported
- 34 — 36: Disabled by default
- 37 — 107: Supported
- 108: Supported
- 109 — 111: Supported
Edge
- 12 — 18: Not supported
- 79 — 106: поддержано
- 107: Поддержано
Safari
- 7.1 — 10: поддержал 9011149
- . Поддерживается
04% — Not supported»> 3,1 — 7: Не поддерживаетсяFirefox
- 2 — 50: не поддерживается
- 51 — 61: отключено по умолчанию
- 62 — 106: Поддержано
- 107: поддержано
- 108 -109: 70149
- 107: поддержано
- 108 -109: поддержано 9014 9014 9014 9014:
- . 23: не поддерживается
- 24 — 91: поддержано
68% — Supported»> 92: ПоддержаноIE
- 5,5 — 10: не поддерживается
- 11: не поддерживается
Safari on iOS
- 3.2 — 7.1: Not supported
- 8 — 10.2: Supported
- 10.3 — 16.0: Supported
- 16.1: Supported
Samsung Internet
- 4 — 18.0: Supported
- 19. 0 : Поддерживается
0 : ПоддерживаетсяOpera Mini
- все: Не поддерживается
Opera Mobile
- 10–12.1: Не поддерживается
- 72: Поддерживается
- UC Browser2 Браузер для Android0148
- 13.4: Supported
Android Browser
- 2.1 — 4.4.4: Not supported
- 107: Supported
Firefox for Android
- 106: Supported
QQ Browser
- 13.1: Supported
Браузер Baidu
- 13.18: Поддерживается
Браузер KaiOS
