Vissa av CSS3s egenskaper är lite mer vanligt förekommande än de andra. Här är de vanligaste och hur de fungerar med exempel.

Border-radius
Rundar hörnen på div-boxar.

Exempel: border-radius: 10px;

Desto högre värde, desto rundare hörn. Vid ett visst värde får man en cirkel och efter det spelar det ingen roll hur mycket värdet ökas.

Box-Shadow
Lägger på en skugga under en div-box.

box-shadow: x-offset y-offset blur (spridning) färg

Exempel 1: Skuggan hamnar på högersida och vid botten med färgen svart
box-shadow: 5px 5px 10px black;

Exempel 2:Skuggan hamnar på vänstersida och vid toppen med färgen svart
box-shadow: -5px -5px 10px black;

Exempel 3: Med rgba istället för färgen kan man även sätta alfa-värden, vilket är värdet på transparensen.
box-shadow: 5px 5px 10px rgba(0,0,0, .3);

Exempel 4: Exempel med spridningen som är ett frivilligt värde man kan sätta.
box-shadow: 5px 5px 10px 10px rgba(0,0,0, .3);

Exempel 5: Man kan lägga fler skuggor på varandra så här.
box-shadow: 5px 5px 10px rgba(0,0,0, .3),
5px 5px 11px green;

Exempel 6: En skugga som går runt hela boxen.
box-shadow: 0 0 2px 1px rgba(0,0,0,0.3)

Text-Shadow
Lägger på en skugga på texter.

text-shadow: x-offset y-offset blur färg

Exempel 1: Lägger på en skugga åt vänster och på botten som är röd.
text-shadow: 5px 5px 2px red;

Exempel 2: Lägger på en skarp skugga på botten-delen av en text som att det finns belysning bakom texten.
text-shadow: 0 1px 0 #ffffff;

Gradients
Lägger på en gradient på div-boxen eller på hela rutan om man vill. Kan kräva att man har prefixes för att det ska funka. Kör den alltså genom prefixr.com.

linear-gradient(riktning, från-färg, till-färg)

Exempel 1: Lägger på en gradient uppifrån och ned som börjar med svart och avslutas med vit.
linear-gradient(top, black, white);

Exempel 2: Lägger på flera gradients uppifrån och ned. Man kan lägga på hur många färger som helst.
linear-gradient(top, black, red, white);

Exempel 3: Lägger på en gradient där det är bestämt var en viss färg ska sluta.
linear-gradient(top, black 30%, white);

Exempel 4:Lägger på en gradient där svart slutar vid 50% och vit börjar vid 50%, vilket skapar en skarp linje.
linear-gradient(top, black 50%, white 50%);

Columns
Fördelar texten i en div till flera kolumner.

columns: antal kolumner eller längd på kolumner

Exepmel 1: Skapar tre kolumner.
columns: 3;

Exepmel 2: Skapar så många kolumner som möjligt där varje kolumn är 100px brett.
columns: 100px;

Exepmel 3: Skapar så många kolumner som möjligt där varje kolumn är 100px brett med mellanrum mellan varje på 50px.
columns: 100px;
column-gap: 50px;

Media queries
Ger möjlighet att använda olika egenskaper för olika storlekar på skärmen.

@media screen and (max-width: maxlängd på fönstret)

Exempel 1: När fönstret minskas till mindre än 500px hoppar texten över till en kolumn.
@media screen and (max-width: 500px){
p{
columns: 1;
}
}

Font-face
Använda vilken font som helst.

@font-face{
font-family: “namn”;
src: url(‘filnamn.eot’); //För Internet explorer
src:
url(‘filnamn.eot?#iefix’) format(’embedded-opentype’), //För gamla Internet explorer
url(‘filnamn.woff’) format(‘woff’), //Chrome och Safari
url(‘filnamn.ttf’) format(‘truetype’), //Firefox
url(‘filnamn.svg#namn’) format(‘svg’); //iPad och iPhone
font-weight: normal;
font-style: normal;
}

div{
font-family: ‘namn’;
}