321 5 эффектов с текстом созданы с использованием png картинок на заднем плане.
Таким образом, на этом примере, мы вам покажем, как, с помощью простых CSS правил, создавать текстовые заголовки с заливкой текста различными изображениями.
Структура HTML
Структура html для этого примера выглядит следующим образом — заголовок (элемент html <h1>), в котором находится текст для отображения, содержит также и пустой элемент <span>, который и будет использоваться для заливки.
|
1 |
<h1>ERBA<span></span></h1> |
Правила CSS
Для элемента h1 указываются: ширина, высота и стиль текста. Для span> переопределяются следующие свойства: он становится блочным, указывается абсолютное позиционирование и место расположения, способ заливки.
Таким образом он перекрывает фон текста изображением, так и получается Photoshop эффект.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
h1{ /*width and height of the element*/ width:450px; height:200px; /*relative position so to be able next to position the span element in an absolute mode*/ position:relative; /*background-color of the element*/ background-color:#006600; /*css text style*/ font-family:Verdana; font-size:100px; color:#99CC00; /*vertical and horizontal align of text*/ text-align:center; line-height:200px; } h1 span{ /*convert the span element from inline to block element so to be able next to specily width, height, position*/ display:block; /*100% width and height equal to width and height of its parent element (h1 in this case)*/ width:100%; height:100%; /*remove the span element form its natural flux*/ position:absolute; /*span element placed at the top left of its parent element (h1 in this case)*/ top:0; left:0; /*transparent png used as background image*/ background:url(grass.png) no-repeat; } |
Примеры
Заметка: Не работает в Internet Explorer 6 из-за отсутствия поддержки прозрачных png файлов.
Скачать примеры с css.flepstudio.org
Бесплатный zip файл с примерами содержит html, ccs стили, изображения для каждого эффекта.
