Вторник, 15 Мая 2012 12:58

Маска при помощи CSS

Written by 
Оцени эту запись
(2 Голоса)

В этой статье я расскажу как сделать аналог маски при помощи css. Тексту можно задавать только цвет, но нельзя задать фон. А если сильно нужно? То это можно обойти. Ведь главное создать видимость! мы сделаем видимость фона для текста. При этом сам текст не будет картинкой. 

 

Будем делать такую штуку:

 

 

Текст при этом будет просто прописан в блоке. Его можно менять, можно выводить динамически. Рисунок зависит только от фантазии.

 

Базовый HTML:

 

<div style="padding: 20px 0; color: #7d26cd; position: relative; font-size: 170px; font-weight: bold;">Маска CSS</div>

 

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

 

<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: url(http://kate-land.net/images/stories/img-masc.png);"></div>

 

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

 

 

Смотрим результат:

 

Маска CSS
 

 

 

<div style="padding: 20px 0; color: #7d26cd; position: relative; font-size: 140px; font-weight: bold; width: 760px; height: 140px; line-height: 140px;">
Маска CSS
<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: url(http://kate-land.net/images/stories/img-masc.png);">
&nbsp;</div>
</div>
 
 
Можно рассмотреть еще такой вариант:
 
 
 
Здесь измениттся только фоновый рисунок. Но можно в HTML попробовать сделать другой текст. Картинку для фона нужно вырезать так, чтобы при ее повторе получался нужный рисунок. Или же фоном можно поставить большой рисунок.
 
 
Делаем маску
 
 
 
 
 
<div style="padding: 20px 0; color: #7d26cd; position: relative; font-size: 140px; font-weight: bold; width: 760px; line-height: 140px;">
Делаем маску
<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: url(http://kate-land.net/images/stories/img-masc2.png);">
&nbsp;</div>
</div>
 
 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов