WN - CSS med skugga

Svar på din fråga: Eftersom hans kod är gjord så man deklarerar två segment innehållande varsin text så, ja. Du måste deklarera i htmlen eller i css för varje text. Det är så jag utläser det
Det är väldigt enkelt. Det är så att det är CSS2, man använder CSS lager istället för tables.

Kod:

#shadow {

    font-family: Verdana; ## Det typsnittet du vill ha .

        font-size: 1.6em;     ## Storlek på det.

        font-weight: bold;

        color: #c60;        ## Färgen.

Okej där är koden för den "stilen" som skall finnas i diven "shadow".
Men den koden är inte komplett för att skapa skugga. Förklarar efter html episoden.

html koden skall se ut så här:

Kod:

<html>

....

... ## det vanliga som ligger här (head etc etc)

..

<body>

<div id="shadow"> ## Här börjar det intressanta, om du inte känner till hur CSS2 och uppåt funkar, läs på W3C eller google.

Texten med skugga

</div>

Okej, den CSS koden kommer bara ge dig Verdana 1.6em stor, inget kul eller hur?

Därför kommer detta in i bilden:

Kod:

div[id=shadow] {

        color: #000 !important;

        }

#shadow:after {

        content: 'Web-Graphics'; ## Vilket innehåll som det skall innehålla (lägg din egna text).

        color: #c60;           ## Färg.

        display: block;         ## Bry dig inte.

        text-indent: -0.1ex;    ## Här skapas skugg effekten genom förskjutning

        margin-top: -1.3em;    ## Här skapas en skugga genom att flytta ner texten lite, bra va? 

        }

All CSS kod + XHTML exempel som visar "hur det skall se ut"

CSS (filens namn 'style.css', skall ligga i samma mapp som 'index.ZYX')

Kod:





#content {

        position: absolute;

        height: 700px;

        width: 500px;

        padding: 15px;

        border: 1px dashed #333;

        background-color: #eee;

        }



#shadow {

    font-family: Verdana; 

        font-size: 1.6em;     

        font-weight: bold;

        color: #c60;        



 div[id=shadow] {

        color: #000 !important;

        }



#shadow:after {

        content: 'Text'; 

        color: #c60;           

        display: block;         

        text-indent: -0.1ex;    

        margin-top: -1.3em;    

        }

HTML

Kod:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

 <head>

 <title> Exempel </title>

 </head>

<style type="text/css" media="all">

@import "style.css";

</style>

<body>

 <div id="content">

 <div id="shadow">

  Text 

 </div>

 </div>

</html>

OBS! Kan förekomma någon felaktighet i koden - rakt av utan testning, men jag tror det skall funka

Bara Kåpy and Päjst, sedan leka med det.

Lycka Till!

MvH Holm
42. Productions

PS. Tror jag missuppfatta frågan, men lämnar inlägget. Någon kanske vill ha en genomgång hur man använder effekten. DS