Dreamweaver CS6: Szövegárnyékok hozzáadása a CSS3 segítségével

A Dreamweaver CS6-ban a webtechnológia legújabb CSS3-szabályaival szövegárnyékok hozzáadásával javíthatja a tervezést, és mélyebbé teheti oldalait. Szövegárnyékok hozzáadása megkönnyíti a szavak olvashatóságát, különösen akkor, ha a terv összetett hátterű, vagy ha a háttér és a szöveg színei nem kontrasztosak.

Köszönetnyilvánítás: Paul Gual, istockphoto.com

A Dreamweaver CS6 támogatja a CSS3 szövegárnyékokat, ha a CSS-stílusok panel Tulajdonságok paneljét használja. Létrehozhat osztály- vagy azonosítóstílusokat szövegárnyékokkal, és szövegárnyékot adhat hozzá a meglévő HTML-elemekhez egy címkestílus, például a képen használt címsor 1 stílusának meghatározásával.

A szöveges árnyékot létrehozó CSS3 kód az

h1 {text-shadow: 2px 2px 3px #000;}

A kódban szereplő számok azt jelzik, hogy a szöveg árnyékának 2 képponttal jobbra és 2 képponttal a szöveg alá kell nyúlnia, 3 képpontos elmosódással. Ezenkívül az árnyék fekete színnel jön létre, amelyet a #000 rövidített hexadecimális színkód határoz meg.

Szövegárnyék-szabályok létrehozásakor legfeljebb négy értéket adhat meg:

• Vízszintes és függőleges: Az első két számérték kötelező, és meghatározza a vízszintes és függőleges eltolást – azt a távolságot, amelyet a vetett árnyék a szöveg alatt (vízszintes) és a szövegtől jobbra (függőlegesen) húz.

• Elmosódási sugár: A harmadik érték az árnyékban lévő elmosódás mértékét határozza meg. Ha nem adja meg az elmosódási sugarat, az alapértelmezett érték 0, így az árnyék egyszínűként jelenik meg.

• Szín: A negyedik érték az árnyék színét adja meg, és hexadecimális színkóddal vagy RGBa színkóddal határozható meg.

Szövegárnyékot a CSS-stílusok panel alján található Tulajdonság panel segítségével adhat hozzá, a képen látható módon. Ehhez kövesse az alábbi lépéseket:

Kattintson a Tulajdonság hozzáadása hivatkozásra a CSS-stílusok tulajdonsága panel bal oldalán.

Adja meg a CSS3 stílusszabály nevét, szöveg-árnyékot, vagy válassza ki a stílusszabályt a legördülő listából.

Miután a név megjelenik a bal oldalon, egy kis nyíl jelenik meg a jobb oldalon.

Kattintson a szövegárnyéktól jobbra található nyíl kiválasztásához.

Megjelenik egy doboz.

Adja meg az X és Y eltolást, az elmosódási sugarat és a színt.