От автора: вы хотите разместить текст внутри фигуры круга с помощью HTML и CSS? Звучит безумно, верно? На самом деле, нет! Благодаря shape-outside и некоторым хитростям CSS можно сделать именно это.
Тем не менее, это может быть неудобный вариант макета. Мы должны принимать во внимание множество разных вещей, таких как количество символов, количество слов, изменения шрифта, размер шрифта, форматирование шрифта и требования адаптивного макета, это только первое, что приходит на ум. Один размер, не подходит всем. Но давайте все равно сделаем это.
Вот цель: мы хотим отобразить цитату <blockquote> и имя автора в фигуре круга. Мы также хотим сделать макет максимально гибким. Этот макет не требует никаких дополнительных файлов и поддерживает чистую разметку HTML. Вот, что мы хотим получить:
На момент написания этой статьи функция shape-outside не поддерживается в Internet Explorer или Microsoft Edge 18 и ниже.
Сначала HTML
Нам понадобится элемент-оболочка, поэтому давайте используем семантику <blockquote> в качестве внутреннего элемента. Внешняя оболочка может быть дивом:
<div class="quote-wrapper"> <blockquote class="text" cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/"> <p>Experience design is the design of anything, independent of medium, or across media, with human experience as an explicit outcome, and human engagement as an explicit goal.</p> <footer>– Jesse James Garrett</footer> </blockquote> </div>
Если вы хотите узнать больше о цитатах HTML, вам повезло. Мы собираемся установить саму цитату в <p> и имя автора внутри <footer>. У нас есть имена классов для хуков CSS-стилей, которые нам понадобятся.
Далее немного базового CSS
Давайте начнем с div-оболочки. Во-первых, мы установим минимальный (адаптивный) размер квадрата в 300 пикселей, чтобы он помещался на экранах малого размера. После этого мы добавим относительное позиционирование (потому что оно понадобится нам позже).
.quote-wrapper { height: 300px; position: relative; width: 300px;
}
Теперь мы заставим цитату заполнить всю оболочку и имитируем фигуру круга с помощью радиального градиентного фона. (Все верно, мы не используем в этом примере border-radius).
.text { background: radial-gradient( ellipse at center, rgba(0, 128, 172, 1) 0%, rgba(0, 128, 172, 1) 70%, rgba(0, 128, 172, 0) 70.3% ); height: 100%; width: 100%;
}
Стоит отметить, что 70% дает более грубые края. Я вручную добавил очень небольшие значения и обнаружил, что 70,3% выглядит лучше всего.
Обратите внимание, что край справа намного более гладкий, чем край слева. Теперь у нас есть базовый круг. Добавьте эти дополнительные правила стиля для .text.
.text { color: white; position: relative; margin: 0;
}
Вот что мы имеем на данный момент:
Применение к тексту CSS
Давайте сначала стилизуем абзац:
.text p { font-size: 21px; font-style: italic; height: 100%; line-height: 1.25; padding: 0; text-align: center; text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}
Давайте используем псевдо-элемент blockquote ::before. Здесь в игру вступает свойство shape-outside. Мы задаем координаты для polygon() и перемещаем его влево, чтобы текст вписался внутрь фигуры.
.text::before { content: ""; float: left; height: 100%; width: 50%; shape-outside: polygon( 0 0, 98% 0, 50% 6%, 23.4% 17.3%, 6% 32.6%, 0 50%, 6% 65.6%, 23.4% 82.7%, 50% 94%, 98% 100%, 0 100% ); shape-margin: 7%;
}
Давайте изменим цвет фона на красный. Точки многоугольника в редакторе контура и соединительные линии также синего цвета. Мы временно меняем с помощью редактора этот цвет для большей контрастности.
background: radial-gradient( ellipse at center, rgba(210, 20, 20, 1) 0%, rgba(210, 20, 20, 1) 70%, rgba(210, 20, 20, 0) 70.3% );
Мне нравятся инструменты разработчика Firefox, потому что в них есть очень удобные функции, такие как редактор контура shape-outside. Нажмите на форму многоугольника в инспекторе, чтобы увидеть активную форму в окне браузера. Большое спасибо команде разработчиков Mozilla за создание очень классного инструмента!
Вот что мы имеем на данный момент:
Эти точки вдоль фигуры взяты из инструмента редактирования Firefox. Мы можем сделать то же самое для псевдо-элемента абзаца ::before. Мы используем shape-outside, чтобы создать тот же многоугольник, только в обратном порядке, а затем сместить его вправо.
.text p::before { content: ""; float: right; height: 100%; width: 50%; shape-outside: polygon( 2% 0%, 100% 0%, 100% 100%, 2% 100%, 50% 94%, 76.6% 82.7%, 94% 65.6%, 100% 50%, 94% 32.6%, 76.6% 17.3%, 50% 6% ); shape-margin: 7%;
}
Выглядит хорошо, но куда делся футер? Он вышел за пределы <blockquote> (там, где находится круглый цветной фон), поэтому мы не можем увидеть этот белый текст на белом фоне.
Стили футера
Теперь мы можем стилизовать <footer> и задать для него абсолютную позицию, чтобы вернуть его на круг.
.quote-wrapper blockquote footer { bottom: 25px; font-size: 17px; font-style: italic; position: absolute; text-align: center; text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3); width: 100%;
}
Опять же, вы можете менять цвет фона в соответствии со своими предпочтениями. Здесь одна важна вещь. Сам текст должен быть стилизован таким образом, чтобы количество слов и символов соответствовало фигуре. Я использовал эти правила CSS:
font-size
shape-margin (у нас есть две зоны исключения для настройки)
line-height
letter-spacing
font-weight
font-style
min-width и min-height (для контейнера .quote-wrapper)
Добавление кавычек
Вы видели гигантскую кавычку в оригинальной демоверсии? Это то, что мы хотим сделать дальше. Мы воспользуемся псевдо-элементом ::before для .quote-wrapper. Опять же, это займет немало времени, чтобы все выглядело правильно. Я обнаружил, что line-height имеет огромное влияние на вертикальное положение знака.
.quote-wrapper::before { content: "\201C"; color: #ccc; font-family: sans-serif, serif; font-size: 270px; height: 82px; line-height: 1; opacity: .9; position: absolute; top: -48px; left: 0; z-index: 1;
}
На самом деле есть разница между фигурными («умными») и прямыми (тупыми) кавычками. Я бы предложил использовать фигурные кавычки для диалогов и прямые кавычки для кода.
Обработка адаптивных стилей
Возможно, нам следует увеличить блок на больших экранах. Я устанавливаю контрольную точку на 850px, но вы можете использовать другое значение.
@media (min-width: 850px) { .quote-wrapper { height: 370px; width: 370px; } .quote-wrapper::before { font-size: 300px; } .text p { font-size: 26px; } .quote-wrapper blockquote footer { bottom: 32px; }
}
Все готово!
Мы помещаем HTML-текст в фигуру круга, используя комбинацию старых и новых техник CSS, чтобы создать привлекательный блок <blockquote>. И мы достигли нашей цели — отображения без каких-либо дополнительных зависимостей, сохраняя разметку HTML чистой и семантической. Я надеюсь, что эта статья побудит вас изучить новые возможности макета shape-outside. Используйте shape-inside.
Автор: Kerry Smyth
Источник: https://joshwcomeau.com
Редакция: Команда webformyself.
