Testar rundade hörn, skuggor, rgba-färger och mer.
Rundade hörn (border-radius)
Med border-radius kan man runda hörnen på ett element. Ju högre värde, desto rundare.
border-radius: 5px
border-radius: 15px
border-radius: 30px
50% = cirkel
Skuggor (box-shadow)
Med box-shadow kan man lägga till skuggor runt element. Man anger: horisontell förskjutning, vertikal förskjutning, spridning och färg.
Liten skugga
Stor skugga
Glöd-effekt
Inre skugga (inset)
RGBA-färger
Med rgba(r, g, b, a) anger man färg med genomskinlighet. "a" (alpha) är ett tal mellan 0 (helt genomskinlig) och 1 (helt ogenomskinlig).
Alpha: 0.15
Alpha: 0.30
Alpha: 0.55
Alpha: 0.80
Bonus: Gradienter & Transition
CSS3 stödjer även färggradienter med linear-gradient och radial-gradient.
Knappen nedan använder transition för en mjuk animation vid hover: