Блог старого компьютера

Блог старого компьютера


Главная html & css Стильные заголовки на CSS

Стильные заголовки на CSS

29.04.2013 11:53 Администратор html & css
Печать PDF
Давно ничего нового не писал, не потому что лень, а потому что совершенно не было времени, сейчас конечно времени тоже нету, но написать пару строк я думаю нужно. Сегодня вы поговорим о том как используя нашу смекалку верстальщика сделать довольно интересные, стильные и красивые заголовки. Как обычно сложного ничего нету, единственное о таком украшении заголовков нужно было просто догадаться. 

Кстати порой довольно похожие заголовки нам рисует дизайнер, а мы в свою очередь смотрим на него как баран на новые ворота, и скорее всего делаем похожий заголовок картинкой, что совершенно не правильно (заголовок довольно важен для  seo). Не будем вести долгие дисскуссии и перейдем неприменно к оформлению нашего заголовка используя css.

<style>
body{

font-family:Tahoma;
font-size:13px;
}

h1{
margin-bottom:40px;
font-weight:normal;
position:relative;
}

h1 span{
position:absolute;
background:white;
top:5px;
opacity:0.6;
left:0px;
width:100%;
display:block;
height:15px;

}
</style>

<h1>Добавить организацию<span></span></h1>

 Как видите ничего сложного на самом делел тут нету, в коде мы используем блок с прозрачностью который накладываем на верхние края букв. Вот сообственно и весь секрет.

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

Креативте, размышляйте и все у вас получится!

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?