Opacitet och skuggor:
 
[KOD]
/* Fristående opacitetsinställning */
opacity: 0.5;

/* Opacitet inbakad i färgdeklarationer */
color: hsla(0,100%,50%,0.2);
background-color: rgb(255,122,54);
[/KOD]

[KOD]
-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;
box-shadow: 5px 5px 5px #000;
[/KOD]

Bakgrunder och kantlinjer:

[KOD]
-khtml-background-size: 90%;
-o-background-size: 90%;
-webkit-background-size: 90%;
background-size: 90%;
[/KOD]

[KOD]
-moz-border-image: url(kantlinje.png) 50 50 round;
-webkit-border-image: url(kantlinje.png) 50 50 round;
border-image: url(kantlinje.png) 50 50 round;
[/KOD]

[KOD]
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
[/KOD]

Vrid, böj och vänd elementen:

[KOD]
/* Flytta elementet 5 em åt höger */
-webkit-transform: translate(5em, 0);

/* Skala upp elementet till dubbla storleken */
-webkit-transform: scale(2);

/* Rotera elementet 30 grader medurs */
-webkit-transform: rotate(30deg);
[/KOD]

[KOD]
-webkit-transform: rotateY(90deg);
[/KOD]

[kodruta 1]
Kodruta 1, CSS-animeringar
@-webkit-keyframes forstora {
	0% {
		padding: 0;
	}
	50% {
		padding: 0 10px;
		background-color: rgba(255,0,0,0.2);		
	}
	100% {
		padding: 0 50px;
		background-color:rgba(255,0,0,0.9);
	}
}
	
#ett_element_att_forstora {
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-name: forstora;
	-webkit-animation-duration: 2s; /* Tid för 0-100% */
	-webkit-animation-iteration-count: 4; /* Två gånger fram och tillbaka */
}
[/kodruta]

Transitions:

[KOD]
a:hover {
color:#000;  
-webkit-transition:color 1s ease-in;  
-moz-transition:color 1s ease-in;  
-o-transition:color 1s ease-in;  
transition:color 1s ease-in; 
}
[/KOD]

Dela in text i kolumner:
 
[KOD]
-moz-column-width: 10em; 
-webkit-column-width: 10em; 
-moz-column-gap: 1em; 
-webkit-column-gap: 1em;
[/KOD]

Gradients och kodruta 2:

[kodruta 2]
/* Firefox 3.6+ */
background: -moz-linear-gradient(100% 100% 90deg, #000000, #fffff);

/* Chrome 1-9 och Safari 4-5 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#000000));

/* Chrome 10+ och Safari 5.1+ */
background: -webkit-linear-gradient(#000000, #fffff);

/* Opera 11.10+ */
background: -o-linear-gradient(#000000, #fffff);
[/kodruta 2]

Reflektioner:

[KOD]
/* Begränsar reflektionen med color-stop */
-webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.5, transparent), to(white));
/* Visar hela elementet i reflektionen */
-webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));
[/KOD]

Egna typsnitt och ny boxmodel:

[KOD]
@font-face {
  font-family: eget_typsnitt;
  src: url(‘eget_typsnitt.ttf’);
}
.klass_med_typsnitt {
  font-family: eget_typsnitt;
  font-size: 12px;
}
[/KOD]