Сделать обводок тексту
Есть макет Вот html
РАСПРОДАЖА
.double_text h2
Как этому тексту можно сделать обводок белого цвета толщиной в 3 пикселя?
Отслеживать
задан 4 сен 2021 в 14:09
1,701 13 13 серебряных знаков 27 27 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Для браузеров на движке для отображения веб-страниц WebKit подходит такой вариант с использованием ‘-webkit-text-stroke`
body < background: black; >h2 < font-family: 'Playfair Display', serif; font-size: 104px; line-height: 110px; font-weight: 700; background: #503012; background: -webkit-linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%); background: -moz-linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%); background: linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; >@supports (-webkit-text-stroke: 3px white) < h2 < -webkit-text-stroke: 3px white >>РАСПРОДАЖА
Возможно вам подойдет вариант с text-shadow для поддержки других браузеров, где свойтсва -webkit не поддерживаются:
body < background: black; >h2
РАСПРОДАЖА
Изображение в качестве ссылки
Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами и , как показано в примере 1.
Пример 1. Создание рисунка-ссылки
Ссылка Вокруг изображения-ссылки автоматически добавляется рамка толщиной один пиксел и цветом, совпадающим с цветом текстовых ссылок.
Чтобы убрать рамку, следует у тега установить атрибут border=»0″ (пример 2).
Пример 2. Удаление рамки вокруг изображения
Ссылка Можно также воспользоваться CSS, чтобы убрать рамку для всех изображений, которые являются ссылками. Для этого применяется стилевое свойство border cо значением none (пример 3).
Пример 3. Использование CSS
Ссылка A IMG Конструкция A IMG определяет контекст применения стилей — только для тега , который находится внутри контейнера . Поэтому изображения в дальнейшем можно использовать как обычно.
Рамка вокруг изображений
Паспарту называется картонная рамка для фотографии или рисунка. Использование паспарту зрительно увеличивает изображение, привлекает к нему внимание и делает картину более эффектной. Конечно, на веб-странице нет нужды имитировать подобную рамку, поэтому паспарту в данном случае будем называть цветную прямоугольную область вокруг изображения. На рис. 1 продемонстрирована фотография с паспарту.
Рис. 1. Пример паспарту
Как сделать, чтобы цвет рамки вокруг изображения-ссылки менялся при наведении на него курсора мыши?
За изменение стиля элемента при наведении на него указателя мыши отвечает псевдокласс :hover . Для управления стилем ссылок этот псевдокласс добавляется к селектору A через двоеточие.
Как изменить цвет рамки вокруг изображения-ссылки?
Рамка вокруг изображения появляется в том случае, когда к тегу добавляется свойство border с ненулевым значением и при создании изображения-ссылки. При этом тег
хранится внутри контейнера . Независимо от ситуации цвет рамки устанавливается автоматически, однако через стили можно задать любой желаемый цвет границы.
Как убрать рамку вокруг изображений-ссылок?
Как добавить рамку к изображению?
Для добавления рамки вокруг картинки применяется стилевое свойство border , которое следует добавлять к селектору IMG . В качестве значения одновременно указывается толщина границы, ее стиль и цвет. Например, для создания сплошной рамки толщиной два пиксела красного цвета необходимо записать IMG .
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Заливка и обводка
Есть несколько способов раскрасить фигуры SVG (в т.ч. с указанием атрибутов объекта), используя инлайн-CSS, встроенную CSS-секцию, или внешний файл CSS. Большая часть SVG, которую вы встретите в интернете, использует встроенный CSS, однако преимущества и недостатки есть у каждого типа.
Атрибуты заливки и обводки (Fill and Stroke Attributes)
Раскраска (Painting)
Основная раскраска может быть сделана установкой двух свойств на ноде — fill и stroke. Fill — устанавливает цвет внутри объекта, а stroke задаёт цвет линии, которая рисуется вокруг объекта. Вы можете использовать CSS-наименования цветов, что и в HTML — названия цветов (например, red), rgb-значения, hex-значения, rgba-значения и т.д.
rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
Кроме того, вы можете задать прозрачность заливке и обводке по отдельности в SVG. Их прозрачность управляется атрибутами fill-opacity, stroke-opacity.
Примечание: Замечание: в Firefox 3+ допустимы rgba-значения и это даёт такой же эффект прозрачности, но для совместимости с другими просмотрщиками часто лучше определить прозрачность обводки/заливки отдельно. Если вы укажете и rgba-значение и значение fill-opacity/stroke-opacity — будут применены оба.
Обводка (Stroke)
Кроме цветовых свойств обводки, есть несколько атрибутов, управляющих способом обводки.
svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> svg>
Свойство stroke-width определяет ширину обводки. Штрихи обводки рисуются вокруг пути. В примере выше путь изображён розовым, а обводка — черным.
Второй атрибут, влияющий на обводку — свойство stroke-linecap. Демонстрируется выше. Свойство управляет отображением концов линий.
Есть три возможных значения для stroke-linecap:
- butt обрывает линию под прямым углом к направлению обводки и делает это сразу по окончании линии.
- square в основном действует также, но немного растягивает обводку по краям пути. Длина, на которую продлевается обводка — это половина заданного значения stroke-width.
- round задаёт закруглённые углы по краям обводки. Радиус этих кривых также управляется параметром stroke-width.
Используйте stroke-linejoin , чтобы определить, как соединять обводку двух сегментов линии.
svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round" fill="none" stroke-linejoin="round"/> polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" stroke-linecap="square" fill="none" stroke-linejoin="bevel"/> svg>
Каждая из этих полилиний имеет два сегмента. Соединение, где они встречаются, управляется атрибутом stroke-linejoin . Есть три возможных значения для этого атрибута:
- miter продолжает линию обводки дальше её обычной ширины, чтобы создать единственный квадратный угол.
- round создаёт закруглённый сегмент линии
- bevel создаёт новый угол для помощи в переходе между двумя сегментами
Наконец, вы можете использовать пунктирные линии в обводке, определив атрибут stroke-dasharray .
svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> svg>
В качестве аргумента атрибут stroke-dasharray принимает последовательность чисел, разделённых запятой.
Примечание: Замечание: в отличие от путей, эти числа ДОЛЖНЫ быть разделены запятыми (пробелы игнорируются).
Первое число определяет длину штриха, второе — длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берёт эти числа дважды, чтобы создать чётный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми «пикселями». Затем паттерн повторяется.
Также есть дополнительные stroke и fill свойства: fill-rule , которое определяет как будут заливаться сложные фигуры, которые имеют пересечения внутри себя; stroke-miterlimit , which determines if a stroke should draw miters и stroke-dashoffset , который указывает где начинается dash-array в линии (позволяет задать смещение пунктирной обводки относительно первоначального положения)
Использование CSS (Using CSS)
В дополнение к установке атрибутов объектов, вы также можете использовать CSS для стилизации заливки и обводки. Не все атрибуты могут быть установлены через CSS. Но атрибуты взаимодействия с раскраской и заливкой обычно доступны, так что fill , stroke , stroke-dasharray и т.д. могут быть заданы этим способом, также как и градиенты, и паттерны, что показано ниже. Атрибуты вроде width , height или команд для путей SVG не могут быть установлены через CSS. Проще всего просто протестировать и узнать, что доступно, а что нет.
Примечание: Спецификация SVG строго разделяет атрибуты на свойства и другие атрибуты. Первые могут быть изменены через CSS, а вторые — нет.
CSS может использоваться инлайн через атрибут style :
rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>
или может быть помещён в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе , как это делается в HTML, она включается в зону , предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.
svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> defs> style type="text/css"> ]]>style> defs> rect x="10" height="180" y="10" width="180" id="MyRect"/> svg>
Перемещение стилей в отдельную зону может сделать проще применение свойств к большим группам элементов. Вы также можете использовать вещи типа псевдоклассов наведения для создания эффектов переворачивания:
#MyRect:hover stroke: black; fill: blue; >
Также можно определить отдельный файл стилей для ваших CSS-правил через обычный XML-stylesheet синтаксис:
svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> rect height="10" width="10" id="MyRect"/> svg>
где style.css выглядит примерно так
#MyRect fill: red; stroke: black; >
- « Предыдущая статья
- Следующая статья »