Hvordan man tilføjer drop- og tekstskygger i Dreamweaver - dummies

Du kan forbedre dine designs i Dreamweaver og give dine sider større dybde ved at tilføje dropshadows 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 forgrunds- og baggrundsfarverne mangler kontrast.

Kredit: Foto af iStockphoto. com

Dreamweaver CC giver bedre support og integration af CSS3 drop skygger og tekstskygger fra det nye CSS Designer panel.

Du kan oprette klasse- eller ID-stilarter med tekstskygger, og du kan tilføje tekstskygger til eksisterende HTML-elementer ved at definere en tagstil, som f.eks. Overskriften 1 stil set her. CSS3-koden, der opretter denne tekstskygge, er

h1 {tekstskygge: 2px 2px 2px # 000;}

Tallene i koden angiver, at tekstskyggen skal udvide 2 pixels til højre og 2 pixels under tekst med 2-pixel uskarphed. Desuden oprettes 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:

• Horisontal og Lodret : De første to talværdier er påkrævede, og angiv vandret og lodrette forskydninger - den afstand, som dropshadowen strækker sig under teksten (lodret ) og til højre for teksten (vandret).

• blurradius : Den tredje værdi angiver mængden af ​​uskarphed i skyggen. Hvis du ikke inkluderer blurradius, er standardværdien 0, hvilket gør, at skyggen vises som en solid farve.

• farve : Den fjerde værdi angiver farven på skyggen og kan defineres ved hjælp af en hexadecimal farvekode eller en RGBa farvekode.

Valg af en RGBa-farve til indstillingen Farve giver dig større kontrol over skyggens udseende, fordi du kan tilføje gennemsigtighed.

Du kan tilføje en tekstskygge ved hjælp af panelet Egenskaber nederst på CSS Designer panelet. Det gør du ved at følge disse trin:

1. Rul ned til sektionen Tekst-skygge i panelet CSS Designer Properties.

2. Indtast størrelsen af ​​den skygge, du vil vise, ved hjælp af H-skygge (vandret) og V-skygge (lodret) felter.

3. Tilføj mængden af ​​sløring, du vil have til din tekstskygge, ved at indtaste en størrelse i feltet Blur.

4. Klik på farvebrønden og vælg den farve, du vil bruge i tekstskyggen.