[Anelit]

Хочу у изображения(картинки) сделать тень, в книжках приведенны примеры как-то с помощью таблицы и фоновых рисунок, с помощью стилей и слоёв, но какой вариант/способ является альтернативой, который бы работал правильно и Мозиле и Опере и в Експлоере? Если есть, то можно практический пример создание тени у изображения.
Спасибо.

[MasMaX]

Существует несколько способов создания теней для текста. Вот некоторые из них:
1.Нарисовать в графическом редакторе. Достоинства и недостатки такого способа очевидны.
2. «Стандартный» путь.

SPAN.glow {
background: white;
color: white;
text-shadow: black 0px 0px 5px;
}

Говорят, что эта конструкция должна работать, но, к сожалению, в настоящее время браузеры «идут в сад».
3. Фильтры. Достаточно мощная вещь, но «в сад идут» стандарты, а реально работает только в IE.
4. CSS: позиционирование боксов. Самый удобоваримый способ.

	html:
<р class="h1">TEXT and SHADOW. Пример текста с тенью. <span>TEXT and SHADOW. Пример текста с тенью.</span></p>
css: 
h1{
text-align: left;
font-size: 36px;
line-height: 36px;
font-family: Georgia, serif;
font-weight: bold;
position: relative;
color: #999; }
.hi span {
position: absolute;
top: -4px;
left: -3px;
padding-right: 3px;
color: #000; }

Позиционируешь содержимое тэга <span> относительно параграфа со смещением на 4рх вверх и Зрх влево. Величину padding-right задаешь равной смещению влево, иначе возможна ситуация, когда тень «обгонит» текст. Так как дублирование текста — не самый лучший вариант для пользователей текстовых или устаревших браузеров, то «дубль» рекомендуется добавлять скриптами {javascript или определять браузер посетителя на стороне сервера}.
4. CSS: генерируемое содержимое. Следующие два примера отнюдь не лучше предыдущего, просто было интересно поиграть свойствами :before и :after. Отличия: во-первых, они не работают в IE, во-вторых, в качестве «дубля» выступает значение атрибута, что исключает повтор текста в «академическом дизайне», хотя пользователь и получит при этом лишние байты.

 html: 
<р class="h2">TEXT and SHADOW.
Пример текста с тенью.
<span title="TEXT and SHADOW.
Пример текста с тенью.">
</span></p>
css: 
.h2 {
text-align: left;
font-size: 36px;
line-height: 36px;
font-family: Georgia, serif;
font-weight: bold;
position: relative;
color: #000; }
/* Дальше IE уже ничего не увидит, ему отдаем текст без тени */
htmbbody .h2 {color: #999;} .h2 span{
position: absolute;
left: -Зрх;
top: -4px;
padding-right: Зрх;
color: #000; }
 .h2 span:after {
content: attr{title}; }

А теперь сделаем две тени.

 html: 
<р class="h3" title="TEXT
and SHADOWS">TEXT and SHAD-
0WS</p>
css: 
.h3 {
font-size: 36px;
font-style: italic;
line-height: 36px;
font-family: Georgia, serif;
font-weight: bold;
color: #000; }
/* Дальше IE уже ничего не увидит, ему отдаем текст без теней */
html>body .h3 {color: #999;}
.h3:after {
content: attr{title};
color: #000;
display: block;
margin-top: -40px;
/* -76px для двухстрочного текста, -112px для трехстрочного и т.д. {шаг = line-height} */
margin-left: -Зрх; 1 .h3:before{
content: attr{title};
color: #ccc;
display: block;
margin-bottom: -40px; /* значение также зависит от количества ctdok */
margin-left: Зрх;

Недостаток последнего способа: жесткое позиционирование генерируемого содержимого, зависящее от количества строк в тексте. И еще одно решение.

 html: 
<div class="zag">Knyбы</div>

Javascript:
Function getElementsByClassName{node, classname} {
var a = [];
var re = new RegExp{'\\b' + classname + 'W};
var els = node.getElementsByTagName{"*"};
for {var i=0,j=els. length; kj; i++}
if {re.test{els[i].className}} a.push{els[i]}; return a;
}
function shadowText{originalClass, shadowClass} {
if {typeof disableShadowedText != undefined'} return;
var els = getElementsByClassName {document, originalClass};
for {i=0;kels.length;i++} {
var text = els[i].innerHTML;
els[i].className = shadowClass;
els[i].innerHTML = text+'<div class="'+originalClass+" style="position:absolute;">' + text + '</div>';
} 
}
${document}.ready{function{} { shadowText{'zag','zag_shadow'}; 1};
css: 
.zag {
определяем, как выглядит заголовок
}
.zag_shadow {
а тут, — как выглядит его тень
}

Понятно, что собрать все доступны! примеры нереально, мы лишь наугад но показали возможности CSS в решении наиболее актуальных проблем.

Источник: журнал "Хакер Спец", 12-2006.

[Anelit]

MasMaX, спасибо за инфу!

[kost]

http://alistapart.com/articles/cssdrop2/

[alt5000]

Вы можете еще попробывать использовать фильтры.

[kost]

alt5000, чукча не читатаель, чукча писатель?