Du kan forbedre dine designs i Dreamweaver og give dine sider større dybde ved at tilføje skygger til billeder,
tags og andre elementer. Tilføjelse af tekstskygger gør dine ord lettere at læse, især hvis dit design har en kompleks baggrund, eller hvis forgrunden og baggrundsfarverne mangler kontrast.
Kredit: Foto af iStockphoto.com
Dreamweaver CC giver bedre understøttelse og integration af CSS3-dropskygger og tekstskygger fra det nye CSS Designer-panel.
Du kan oprette klasse- eller ID-stile med tekstskygger, og du kan tilføje tekstskygger til eksisterende HTML-elementer ved at definere en tag-stil, såsom overskrift 1-stilen, der ses her. CSS3-koden, der skaber den tekstskygge, er
h1 {text-shadow: 2px 2px 2px #000;}
Tallene i koden angiver, at tekstskyggen skal strække sig 2 pixels til højre og 2 pixels under teksten med en 2-pixels sløring. Derudover skabes skyggen med farven sort, angivet med den forkortede hexadecimale farvekode #000.
Når du opretter regler for tekstskygger, kan du angive op til fire værdier:
-
vandret og lodret : De første to talværdier er påkrævet og angiver de vandrette og lodrette forskydninger — den afstand, som skyggen strækker sig under teksten ( lodret ) og til højre for teksten (vandret).
-
sløringsradius : Den tredje værdi angiver mængden af sløring i skyggen. Hvis du ikke inkluderer sløringsradius, er standardværdien 0, hvilket får skyggen til at fremstå som en ensfarvet.
-
farve : Den fjerde værdi angiver farven på skyggen og kan defineres ved hjælp af en hexadecimal farvekode eller en RGBa-farvekode.
Hvis du vælger en RGBa-farve til indstillingen Farve, får du større kontrol over skyggens udseende, fordi du kan tilføje gennemsigtighed.
Du kan tilføje en tekstskygge ved at bruge panelet Egenskaber i bunden af CSS Designer-panelet. For at gøre det skal du følge disse trin:
Rul ned til Tekst-Shadow-sektionen i panelet CSS Designer Properties.
Indtast størrelsen på den skygge, du vil vise, ved hjælp af felterne H-skygge (vandret) og V-skygge (lodret).
Tilføj den mængde sløring, du ønsker for din tekstskygge, ved at indtaste en størrelse i sløringsfeltet.
Klik på farvebrønden, og vælg den farve, du vil bruge i tekstskyggen.
![Sådan tilføjes drop- og tekstskygger i Dreamweaver]()