Это идеальное руководство по добавлению текстур на HTML-страницу.
В моем блоге Coding Dude я часто обсуждаю базовые и расширенные возможности CSS-кодирования. В этом уроке я покажу вам более продвинутые методы CSS и JavaScript для создания визуальных эффектов.
Итак, у вас есть HTML-страница с большим красивым заголовком. Вы можете сделать это лучше, поместив текстуру или шаблон поверх текста в HTML.
Как ты это делаешь?
В этом посте я покажу несколько хитростей CSS, которые позволят вам получить приятные текстурные текстовые эффекты с минимальными усилиями.
Для этого мы будем использовать пару бесшовных и не бесшовных текстур, которые вы можете скачать бесплатно:
Давайте начнем.
Вам также может понравиться:
Базовый HTML для всех
Метод 1 — Использование background-clipсвойства CSS
Для текстового элемента HTML нет свойства CSS, где можно указать размещение текстуры на тексте. Так как же тогда применить изображение к тексту?
Нам на самом деле понадобится фоновый слой, где изображение установлено в качестве фона, и слой переднего плана, где находится текст. Затем, используя CSS, мы инструктируем браузер обрезать часть фона, используя форму текста перед ним.
Создайте файл HTML и добавьте:
HTML
xxxxxxxxxx
1
<h1 class="lava-text">LAVA TEXT</h1>
Затем создайте файл CSS, включите его в файл HTML и добавьте следующий код:
CSS
xxxxxxxxxx
1
.lava-text {
2
background: url(http://www.textures4photoshop.com/tex/thumbs/lava-magma-seamless-texture-free-download-70.jpg) no-repeat center center;
3
background-size: cover;
4
color: #fff;
5
text-fill-color: transparent;
6
background-clip: text;
7
background-clip:text;
8
background-clip:text;
9
font-family:Catamaran,sans-serif;
10
font-size:10em;
11
padding:0;
12
margin:0;
13
text-align:center;
14
text-stroke: 3px #ffaa00;
15
}
И вот результат:
Хотите использовать другую текстуру? Просто измените backgroundсвойство на ваше изображение.
Вот результат использования текстуры дерева :
И с некоторыми незначительными изменениями CSS и акварельной текстурой :
CSS
xxxxxxxxxx
1
background: url(http://www.textures4photoshop.com/tex/thumbs/watercolor-paint-background-free-thumb32.jpg) repeat center center;
Метод 2 — Использование svg clippathдля добавления текстуры в текст
SVG иногда может быть очень полезен для создания текстовых эффектов. Давайте посмотрим, как мы можем добавить текстуры к тексту.
Мы поместим фоновое изображение как простой imgэлемент и добавим textэлемент SVG внутри clippathэлемента. clipathэлементы позволяют использовать элементы SVG в качестве маски.
Вот HTML-код:
HTML
xxxxxxxxxx
1
<img class="svg-clip" src="http://www.textures4photoshop.com/tex/thumbs/lava-magma-seamless-texture-free-download-70.jpg"/>
2
Текст лавы
Одним из преимуществ этого метода является то, что в качестве маски для текстуры можно использовать любую векторную форму, а не только текст.
Метод 3 - Использование svg fillдля добавления шаблона в текст
Этот метод похож на предыдущий метод с использованием svg.
Разница в том, что вместо нашего текста clippathмы будем использовать fillизображение. Для этого нам нужно определить patternэлемент и imageвнутренность.
Вот код:
xxxxxxxxxx
1
<svg width="100%" height="100%">
2
<p>
3
<image xlink:href="//www.textures4photoshop.com/tex/thumbs/graffiti-wall-texture-free-1-thumb28.jpg"></image>
4
</pattern>
5
<text x="0" y="0.8em" width="100%" textlength="650" class="headline">Grafitti</text>
6
</svg>
Вот и все. Вы можете изменить используемый шрифт, указав его в CSS. Вот конечный результат и полный код:
Метод 4 - Использование mask-imageс текстурой PNG для создания текстового эффекта штампа
Для этого метода вам понадобится текстура с прозрачностью. Итак, что-то вроде этой гранжевой текстуры PNG будет работать просто отлично.
Код HTML для этого метода применения текстуры к тексту аналогичен другим методам:
HTML
xxxxxxxxxx
1
<div>
2
<h1 class="stamp-text">STAMP CSS</h1>
3
</div>
Но CSS немного отличается, так как мы будем использовать mask-imageсвойство CSS:
CSS
xxxxxxxxxx
1
h1 {
2
font-size: 7em;
3
color: red;
4
display: inline-block;
5
font-family: sans-serif;
6
padding: 10px 20px;
7
margin: 40px;
8
transform: rotate(-5deg);
9
}
10
.stamp-text {
12
border: 10px solid red;
13
mask-size: contain;
14
mask-image: url("//www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png"); mask-image: url("//www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png");
15
mask-image: url("//www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png");
16
mask-image: url("//www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png");
17
mask-image: url("//www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png");
18
}
mask-imageСвойство указывает изображение с прозрачностью , которая будет выступать в качестве маски. Таким образом, если изображение прозрачно, элемент, к которому применяется маска, также будет прозрачным.Для H1элемента я добавил небольшое вращение, чтобы придать ему больше эффекта текстового штампа. Конечный результат и полный код выглядят так:
Метод 5 - Добавление текстуры на текст с canvasнебольшим JavaScript
С этим методом нам придется использовать немного JavaScript и немного творчества. Не волнуйся, это всего лишь несколько строк.
Идея состоит в том, чтобы создать HTML5 canvasи нарисовать текст с текстурой. Чтобы сделать вещи более удобными, мы собираемся использовать CSS для настройки изображения текстуры. Кроме того, текст, который мы собираемся нарисовать на холсте, будет взят из самого элемента canvas. Мы можем поместить текст в элемент canvas, потому что браузер просто проигнорирует его.
Вот HTML-код:
HTML
xxxxxxxxxx
1
<canvas id="canvas" width="1000" height="300" > ROCK TEXT </canvas>
К которому мы добавляем этот простой код CSS:
CSS
xxxxxxxxxx
1
canvas {
2
font-size: 10em;
3
font-family: sans-serif;
4
font-weight: bold;
5
background-image: url(//www.textures4photoshop.com/tex/thumbs/rocky-mountain-texture-seamless-thumb31.jpg);
6
background-size: 0 0;
7
}
Настройки шрифта и фона не влияют непосредственно на холст.
Мы будем использовать их в коде JavaScript. Так что, если мы захотим изменить шрифт или изображение текстуры, мы изменим только CSS.
Обратите внимание, что я установил на background-size0. Я сделал это, потому что я не хочу, чтобы холст имел фон. Мне нужно только background-imageсвойство для использования в CSS.
Настоящее волшебство происходит в коде JavaScript:
JavaScript
xxxxxxxxxx
1
var canvas = document.getElementById("canvas");
Код довольно прост. Мы используем, getComputedStyleчтобы получить изображение текстуры и информацию о шрифте из CSS.
Затем мы просто загружаем изображение, а когда оно загружается, мы fillTextпишем текст, используя изображение в качестве шаблона. Текст, который мы пишем на холсте, взят из элемента canvas с помощью canvas.textContent.
Это оно! И результат выглядит так:
Заключение
Поздравляем! Вы только что узнали, как добавить текстуру к тексту, используя CSS и HTML.
Дальнейшее чтение
Тенденции и технологии веб-разработки на 2020 год
Использование CSS: введение в основы