Photoshop эффекты с текстом на CSS

5 эффектов с текстом созданы с использованием png картинок на заднем плане.

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

Структура HTML

Структура html для этого примера выглядит следующим образом — заголовок (элемент html <h1>), в котором находится текст для отображения, содержит также и пустой элемент <span>, который и будет использоваться для заливки.

Правила CSS

Для элемента h1 указываются: ширина, высота и стиль текста. Для span> переопределяются следующие свойства: он становится блочным, указывается абсолютное позиционирование и место расположения, способ заливки.
Таким образом он перекрывает фон текста изображением, так и получается Photoshop эффект.

Примеры

Заметка: Не работает в Internet Explorer 6 из-за отсутствия поддержки прозрачных png файлов.

Скачать примеры с css.flepstudio.org

Бесплатный zip файл с примерами содержит html, ccs стили, изображения для каждого эффекта.

Скачать


Оставить комментарий