byt lankar med html-skolan
Google gbghtml.se
index bilder body länkar visited div-taggen class hover menyer dreamweaver dreamweaver extensions flash gratis html editorer gratis templates css3 responsiv design Böcker om stylesheets

waybackmachine
är du nyfiken på hur din eller andra webbsidor såg ut förr? Prova waybackmachine>>>

 

 

 

Med css3 har du numera möjlighet att utforma olika typer av former. .

I Css2 var du tvungen att lägga in massor med bilder för att forma rundade hörn, cirklar, ovaler o.s.v. Idag skriver du ett par rader kod i stylesheet och får då fram allt från fyrkanter till ovaler och cirklar. Jag visar ett par exempel nedanför.

För att få en röd fyrkant har jag lagt in style=" width: 200px;
height: 100px;
background: red;" i en div-tagg så här : <div style=" width: 200px;
height: 100px;
background: red;"> och så har jag skrivit koden mellan div-taggarna. Resultatet blir:

style=" width: 200px; height: 100px; background: red;"

Du kan även forma cirklar lika enkelt.

Här har jag använt <div style="width: 200px;
height: 200px;
background: yellow;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;"> istället.

Vill du ha en oval får du ändra lite på bredd och height.

Här har jag använt: <div style="width: 400px;
height: 200px;
background: green;
-moz-border-radius: 200px / 100px;
-webkit-border-radius: 200px / 100px;
border-radius: 200px / 100px;"></div>

En annan spännande teknik är att använda shadow.

Ovanför ser du box-shadow på den översta rektangeln. Koden för denna rutan ser nu ut så här:

<div style=" width: 200px;
height: 100px;
background: red; box-shadow: 10px 10px 5px #888888;"></div>

Du kan även använda denna teknik på text. Så kallad text-shadow. Vill du lägga skugga på text skriver du  {
    text-shadow: 2px 2px #ff0000;
} . 2px beskriver hur och var skuggan skall vara och det som står efter # färgen. Här har jag använt hexadecimal kod efter #-tecknet men du skulle likagärna kunna använda red istället. Med denna kod får du denna text:

Så här ser denna egenskap ut

Jag har använt mig av dessa tekniker för att designa några mallar. Se mer här>>>

Det finns mycket mer att använda för dina framtida layouter. Läs mer på w3c schools>>>

Du läser mer om text-shadow på w3c schools också>>>

copyright © Björn Larsen citygbg.se