Е това вече е факт!!!
Преди няколко дни я завърших и след известни трудности около одобряването й от страна на google моята тема вече е факт. Вижте я и даже вземете да си я сложите! ]]>
- Създаваме два 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 и навсякъде отместването е еднакво.
Като недостатък на метода може да се отбележи факта, че наместването на текста и сянката става на ръка, което прави невъзможна употребата на този метод в сегашния му вид при динамично генерирани текстове.
Не съм имал време за много тестове, така че може да има бъгове. При такива може да пишете коментари и аз ще се включа при решаването им.
Скрипта е базиран на Flash-интерфейс, с помощта, на който избирате как да изглежда Вашия аватар и един безплатен php-клас, който прави необходимите редакции.
]]>И точно тук можете да си помогнете с http://www.myfonts.com/WhatTheFont/. Страница предлага на посетителите си възможност да “разпознае” шрифт от определена от вас картинка, като анализира текста на нея. Гаранция при този метод също няма, но поне не отнема много време и усилия. ]]>
Съществуват множество техники за реализиране ефекта на прозрачност и полупрозрачност. Използването не gif-файлове е компромисен вариант налагащ ограничени към броя на цветовете, но той е приложим само в случаите на пълна прозрачност. В някой случаи ефект на полупрозрачност може да се постигне и чрез обикновени jpg-файлове, но при този метод доста често се наблюдават „бъгове”.
Еднозначно решение на този проблем няма, или поне аз не съм го открил до момента, но в зависимост от случая подбирам някое от следните решения, който с течение на времето са се оказали най-ефективни според мен.
Решенията описани по-долу са базирана върху употребата на png-файлове и няколко скрипта, който „връщат” прозрачността и полупрозрачност с помощта на DirectX в Internet Explorer 6 и предхождащите го версии на браузъра.
Ако png–файлове са използвани чрез <img>-тагове в HTML -a на сайта употребата на този скрипт е много ефективно и елегантно решение на проблема. Само поставете някъде в <head>-a на вашия сайт този код
и скрипта автоматично ще обходи png-елементите в кода и ще направи необходимото, за да изглеждат „както трябва”.
Ако използвате png–файлове за фон на <div> или други HTML-елементи зададен посредством CSS може да използвате едни от двата варианта на този скрипт. Добавете към елемента, който има png-файл за фон следния стил
В случай, че фона се наслагва няколко пъти (background-repeat:repeat;) скрипта не реаги коректно. Следващите примерни показват разликите между двата варианта на този скрипт.
<div>-a, на който ще сложим фон
фона, който слагаме на <div>-a
резултат ако използваме scale-варианта (фонът се “разтяга” върху цялата площ<div>-a)
резултат ако използваме crop-варианта (фонът се “нанася” само веднъж в <div>-a *)
* При използване на crop-варианта background-position отпада т.е. фонът е винаги в горния ляв ъгъл.
Собствен проект
Адрес: www.airforcebg.com
Дата: Ноември 2007
Участие: Създаване на дизайн, изготвяне на HTML темплейт и изработка на Flash-елементите
Партньори: Петър Воротников (PHP, MySQL)
Tехнологии: HTML, CSS, XML, Flash, ActionScript, PHP, MySQL
]]>