12:09
С помощью свойства CSS "фон-клип:текст" . мы добавили фоновое изображение в текстовые элементы!
Смотрим ДЕМО
Установка:
Первый вариант!
Вставляем этот код между head и /head:
Code
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/css/demo.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/css/style1.css" />
Ставим туда, где будет наш эффект:
Code
<div class="it-wrapper">
<h3 id="it-text">Andreas</h3>
</div>
<!-- adds class it-animate to h3 -->
<a id="it-toggle-button" class="it-toggle-button" href="#">Animate!</a>
</div>
Второй вариант!
Ставим между head и /head:
Code
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/css/demo.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/css/style2.css" />
Ставим туда , где хотим видеть наш эффект:
Code
<div class="it-wrapper">
<h3 id="it-text">Grande</h3>
</div>
<a id="it-toggle-button" class="it-toggle-button" href="#">Animate!</a>
</div>
Третий вариант!
Этот скрипт ставим в head и /head:
Code
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/css/demo.css" />
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/css/style3.css" />
Вставляем туда , где хотим лицезреть наш эффект!
Code
div class="it-wrapper">
<h3 id="it-text">Lovely!</h3>
</div>
<a id="it-toggle-button" class="it-toggle-button" href="#">Animate!</a>
</div>
Из прикрепленного архива заливаем все файлы в соответствующие папки!
