Kaders

(Backgrounds & borders)

border-image-slice & border-image-repeat

Uit de demo:

.border_groovy {
	border-image: url(groovy.png);
   	border-image-slice:124;
   	border-image-repeat: round }

2012: experimentele implementaties (prefixes)

Gradienten als kaders

Uit de demo:

span {
     border-image: linear-gradient(blue, green)
      33% round stretch;
}

Ronde hoeken

Uit de demo:

div:nth-child(6) {
	border-radius: 160px 0 60px 0 / 160px 0 30px 0;
}
/* 4 horizontale stralen / 4 vertical stralen */

Box-schaduw

Uit de demo:

div:nth-child(2) div{
	box-shadow:rgba(102,90,74, .7) 3px 3px inset;
}

Einde

→ Terug naar agenda