Текст със сянка в HTML

nighteagle трудност:

видян: 11399

Наскоро се натъкнах на един скрипт за stroke на текст и се пробвах да направя нещо подобно, тъй като решението, което предлага този скрипт, е доста тежко. Крайният резултат беше до толкова добър, че чак реших да седна и да опиша метода си.

Създаваме два div-а с по един текст във всеки от тях и задаваме цветове. Както ще видите от кода, текста е поставен в span-ове.
```
<body bgcolor="#999999">
	<div>
		<span style="color:#F00; font-size:36px;">Text with shadow</span>
	</div>
	<div>
		<span style="color:#F00; font-size:36px;">Text without shadow</span>
	</div>
</body>
```
Добавяме още един надпис, който ще послужи за сянка на първия. Избираме цвят, който е нещо средно между цвета на текста и цвета на фона. Който има желание разбира се може да експериментира. Двата текста са подравнени по височина, затова top остава на 0px, а left зависи изцяло от дължината на текста, която в нашия случай е 260px.
```
<body bgcolor="#999999">
	<div>
		<span style="color:#600; font-size:36px;">Text with shadow</span>
		<span style="color:#F00; font-size:36px;">Text with shadow</span>
	</div>
	<div>
		<span style="color:#F00; font-size:36px;">Text without shadow</span>
	</div>
</body>
```

На текста, който ще е основен добавяме CSS параметри position, top и left, така че да покрие напълно тъмния текст, който ще играе ролята на сянка.

<body bgcolor="#999999">
	<div>
		<span style="color:#600; font-size:36px;">Text with shadow</span>
		<span style="position:relative; top:0px; left:-260px; color:#F00; font-size:36px;">Text with shadow</span>
	</div>
	<div>
		<span style="color:#F00; font-size:36px;">Text without shadow</span>
	</div>
</body>

За да достигнем до крайния ефект трябва да отместим горния текст с по 1px нагоре и наляво, т.е. намаляваме стойностите на top и left с единица.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Textshadow</title>
</head>

<body bgcolor="#999999">
	<div>
		<span style="color:#600; font-size:36px;">Text with shadow</span>
		<span style="position:relative; top:-1px; left:-261px; color:#F00; font-size:36px;">Text with shadow</span>
	</div>
	<div>
		<span style="color:#F00; font-size:36px;">Text without shadow</span>
	</div>
</body>
</html>

Това са общо взето стъпките. Тестван е със IE7, IE6, FireFox3 и Chrome и навсякъде отместването е еднакво. Като недостатък на метода може да се отбележи факта, че наместването на текста и сянката става на ръка, което прави невъзможна употребата на този метод в сегашния му вид при динамично генерирани текстове. Не съм имал време за много тестове, така че може да има бъгове. При такива може да пишете коментари и аз ще се включа при решаването им.

Можете да намерите този урок и на тази страница

Сподели |

Коментари (3)

Вилорп на 20.03 2009 в 11:31ч.

http://hogwartsbg.com/spisaniya/drynkalo/index.html
тука го пробвах номера, но пир различна резолюция се получава различено отместване. в момента е насторено на 1024х768
Има ли начин да е еднакво при различни резолюции?

Redji на 31.01 2010 в 18:38ч.

Извинявай, колега, но кодът ти е дълъг, а ефектът никакъв.
Да не обсъждаме факта, че подобен начин на добавяне на сянка е напълно недопустим за един професионален сайт.
За хората желаещи да добавят сянка към текста си по напълно "легален" начин препоръчвам използването на CSS свойството text-shadow.

hpstuff на 18.05 2010 в 22:37ч.

Първо @Redji text-shadow не се поддържа от всички браозери все пак това е CSS3 все още (очакваме в скоро време и ie9 като излезне да го поддържа) но популярните версии като ie6,7,8 нямата text-shadow което също е не допустимо за един професионален сайт да не поддържа IE . Колкото до посочения в урока вариянт е нежелателен от гледна точка на това ,че google не харесва саитове с доблирано садържание което е точно това и го приема за спам и не го индексира. Така че решението е само едно image :D.

Текст със сянка в HTML

Коментари (3)

Регистрирайте се, за да добавите коментар