CSS - Формы: Пособие для начинающих по созданию потока содержимого

Здравствуйте,野心勃勃ые веб-дизайнеры! Сегодня мы окунемся в захватывающий мир CSS форм. Как ваш доброжелательный邻居-преподаватель информатики, я здесь, чтобы провести вас через это путешествие шаг за шагом. Не волнуйтесь, если вы никогда не писали ни строчки кода раньше - мы начнем с самых азов и будем продвигаться вверх. Так что налейте себе чашечку кофе (или чая, если это ваш выбор), и давайте начнем!

Что такое CSS формы?

Прежде чем углубиться в Details, давайте поймем, что такое CSS формы. Представьте, что вы расставляете мебель в комнате. Вы не хотели бы, чтобы все было в perfect rectangles, правда? Вот где и появляются CSS формы - они позволяют нам создавать интересные макеты, определяя области, вокруг которых будет flows текст.

Свойство shape-outside

В основе CSS форм находится свойство shape-outside. Это магическое свойство позволяет нам определить форму, вокруг которой будет flow текст. Это как сказать вашему тексту: "Эй, здесь есть невидимая форма. Не задевай ее!"

Синтаксис

Основной синтаксис для shape-outside довольно прост:

.element {
shape-outside: value;
}

Просто, правда? Но настоящее веселье начинается, когда мы начинаем играть с разными значениями!

Возможные значения для shape-outside

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

Значение	Описание
margin-box	Использует margin box элемента в качестве формы
content-box	Использует content box элемента в качестве формы
padding-box	Использует padding box элемента в качестве формы
border-box	Использует border box элемента в качестве формы
circle()	Создает круговую форму
ellipse()	Создает椭圆形 форму
url()	Использует изображение для определения формы
polygon()	Создает многоугольную форму
inset()	Создает vloženny rectangle
path()	Определяет форму с использованием SVG path
linear-gradient()	Использует линейный градиент для определения формы

Вау, это quite a list! Не волнуйтесь, мы рассмотрим каждый из них с примерами.

Применяется к

Прежде чем мы углубимся, важно отметить, что shape-outside применяется только к浮动ным элементам. Так что убедитесь, что ваш элемент имеет свойство float!

Давайте сформируем!

CSS shape-outside - margin-box

.shape {
float: left;
width: 100px;
height: 100px;
background: red;
shape-outside: margin-box;
margin: 20px;
}

В этом примере текст будет flow вокруг margin box нашего красного квадрата. Это как дать вашей форме немного личного пространства!

CSS shape-outside - content-box

.shape {
float: left;
width: 100px;
height: 100px;
background: blue;
shape-outside: content-box;
padding: 20px;
}

Здесь текст будет紧紧 обнимать content box, игнорируя отступы. Это идеально, когда вы хотите, чтобы ваш текст был близко к вашей форме!

CSS shape-outside - padding-box

.shape {
float: left;
width: 100px;
height: 100px;
background: green;
shape-outside: padding-box;
padding: 20px;
}

С padding-box текст уважает отступы, но игнорирует границу. Это как вежливый гость, который не хочет вторгаться слишком много!

CSS shape-outside - border-box

.shape {
float: left;
width: 100px;
height: 100px;
background: yellow;
shape-outside: border-box;
border: 20px solid black;
}

Значение border-box включает границу в форму. Это здорово, когда вы хотите, чтобы ваш текст flow вокруг всего элемента, включая границу.

CSS shape-outside - circle()

.shape {
float: left;
width: 100px;
height: 100px;
background: purple;
shape-outside: circle(50%);
border-radius: 50%;
}

Это создает идеальный круг для flow вашего текста. Это как дать вашему макету round of applause!

CSS shape-outside - ellipse()

.shape {
float: left;
width: 150px;
height: 100px;
background: orange;
shape-outside: ellipse(40% 50%);
border-radius: 50%;
}

С ellipse() мы можем создавать овальные формы. Это идеально, когда вы хотите добавить touch of egg-cellence к вашему дизайну! (Извините, я не мог удержаться от father joke.)

CSS shape-outside - url()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: url('star.png');
background: url('star.png') no-repeat;
background-size: contain;
}

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

CSS shape-outside - polygon()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
background: pink;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

С polygon() вы можете создавать любую форму, определяя ее точки. В этом примере мы создали звездную форму. Это как быть geometry wizard!

CSS shape-outside - inset()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: inset(20px 30px 40px 10px round 10px);
background: lightblue;
clip-path: inset(20px 30px 40px 10px round 10px);
}

inset() позволяет вам создавать rectangle с закругленными углами. Это идеально для создания speech bubbles или custom buttons.

CSS shape-outside - path()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: path('M 0,0 C 50,0 50,100 100,100 L 100,0 Z');
background: lightgreen;
clip-path: path('M 0,0 C 50,0 50,100 100,100 L 100,0 Z');
}

Функция path() позволяет вам создавать сложные формы с использованием SVG path данных. Это как быть digital artist!

CSS shape-outside - linear-gradient()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: linear-gradient(45deg, transparent 50%, black 50%);
background: linear-gradient(45deg, transparent 50%, black 50%);
}

Этот clever trick использует градиент для создания диагональной формы. Это отличная идея для добавления some angular flair к вашему дизайну!

Свойства, связанные с shape-outside

Чтобы получить максимальную пользу от shape-outside, вы часто будете использовать следующие связанные свойства:

• shape-image-threshold: Определяет порог alpha канала для извлечения формы из изображения.
• shape-margin: Добавляет отступ к форме.

Вот быстрый пример:

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: url('star.png');
shape-image-threshold: 0.5;
shape-margin: 20px;
background: url('star.png') no-repeat;
background-size: contain;
}

Этот код создает звездную форму из изображения, с порогом 0.5 и отступом 20px вокруг формы.

Заключение

И вот мы здесь, друзья! Мы совершили путешествие через страну CSS форм, от простых коробок до сложных путей. Помните, ключ к maîtriser CSS формы - это experimentation. Не бойтесь экспериментировать с разными значениями и видеть, что happens.

Заканчивая, я вспоминаю, как один из студентов однажды сказал мне: "CSS формы - это как магия - они делают невозможное возможным!" И вы знаете что? Он был absolutely right. С CSS формами вы можете transform скучные, boxy макеты в произведения искусства.

Так что идите и form你们的 веб-дизайны! И помните, в мире CSS нет ошибок, только счастливые little accidents (как бы сказал Боб Росс). Счастливо кодирование!

Credits: Image by storyset