Dreamweaver CS6: Lägga till textskuggor med CSS3 - dummies

Del av Dreamweaver CS6 för Dummies Cheat Sheet

I Dreamweaver CS6 kan du förbättra dina mönster och ge dina sidor större djup genom att lägga till textskuggor med CSS3-regler, senaste inom webbteknik. Lägga till textskuggor gör dina ord enklare att läsa, speciellt om din design har en komplex bakgrund eller om dina bakgrunds- och textfärger saknar kontrast.

kredit: Paul Gual, istockphoto. com

Dreamweaver CS6 innehåller stöd för CSS3-textskuggor när du använder panelen Egenskaper i panelen CSS Styles. Du kan skapa klass- eller ID-stilar med textskuggor och du kan lägga till textskuggor i befintliga HTML-element genom att definiera en taggstil, till exempel rubriken 1-stil som används i bilden.

CSS3-koden som skapar den textskuggan är

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

Numren i koden anger att textskuggan ska sträcka 2 pixlar åt höger och 2 Pixlar under texten med en 3-pixel oskärpa. Dessutom skapas skuggan med färg svart, specificerad av den förkortade hexadecimal färgkoden # 000.

När du skapar regler för textskuggor kan du ange upp till fyra värden:

• Horisontell och vertikal: De två första värdena krävs och specificera de horisontella och vertikala förskjutningarna - avståndet droppskuggan sträcker sig under texten (horisontal) och till höger om texten (vertikal).

• Blurradie: Det tredje värdet anger mängden oskärpa i skuggan. Om du inte inkluderar oskärpa radie är standard 0, vilket gör att skuggan visas som en helfärgad färg.

• Färg: Det fjärde värdet anger skuggans färg och kan definieras med en hexadecimal färgkod eller en RGBa färgkod.

Du kan lägga till en textskugga med egenskapsfönstret längst ner på panelen CSS Styles, som visas i bilden. Gör så här:

1. Klicka på länken Lägg till egenskap i den vänstra delen av egenskapsfönstret CSS-format.

2. Ange regeringsnamnet för CSS3-stil, textskugga eller välj stilregeln i rullgardinsmenyn.

   När namnet visas i vänster sida visas en liten pil till höger.

3. Klicka för att välja pilen till höger om textskuggan.

   En ruta visas.

4. Ange X- och Y-förskjutningarna, oskärpa radie och färg.