Как сделать заголовок красивым


Как сделать заголовок красивым

Как сделать заголовок красивым

Как сделать заголовок красивым



Попросили тут сделать для промо-сайта несколько заголовков на CSS и чтоб обязательно красивые. Пересмотрев кучу дизайнерских изысканий сделал вот такие:
HTML:
<div class="hdr"> <span>P</span><span>r</span><span>o</span><span>t</span><span>o</span> <div><span>C</span><span>o</span><span>d</span><span>e</span><span>r</span></div> </div>
CSS:
.hdr { font-family: Verdana; font-size: 3em; font-weight: bold; color: #FFFFFF; letter-spacing: -0.11em; text-shadow: -0.05em 0px 0.07em #000000; } .hdr div { display: inline-block; color: #F00000; }
Каждую букву пришлось заключить в отдельный тэг для того, чтобы text-shadow накладывался поверх предыдущей буквы, иначе он наложится на всю надпись целиком и эффекта не получится.

ProtoCoder


HTML:
<div class="hdr">ProtoCoder</div>
CSS:
.css3header2 { font-family: Verdana; font-size: 2.5em; font-weight: bold; text-align: center; color: #FFFFFF; text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); }

Скачать CSStext.html

Все файлы демки одним архивом


Источник: http://protocoder.ru/css/hdr


Как сделать заголовок красивым фото


Как сделать заголовок красивым

Как сделать заголовок красивым

Как сделать заголовок красивым

Как сделать заголовок красивым

Как сделать заголовок красивым

Как сделать заголовок красивым

Как сделать заголовок красивым

Читать топ новости: