CSS3 kleuren en border-radius
-
Upload
thomas-byttebier -
Category
Education
-
view
374 -
download
0
Transcript of CSS3 kleuren en border-radius
![Page 1: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/1.jpg)
Nieuwe dingenCSS3
![Page 2: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/2.jpg)
CSS3CSS2CSS11996 1998 (CSS2.0)
2004 (CSS2.1)?
![Page 3: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/3.jpg)
“Wanneer zal CSS3 ‘af’ zijn?”
![Page 4: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/4.jpg)
![Page 5: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/5.jpg)
The HTML5 story…
![Page 6: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/6.jpg)
2022
![Page 7: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/7.jpg)
Wanneer zal CSS3 af zijn? Wanneer kunnen we CSS3 gebruiken?
![Page 8: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/8.jpg)
![Page 9: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/9.jpg)
Je kan CSS3 nu al zonder problemen gebruiken! *
![Page 10: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/10.jpg)
CSS2.1 was al jaren afgewerkt. Toch ondersteunt nog geen enkele
browser de CSS2.1 specificatie volledig.
![Page 11: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/11.jpg)
CSS3
MODULE
MODULEMODULE
MODULE
MODULE
MODULE
MODULE
http://www.css3.info/modules/
![Page 12: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/12.jpg)
CSS3
SELECTORS
ANIMATIONSFONTS
LISTS
MULTI-COLUMN LAYOUT
TRANSITIONS
BACKGROUNDS & BORDERS
http://www.css3.info/modules/
![Page 13: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/13.jpg)
CSS3
MODULE
MODULEMODULE
MODULE
MODULE
MODULE
MODULE
http://www.css3.info/modules/
![Page 14: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/14.jpg)
Je kan elke CSS3 eigenschap gebruiken. Je website zal niet kapot gaan.
Maar…
![Page 15: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/15.jpg)
Browsers die je CSS3 regel niet kennen, zullen de regel gewoon negeren.
![Page 16: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/16.jpg)
Prachtig naslagwerk
![Page 18: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/18.jpg)
Progressive enhancement FTW
![Page 19: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/19.jpg)
![Page 20: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/20.jpg)
![Page 21: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/21.jpg)
Vendor prefixes
![Page 22: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/22.jpg)
Voorbeelden van vendor-prefixes
• -webkit- voor Webkit (& Blink) browsers • -moz- voor Mozilla Firefox • -o- voor Opera • -ms- voor Microsoft IE
![Page 23: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/23.jpg)
-moz-border-radius: 12px;
Vb. van een vendor-prefixed regel
mozilla vendor prefix
![Page 24: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/24.jpg)
-webkit-property: value; -moz-property: value; -o-property: value; -ms-property: value; property: value;
Hoe gebruiken?
![Page 25: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/25.jpg)
Break free from CSS prefix hell!
![Page 26: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/26.jpg)
CSS3 kleuren
1
![Page 27: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/27.jpg)
In CSS3 kan je kleur op nieuwe manieren definiëren
![Page 28: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/28.jpg)
![Page 29: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/29.jpg)
rgb & rgba( )
![Page 30: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/30.jpg)
p { color: rgba(50,50,50,.5); }
Hoe gebruiken?
dekking (waarde tussen 0 & 1)
![Page 31: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/31.jpg)
hsl & hsla( )
![Page 32: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/32.jpg)
p { color: hsla(45,90%,50%,.5); }
Hoe gebruiken?
1—hue of kleurtoon (0–360) 2—saturation of verzadiging (%) 3—lightness of helderheid (%) 4—opacity of dekking (0–1)
![Page 33: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/33.jpg)
0% 100%
0% 100%
0°
90°
180°
270° Hue
Saturation
Lightness
![Page 34: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/34.jpg)
Het is meestal intuïtiever om kleur te definiëren in hsl(a) dan in hex of rgb(a)
![Page 35: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/35.jpg)
Maar Photoshops hsb(a) != CSS’s hsl(a)
![Page 36: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/36.jpg)
![Page 37: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/37.jpg)
p { color: #f8db94; color: hsla(45,90%,50%,.5); }
Ondersteuning voor IE8
![Page 38: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/38.jpg)
hsl naar rgb naar hex
![Page 39: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/39.jpg)
Afgeronde hoekjes
2
![Page 40: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/40.jpg)
Rond de hoeken af van de achtergrond van elk element via border-radius
![Page 41: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/41.jpg)
![Page 42: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/42.jpg)
article { border-radius: 5px; }
Hoe gebruiken?
![Page 43: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/43.jpg)
article { border-radius: 100px 10px 50px 0; }
![Page 44: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/44.jpg)
box-shadow
3
![Page 45: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/45.jpg)
Voeg een slagschaduw toe aan een element
![Page 46: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/46.jpg)
![Page 47: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/47.jpg)
article { box-shadow: 5px 5px 5px 0 black; }
Hoe gebruiken?
1—horizontale verschuiving 2—verticale verschuiving 3—vervaging (opt) 4—vergroting (opt) 5—kleur (opt)
![Page 48: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/48.jpg)
article { box-shadow:20px 10px 5px 0 hsla(0,0%,0%,.4); }
1—horizontale verschuiving 2—verticale verschuiving 3—vervaging (opt) 4—vergroting (opt) 5—kleur (opt)
![Page 49: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/49.jpg)
Achtergrond header neemt volledige breedte in
![Page 50: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/50.jpg)
text-shadow
4
![Page 51: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/51.jpg)
Voeg een slagschaduw toe aan tekst
![Page 52: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/52.jpg)
![Page 53: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/53.jpg)
article { text-shadow: 0px 1px 1px black; }
Hoe gebruiken?
1—horizontale verschuiving 2—verticale verschuiving 3—vervaging (opt) 4—kleur (opt)
![Page 54: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/54.jpg)
article { box-shadow:0 1px 1px black; }
1—horizontale verschuiving 2—verticale verschuiving 3—vervaging (opt) 4—kleur (opt)
![Page 55: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/55.jpg)
![Page 56: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/56.jpg)
opacity
5
![Page 57: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/57.jpg)
Maak elementen (gedeeltelijk) doorschijnend
![Page 58: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/58.jpg)
![Page 59: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/59.jpg)
article { opacity: .4; }
Hoe gebruiken?
![Page 60: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/60.jpg)
article { zoom: 1; filter: alpha(opacity=40); opacity: .4; }
Mogelijke IE fall-back
![Page 61: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/61.jpg)
![Page 62: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/62.jpg)
backgrounds6
![Page 63: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/63.jpg)
Gebruik meerdere achtergrond-afbeeldingen per element
![Page 64: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/64.jpg)
![Page 65: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/65.jpg)
article { background-image: url(lamp.jpg), url(table.jpg); }
Hoe gebruiken?
lamp.jpg zal voor table.jpg te zien zijn
![Page 66: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/66.jpg)
article { background-image: url(lamp.jpg), url(table.jpg); background-repeat: none, repeat-x; background-position: left top, 20% 50%; }
Hoe gebruiken?
![Page 67: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/67.jpg)
article { background: url(lamp.jpg) no-repeat left top, url(table.jpg) repeat-x 20% 50%; }
Short-hand notation
![Page 68: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/68.jpg)
![Page 69: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/69.jpg)
background-clip
![Page 70: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/70.jpg)
article { background-clip: border-box; /* default */ }
De achtergrondafbeelding is zichtbaar onder de border (als die er is).
![Page 71: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/71.jpg)
article { background-clip: padding-box; }
De achtergrondafbeelding is zichtbaar onder de padding, maar niet onder de border.
![Page 72: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/72.jpg)
article { padding: 2em; background-clip: content-box; }
De achtergrondafbeelding is zichtbaar onder de content, maar niet onder eventuele padding of border.
![Page 73: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/73.jpg)
background-origin
![Page 74: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/74.jpg)
article { background-origin: padding-box; /* default */ background-repeat: no-repeat; }
De achtergrondafbeelding wordt initieel gepositioneerd waar de padding zich bevindt (of zou bevinden als er geen is).
![Page 75: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/75.jpg)
article { background-origin: border-box; /* default */ background-repeat: no-repeat; }
De achtergrondafbeelding wordt initieel gepositioneerd waar de border zich bevindt, als er een border is.
![Page 76: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/76.jpg)
article { background-origin: content-box; /* default */ background-repeat: no-repeat; }
De achtergrondafbeelding wordt initieel gepositioneerd waar zich de content van het element bevindt.
![Page 77: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/77.jpg)
background-attachment
![Page 78: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/78.jpg)
article { background-attachment: scroll; /* default */ }
De achtergrond hangt vast aan het element zelf.
![Page 79: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/79.jpg)
article { background-attachment: fixed; }
De achtergrond hangt vast aan de viewport.
![Page 80: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/80.jpg)
article { background-attachment: local; }
De achtergrond hangt vast aan de content van het element. Duidelijkst zichtbaar als er een eigen scrollmechanisme is.
![Page 81: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/81.jpg)
background-size
![Page 82: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/82.jpg)
article { background-size: auto auto; /* default */ }
![Page 83: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/83.jpg)
article { background-size: 100px 100px; }
![Page 84: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/84.jpg)
article { background-size: 100% 100%; }
![Page 85: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/85.jpg)
article { background-size: cover; }
De afbeelding wordt zo klein mogelijk geschaald, proportioneel, maar geen van beide dimensies kleiner dan het element zelf.
![Page 86: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/86.jpg)
article { background-size: contain; }
De afbeelding wordt zo groot mogelijk geschaald, proportioneel, maar geen van beide dimensies groter dan het element zelf.
![Page 87: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/87.jpg)
![Page 88: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/88.jpg)
gradients7
![Page 89: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/89.jpg)
Gebruik een verloop als achtergrond-afbeelding van een element
![Page 90: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/90.jpg)
![Page 91: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/91.jpg)
article { background-image: linear-gradient(red, yellow); }
Hoe gebruiken?
![Page 92: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/92.jpg)
article { background-image: linear-gradient(to right, red, yellow); }
![Page 93: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/93.jpg)
article { background-image: linear-gradient(to bottom right, red, yellow); }
![Page 94: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/94.jpg)
article { background-image: linear-gradient(45deg, red, yellow); }
![Page 95: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/95.jpg)
article { background-image: linear-gradient(to right, red, yellow, green, blue, violet); }
![Page 96: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/96.jpg)
article { background-image: linear-gradient(to right, red, yellow 10%); }
![Page 97: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/97.jpg)
Radial gradients
![Page 98: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/98.jpg)
article { background-image: radial-gradient(red, yellow); }
Hoe gebruiken?
S
![Page 99: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/99.jpg)
article { background-image: radial-gradient(circle, red, yellow); }
![Page 100: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/100.jpg)
article { background-image: radial-gradient(circle closest-side, red, yellow); }
Mogelijke waarden: closest-corner, closest-side, farthest-corner, farthest side “Ik wil dat dit cirkelvormig verloop uitvloeit van het midden naar de ______________ “
![Page 101: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/101.jpg)
article { background-image: radial-gradient(circle at top right, red, yellow 50%); }
![Page 102: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/102.jpg)
It’s complicated. Bookmark this.
![Page 103: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/103.jpg)
Goed om weten
• Al 3 andere notaties geweest voor gradients • Deze laatste is vrij goed ondersteund • Gebruik deze hulp als je op zoek bent naar
complexe verlopen (of meer ondersteuning) • Je kan filter gebruiken in IE9 of lager • Je moet voorlopig misschien nog gebruik
maken van het -webkit- vendor prefix (or prefix-free js, Autoprefixer…)
![Page 104: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/104.jpg)
![Page 105: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/105.jpg)
Repeating gradients
![Page 106: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/106.jpg)
![Page 107: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/107.jpg)
article { background-image: repeating-linear—gradient(to top right, red, red 10px, yellow 10px, yellow 20px); }
De laatste kleurstop bepaalt de grootte van het verloop dat daarna herhaald wordt. In bovenstaand voorbeeld zal een vierkantje van 20px herhaald worden.
![Page 108: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/108.jpg)
article { background-image: repeating-radial—gradient(circle at bottom left, red, red 10px, yellow 10px, yellow 20px); }
![Page 109: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/109.jpg)
![Page 110: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/110.jpg)
multiple column layout8
![Page 111: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/111.jpg)
Zet tekst in kolommen
![Page 112: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/112.jpg)
![Page 113: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/113.jpg)
![Page 114: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/114.jpg)
p { column-count: 3; column-gap: 20px; }
Hoe gebruiken?
![Page 115: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/115.jpg)
p { column-count: 3; column-gap: 2rem; column-rule: 1px solid hsla(0,0%,0%,.2); }
Browsers zullen zelf proberen de hoogte van het element / de kolommen te bepalen.
![Page 116: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/116.jpg)
p { -webkit-column-count: 3; -webkit-column-gap: 2rem; -moz-column-count: 3; -moz-column-gap: 2rem; column-count: 3; column-gap: 2rem; }
Vendor-prefixes zijn nog nodig
![Page 117: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/117.jpg)
web fonts
9
![Page 118: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/118.jpg)
![Page 119: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/119.jpg)
Gebruik elk lettertype
![Page 120: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/120.jpg)
![Page 121: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/121.jpg)
![Page 122: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/122.jpg)
![Page 123: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/123.jpg)
@font-face { font-family: 'MyFont'; src: url('myfont.woff') format(‘woff’); font-weight: normal; font-style: normal; }
body { font-family: 'MyFont', fallback-font, serif; }
Hoe gebruiken?
![Page 124: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/124.jpg)
@font-face { font-family: 'MyFont'; src: url('myfont.woff') format(‘woff’); font-weight: normal; font-style: normal; }
@font-face { font-family: 'MyFont'; src: url(‘myfont-italic.woff') format(‘woff’); font-weight: normal; font-style: italic; }
@font-face { font-family: 'MyFont'; src: url(‘myfont-bold.woff') format(‘woff’); font-weight: bold; font-style: normal; }
body { font-family: 'MyFont', fallback-font, serif;} h1 { font-weight: bold; } em { font-weight: italic; }
![Page 125: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/125.jpg)
Goed om weten
• Net als beeldjes, audio of video moeten ook fonts eerst gedownload worden door de browser.
• Er zijn verschillende fontformaten in omloop, maar woff wordt ondersteund door elke browser.
• Als je oudere browserversies wil ondersteunen, heb je ook de andere fontformaten nodig.
• Je mag niet zomaar elk font op je website gebruiken! • Font services kunnen je fonts aanbieden met de
juiste licentie om ze op je website te gebruiken.
![Page 126: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/126.jpg)
@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ font-weight: normal; font-style: normal; }
body { font-family: 'MyFont', fallback-font, serif; }
Ondersteuning voor elke browserversie
![Page 127: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/127.jpg)
Converteer elk lettertype
![Page 128: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/128.jpg)
![Page 129: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/129.jpg)
Enkele van vele font services
• Cloud typography • Typekit • Fontdeck • Google Fonts • fonts.com • Fontspring • WebINK • Font Squirrel • Typotheque • …
![Page 130: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/130.jpg)
![Page 131: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/131.jpg)
Media queries
10
![Page 132: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/132.jpg)
![Page 133: CSS3 kleuren en border-radius](https://reader031.fdocuments.nl/reader031/viewer/2022022201/58896dc01a28ab44758b5dcb/html5/thumbnails/133.jpg)
Links en bronnen
• w3.org • css-tricks.com • css3.info • caniuse.com • developer.mozilla.org