-Поиск по дневнику

Поиск сообщений в mycss

 -Подписка по e-mail

 

 -Постоянные читатели

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 18.09.2009
Записей:
Комментариев:
Написано: 210


контуры у букв

Понедельник, 26 Октября 2009 г. 16:26 + в цитатник
карты все записи автора

пытался сегодня сделать контур вокруг текста,


нашёл 3 способоа, -



1 text-shadow: black 0px 0px 5px

2 filter:glow(color=black,strength=3)


3. джиквери плагин http://plugins.jquery.com/project/textshadow/



но оба эти способоа не работают толком ни в ие6 ни в фф

в итоге нашёл кроссбраузерное решение, его идея в большом

количестве слоёв и подгоне их друг под друга..

http://www.designdetector.com/demos/cross-browser-text-glow-demo.html



в итоге задачу я решил в 6 слоёв

#header .main /*блок основной*/
{
z-index: 2;
height: 276px;
position:relative;
padding-right:
}

#header .main img /*картинка в нём*/
{
position:relative;
left:0;
top:0;
}

#main_text /*текст который должен перемещаться в этом блоке и не вылезать за границы*/
{
position:absolute;
right:0;
top:0;
z-index:2;
_padding-right:2px;

}


#main_text p.e /*строка вокруг которой обводка*/
{
text-shadow: 3px 3px 5px red;
font:bold 25px Tahoma;
color:#fff;
text-shadow: 0 0 3px #000;
position:absolute;
margin-top:1px;
margin-left:1px;
z-index:2
}

#main_text p.a /*обводка*/
{
text-shadow: 3px 3px 5px red;
font:bold 25px Tahoma;
color:black;
position:absolute;
margin-top:0;
margin-left:0;

}

#main_text p.b /*обводка*/
{
text-shadow: 3px 3px 5px red;
font:bold 25px Tahoma;
color:black;
position:absolute;
margin-top:0;
margin-left:2px;
}

#main_text p.c /*обводка*/
{
text-shadow: 3px 3px 5px red;
font:bold 25px Tahoma;
color:black;
position:absolute;
margin-top:2px;
margin-left:0;
}


#main_text p.f /*обводка - специально для ие6*/
{
text-shadow: 3px 3px 5px red;
font:bold 25px Tahoma;
color:black;
position:absolute;
margin-top:2px;
margin-left:2px;
}
#main_text p.d /*обводка*/
{
text-shadow: 3px 3px 5px red;
font:bold 25px Tahoma;
color:black;
position:relative;
margin-top:2px;
margin-left:2px;
}


в хтмл

<*div class="main">
<*div id="main_text">

<*p class="e">привет<*/p>
<*p class="a">привет<*/p>
<*p class="b">привет<*/p>
<*p class="c">привет<*/p>
<*p class="f">привет<*/p>
<*p class="d">привет<*/p>
<*/div>
<*img src="img/main.jpg" alt=""/>
<*/div>


ПС чем толще обводка, тем больше стилей для смещения (тоесть слоёв текста), тк образуються зазоры между слоями подложки
Метки:  

 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку