Помогни ни да направим Uroci.net по - богат! Добави урок

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

nighteagle   трудност:    видян: 10657

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

  1. Създаваме два 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>
    htmlShadow1
  2. Добавяме още един надпис, който ще послужи за сянка на първия. Избираме цвят, който е нещо средно между цвета на текста и цвета на фона. Който има желание разбира се може да експериментира. Двата текста са подравнени по височина, затова 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>
    htmlShadow2
  3. На текста, който ще е основен добавяме 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>
    htmlShadow3
  4. За да достигнем до крайния ефект трябва да отместим горния текст с по 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>
    htmlShadow4

Това са общо взето стъпките. Тестван е със 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.

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


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com