Как поместить текст в картинку css
Перейти к содержимому

Как поместить текст в картинку css

  • автор:

3 трюка для добавления текстуры в ваш текст с CSS и SVG

Вероятно, вы знакомы с использованием такой техники Photoshop, когда в качестве маски изображения выступает текст; это лучший известный способ добавить текстуры или даже фон изображения на ваш текст. Далее вы можете использовать этот текст в виде изображения на вашем веб-сайте; а ведь было бы здорово, если бы мы смогли наложить такой же эффект, используя HTML и CSS? Хорошие новости — мы можем!

CSS представила такие свойства как background-clip и mask-image, которые вы можете использовать для создания схожих эффектов, для которых раньше использовался Фотошоп. Кроме того, для этого вы также можете использовать SVG.

Сегодня мы рассмотрим эти опции и даже сделаем несколько простых анимаций. Если вы хотите продолжить самостоятельно, один на один с кодом, вы можете загрузить исходные файлы здесь.

Поддержка браузерами

Как и следовало ожидать, некоторые из этих свойств, которые мы будем использовать, поддерживаются не повсеместно. Это означает, что они не будут работать в браузерах вроде IE и Firefox.

Создание фонового подвижного изображения текста с помощью BACKGROUND-CLIP

Первая опция, которую мы рассмотрим, это свойство background-clip. Это свойство определяет, будет ли фон продлён за границы или нет. Оно позволяет тексту определённого элемента обрезать изображение.

HTML

Наш макет — это просто h1 с классом bgClip:

Clip Text

А теперь давайте добавим магии в CSS…

CSS

Мы добавим текстуру ночного неба к нашему изображению. Мы также убедимся, что текст отображён со сглаживаем, используя font-smoothing. Обратите внимание, что для этой работы цвет текста должен быть прозрачным, поэтому мы также используем text-fill-color:transparent.

.bgClip < background:url('../images/clouds.jpg'); background-repeat:repeat-x; background-position:0 0; font-size:200px; text-transform:uppercase; text-align:center; font-family:'Luckiest Guy'; color:transparent; -webkit-font-smoothing:antialiased; -webkit-background-clip:text; -moz-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin:0;

А теперь просто добавим немного анимации, чтобы сделать фон более привлекательным:

-webkit-animation:BackgroundAnimated 15s linear infinite; -moz-animation:BackgroundAnimated 15s linear infinite; -ms-animation:BackgroundAnimated 15s linear infinite; -o-animation:BackgroundAnimated 15s linear infinite; animation:BackgroundAnimated 15s linear infinite; > @keyframes BackgroundAnimated < from < background-position:0 0 >to < background-position:100% 0 >> @-webkit-keyframes BackgroundAnimated < from < background-position:0 0 >to < background-position:100% 0 >> @-ms-keyframes BackgroundAnimated to < background-position:100% 0 >> @-moz-keyframes BackgroundAnimated < from < background-position:0 0 >to < background-position:100% 0 >>

А вот и результат:

Клипуем текст с использованием SVG

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

SVG

Видите, я использую HTML элемент img для клиппинга изображения.

     SVG Text    

Хотя я здесь использую .jpg, вы можете использовать другие форматы изображений или даже видео.

CSS

А теперь всё, что нам нужно, это использовать свойство clip-path для наложения на SVG контуров видимого изображения:

.svgClipped

А вот и результат:

Тест под маской с помощью MASK-IMAGE

Последняя техника, которую мы собираемся рассмотреть, — это текстурирование текст с помощью mask-image. Базовая функциональность этого свойства в том, что оно будет вырезать область текста, которая видна в соответствии с прозрачностью.

HTML

Всё, что нам нужно, это один элемент h1 обёрнутый в div:

 

Mask Text

CSS

Чтобы наложить маску на изображение с помощью текста, мы будем использовать -webkit-mask-image, который задаст изображение и мы также добавим клёвый text-shadow для улучшения вида. Наконец, я хочу внести дополнительную гладкость при эффекте наведения, когда весь текст становится видимым (просто потому что мы можем):

#maskText h1 < font-size: 200px; font-family: 'Lilita One', sans-serif; color: #ffe400; text-shadow: 7px 7px 0px #34495e; text-transform: uppercase; text-align: center; margin: 0; display: block; -webkit-mask-image: url('../images/texture.png'); -webkit-transition:all 2s ease; -moz-transition:all 2s ease; -o-transition:all 2s ease; transition:all 2s ease; >#maskText h1:hover < -webkit-mask-image: url('../images/texture-hover.png'); cursor: pointer; color: #ffe400; >

А вот и результат:

Заключение

Отлично! Вы только что научились новым трюкам с текстом. Эти навыки сберегут ваше время и отгородят вас от Фотошопа. Ещё важнее то, что они динамические (их можно менять «на лету»), в отличие от того же jpg.

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

Равномерный фон под текстом

Одно из модных направлений веб-дизайна последних лет — оформление заголовков контрастным фоном. Например, вот так: exampleПростая, на первый взгляд, задача решается не так уж и просто: первая же мысль «добавить padding» натыкается на то, что отступ добавляется исключительно в начале и в конце текста, игнорируя переносы: paddingБлиже всех к решению задачи когда-то подошёл akella, добавив border у родительского элемента. Но проблема не решена на 100%: в конце первой строки (место, где переносятся слова) всё равно нет отступа. Решения остальных ребят, которые присылались мне в твиттер, грешили одной и той же проблемой: нужно точно указать место разрыва строк. В простейшем случае, когда нужно добавить небольшой отступ, решение оказалось до боли простым. Есть одно «паразитное» CSS-свойство, от которого кодеры обычно избавляются — это свойство outline . Его особенность заключается в том, что во всех браузерах (по крайней мере в тех, в которых я проверял: Safari 4, Firefox 3.5, Opera 10, IE8) контур outline точно повторяет границы текстового элемента. Соответственно, эта строчка кода полностью решает нашу проблему:

span.uniform-bg

firefox

Не обошлось без ложки дёгтя: в данном случае «плохим мальчиком» оказался Firefox. Во-первых, он иногда рисует контур с небольшим отступом от границ текста, а во-вторых — прочерчивает его между строками, перекрывая текст: Первая проблема решается довольно просто: достаточно немного «втянуть» контур с помощью CSS-свойства outline-offset (либо -moz-outline-offset , эксклюзивно для Firefox), вторая — добавлением ещё одной обёртки с position:relative , чтобы поднять текст над контуром. Итоговое решение выглядит так:

 .uniform-bg < background:red; position:relative; outline: red solid 0.3em; -moz-outline-offset:-0.04em; >.uniform-bg span 

Оно не работает в IE6—7, в них не поддерживается свойство outline . Но, так как это исключительно декоративная задача, можно объединить её с решением от akella и получить почти идеальное решение. UPD: читатель Roman указал на баг в отрисовке фона в месте переноса строк в IE6—7. Немножко доработать напильником — и получится вполне приличное решение (обновил пример). Лично меня такой способ полностью не устраивает, так как есть ограничения на высоту строки (при больших значениях появляются проблемы между строками) и толщину контура (слишком толстый контур выглядит очень некрасиво). Предлагаю читателям подумать вместе со мной над более гибким решением, а также — совсем крутота — как такое же провернуть с фоном-картинкой.

Второй способ (upd)

Тот же читатель Roman предложил ещё один способ решения задачи. Он основан на смещении трех слоёв относительно друг друга: например, если отступ равен x , то второй слой смещается на 2x вправо, а третий на –x , влево: method2Его можно немного упростить, убрав один слой и добавив левый border у контейнера. Способ более гибкий, чем с outline (который, как выяснилось, не очень дружит с Opera). На основе него я хотел сделать решение с фоновой картинкой, но столкнулся проблемой: вместе с переносом строк переносится и фон, то есть во второй строке фон начинается там же, где заканчивается в первой: bg-problem

37 комментариев

19 января 2010

Как вставить картинку на страницу сайта

Как вставить картинку в HTML

Здесь описан самый моментальный и простой способ, если Вам нужно добавить картинку на сайт уже вот прямо сейчас или даже чуть раньше. А академически правильный способ добавления изображения на страницу сайта описан в этой статье — "Как правильно вставить картинку на сайт".

Также, есть отдельная статья "Как правильно выровнять картинку на странице сайте" (слева, справа, по центру и т.д.).

Итак, для того, чтобы добавить картинку в текст сайта в HTML-коде используется специальный тег . То есть Вам нужен HTML-файл, который отвечает за нужную страницу сайта. Если у Вас одностраничный сайт, то это файл index.html.

В том месте HTML-файла, где у Вас будет картинка, вставляете .

Сама картинка у Вас должна где-то лежать. Лучше ее разместить в папке сайта. Обычно для картинок используется папка img.

Например, есть картинка image.jpg. Тогда в Вашем нужно указать путь к этой картинке:

В src пишется путь до нужной картинки. В данном примере картинка называется image.jpg и лежит в папке img. Но это еще не всё.

У тега img есть еще необходимый атрибут alt. Атрибут alt это сокращение от alternative, и это означает, что, если картинка вдруг не подгрузится на сайте, то вместо нее будет показан текст из атрибута alt. Пример:

Это картинка

Текст в атрибуте alt нужно писать по смыслу картинки. Это еще и помогает при SEO-продвижении сайта.

Если Вы не укажете alt, то сайт не сломается и картинка будет отображаться. Но существуют стандарты разработки сайтов, и их лучше придерживаться, чтобы сайту доверяли поисковые системы. Атрибут alt лучше использовать всегда.

Еще обратите внимание, что у нет закрывающего тега . Помните об этом.

Раньше, чтобы задать ширину и высоту изображения использовались атрибуты тега . Теперь же это делают через CSS. Если Вы не знаете, что такое CSS и что такое CSS-файл, то делайте так:

В тег img добавлен атрибут style="width: 100px; height: 50px". Здесь width это ширина в пикселях, а height — это высота.

Оформление сайта: как работать с текстом и изображениями

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

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

Текст поверх изображения

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

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

Проектная мастерская R3, сайт: pmr3.ru

Обложка на сайте varenye.com

Обложка лонгрида Cycling’s Road Forward от Washington Post

Никита Обухов
Основатель Tilda Publishing

В обложках фотография является фоном, она должна соответствовать тематике сайта, но главное — это текст. Изображение не должно спорить с текстом, оно отвечает за создание правильной атмосферы. Текст должен хорошо читаться.

В обложках текст чаще всего располагают по центру. Поэтому лучше подбирать фотографию, у которой нет мелких деталей посередине — там, где будет заголовок. Это может быть простая фигура, например, стена дома или открытое пространство на пейзаже. Что-то однородное. Хорошо работают белые обложки — со светлой фотографией на фоне. Можно задать тексту цвет, чтобы создать яркий стиль.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *