Css сообщение с хвостиком

Обновлено: 05.07.2024

Я только что наткнулся на изящный трюк с CSS. Посмотри на скрипку .

Кроме того, есть способ расширить этот трюк CSS для создания следующего эффекта:

Это интересная проблема. Можно ли это сделать, используя только CSS, игнорируя пока тень?

ОБНОВЛЕНИЕ 1

Я нашел решение своего первоначального вопроса. Вот скрипка .

Теперь, как мне точно имитировать маленькую картинку выше, используя чистый CSS, включая тень и кроссбраузерность?

ОБНОВЛЕНИЕ 2

на данный момент мне все равно :) Я просто хочу посмотреть, возможно ли это! реально, я бы использовал изображение, но меня интересует задача

Должно быть выполнимо при использовании многослойных элементов и точного позиционирования контура. С тенью или без?

Вот пример с box-shadow, все браузеры последних версий должны поддерживать это

Потрясающие! Я имел в виду довольно похожее решение, но после всего того, что я объяснил, мне лень было сделать что-нибудь :) +1

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

При рендеринге границы с разными цветами краев, но в одном стиле (в вашем случае solid ), стык, разделяющий каждую пару соседних углов, представляет собой диагональную линию. Это очень похоже на то , что схема здесь изображает из groove , ridge , inset и outset стилей границ.

Обратите внимание, что, хотя все браузеры ведут себя одинаково и делали это столько, сколько я помню, это поведение не полностью определено ни в спецификации CSS2.1, ни в модуле CSS Backgrounds and Borders. В последнем есть раздел, описывающий переходы цветов и стилей в углах , и описание, похоже, подразумевает, что для границ с нулевым радиусом углов отображаемая линия фактически является линией, которая соединяет угол края отступа с углом граница границы (в результате получается линия под углом 45 градусов для границ равной ширины), но спецификация по-прежнему предупреждает, что это может быть не всегда (тем более, что она даже не учитывает явно границы с нулевым радиусом угла). 1

Согласно модели бокса содержимого (исходный W3C) , область 40x40 создается из 20-пиксельных границ с размерами содержимого, определяемыми как 0x0.

Разделение квадрата диагональными линиями, соединяющими его четыре угла, дает четыре прямоугольных треугольника, прямые углы которых пересекаются в средней точке квадрата (см. Ниже).

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

В результате границы помечены, а границы добавлены с помощью моего надежного инструмента Line Tool:

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

1 _{Если вы приверженец соблюдения стандартов, то можете считать все это хакерством.}

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

CSS3 начинает менять нашу жизнь к лучшему. Теперь можно создать симпатичный словесный пузырь, который работает во всех браузерах, использует единственный элемент HTML, несколько строк кода CSS3, без картинок и без всякого JavaScript.

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

Вначале добавляем стиль рамки.

Здесь ничего сложного нет. Единственное важное свойство это position: relative , оно необходимо для указателя словесного пузыря. Также нужны вендорные префиксы Mozilla и Webkit для border-radius и box-shadow , чтобы они работали во всех браузерах. IE8 и ниже покажет квадратные уголки и без тени, но рамка всё равно будет видна.

Теперь нам нужно создать треугольный указатель пузыря. Чтобы не прибегать к изображениям мы можем использовать свойство border для создания любого типа треугольника. В качестве краткого объяснения изучим элемент с широкими разноцветными границами.

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

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

Но как мы свяжем эти свойства border с нашим элементом? К счастью, можно использовать псевдоэлементы :before и :after для создания ещё двух пунктов содержания. Так что.

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

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

Наш словесный пузырь на чистом CSS3 без картинок завершён.

На деле мы можем использовать псевдоэлементы :after и :before для создания разных эффектов. Например, пузырь c мыслями может быть создан двумя пунктами содержания скруглёнными до окружности.

Пожалуйста, ознакомьтесь с демонстрационной страницей примера, где показана эта техника. Весь код CSS содержится внутри HTML.

Вырезание (clipping) и маскирование (masking) присутствуют в CSS уже продолжительное время и имеют довольно приличную поддержку браузерами. В этой статье будут рассматриваться техники вырезания и создание маски для всплывающих подсказок (tooltip), например, отображающих назначение ссылок в тексте.

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

Один дизайн — это всплывающая подсказка, с простым текстом и сплошным фоном.

Другой дизайн заполняет всё пространство изображением.

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

Интереснее дело обстоит при использовании изображения во втором дизайне.

Рассмотрим несколько способов реализации всплывающих подсказок с разными заливками (сплошной ровный фон или изображение) и особенностями формирования хвостика-стрелки.

Способ 1. clip-path и polygon

CSS-свойство clip-path позволяет определить произвольный многоугольник с процентными значениями координат углов.

Часто этого бывает вполне достаточно, если форма вырезаемой фигуры не очень сложная. В примере ниже используется вычисление calc() , чтобы маленький треугольник-хвостик оставался одного размера независимо от того, насколько будет растянут родительский элемент.

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

Способ 2. clip-path и SVG

Посмотрите пример. Есть ли тут какие-нибудь проблемы с вырезанием?

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

Способ 3. mask-image

С помощью CSS-свойства mask-image можно комбинировать слои маски. Это работает аналогично background-image , с помощью которого можно применить несколько градиентов или изображений к одному элементу.

Что будет, если объединить несколько слоёв маски, чтобы получилась маска нужной формы и размеров? Это именно то, что предстоит здесь сделать с двумя слоями:

Большой прямоугольник, покрывающий весь блок, кроме полосы внизу (зелёный).
Изображение стрелки (розовый)

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

Приведенные в тексте примеры кода не содержат CSS-префиксов. На момент написания этой статьи для Edge, Chrome и Safari требуется использование префиксов.

Как и в случае со свойствами background , для определения двух слоев здесь будут использоваться три варианта CSS-свойства mask :

mask-image : это свойство позволяет нарисовать прямоугольник с градиентной заливкой и стрелку со встроенным SVG.
mask-position : прямоугольнику не требуется позиционирование (так как он начинается в верхнем левом углу), но хвостик надо расположить внизу и по центру.
mask-repeat : следует избегать повторения этих слоёв; в противном случае линейный градиент покроет весь элемент при повторении.

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

Более сложные формы

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

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

четыре круга, по одному на каждый угол (красные)
один горизонтальный прямоугольник (голубой)
один вертикальный прямоугольник (зелёный)
один SVG для хвостика (жёлтый)

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

Для отрисовки углов используются четыре радиальных градиента. Чтобы заполнить основную фигуру, понадобятся два прямоугольника (вертикальный и горизонтальный), как на картинке выше. И, наконец, маленький хвостик, который использует встроенный SVG.

Как видно из примера, можно легко поворачивать и перемещать хвостик-стрелку влево или вправо.

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

Частная коллекция качественных материалов для тех, кто делает сайты

Бесплатные уроки CSS для начинающих

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

Читайте также: