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:
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:
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å>>>