CSS3, colors en border-radius

1. CSS3
Nieuwe dingen

2. CSS1 CSS2 CSS3
1996 1998 (CSS2.0)
2004 (CSS2.1)
?

3. “Wanneer zal CSS3 ‘af’ zijn?”

5. The HTML5 story…

6. 2022

7. Wanneer zal CSS3 af zijn?
Wanneer kunnen we CSS3 gebruiken?

9. Je kan CSS3 nu al zonder
problemen gebruiken! *

10. CSS2.1 was al jaren afgewerkt.
Toch ondersteunt nog geen enkele
browser de CSS2.1 specificatie volledig.

11. CSS3
MODULE
MODULE
MODULE
MODULE
MODULE
MODULE
MODULE
http://www.css3.info/modules/

12. CSS3
SELECTORS
ANIMATIONS
FONTS
LISTS
MULTI-COLUMN
LAYOUT
BACKGROUNDS
& BORDERS
TRANSITIONS
http://www.css3.info/modules/

13. CSS3
MODULE
MODULE
MODULE
MODULE
MODULE
MODULE
MODULE
http://www.css3.info/modules/

14. Je kan elke CSS3 eigenschap gebruiken.
Je website zal niet kapot gaan.
Maar…

15. Browsers die je CSS3 regel niet kennen,
zullen de regel gewoon negeren.

16. Prachtig naslagwerk

17. Oktober 2014 — http://www.w3counter.com/globalstats.php

18. Progressive enhancement FTW

21. Vendor prefixes

22. Voorbeelden van vendor-prefixes
• -webkit- voor Webkit (& Blink) browsers
• -moz- voor Mozilla Firefox
• -o- voor Opera
• -ms- voor Microsoft IE

23. Vb. van een vendor-prefixed regel
-moz-border-radius: 12px;
mozilla vendor prefix

24. Hoe gebruiken?
-webkit-property: value;
-moz-property: value;
-o-property: value;
-ms-property: value;
property: value;

25. Break free from CSS prefix hell!

26. 1
CSS3 kleuren

27. In CSS3 kan je kleur op nieuwe
manieren definiëren

29. rgb & rgba( )

30. Hoe gebruiken?
p {
color: rgba(50,50,50,.5);
}
dekking (waarde tussen 0 & 1)

31. hsl & hsla( )

32. Hoe gebruiken?
p {
color: hsla(45,90%,50%,.5);
}
1—hue of kleurtoon (0–360)
2—saturation of verzadiging (%)
3—lightness of helderheid (%)
4—opacity of dekking (0–1)

33. 0°
270° 90°
Hue
180°
0% 100%
0% 100%
Saturation
Lightness

34. Het is meestal intuïtiever om kleur te
definiëren in hsl(a) dan in hex of rgb(a)

35. Maar Photoshops hsb(a) != CSS’s hsl(a)

37. Ondersteuning voor IE8
p {
color: #f8db94;
color: hsla(45,90%,50%,.5);
}

38. hsl naar rgb naar hex

39. 2
Afgeronde hoekjes

40. Rond de hoeken af van de achtergrond
van elk element via border-radius

42. Hoe gebruiken?
article {
border-radius: 5px;
}

43. article {
border-radius: 100px 10px 50px 0;
}

44. 3
box-shadow

45. Voeg een slagschaduw toe
aan een element

47. 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)

48. 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)

49. Achtergrond header neemt volledige breedte in

50. 4
text-shadow

51. Voeg een slagschaduw toe aan tekst

53. article {
text-shadow: 0px 1px 1px black;
}
Hoe gebruiken?
1—horizontale verschuiving
2—verticale verschuiving
3—vervaging (opt)
4—kleur (opt)

54. article {
box-shadow:0 1px 1px black;
}
1—horizontale verschuiving
2—verticale verschuiving
3—vervaging (opt)
4—kleur (opt)

56. 5
opacity

57. Maak elementen
(gedeeltelijk) doorschijnend

59. article {
opacity: .4;
}
Hoe gebruiken?

60. article {
zoom: 1;
filter: alpha(opacity=40);
opacity: .4;
}
Mogelijke IE fall-back

62. 6
backgrounds

63. Gebruik meerdere achtergrond-afbeeldingen
per element

65. article {
background-image: url(lamp.jpg),
url(table.jpg);
}
Hoe gebruiken?
lamp.jpg zal voor table.jpg te zien zijn

66. article {
background-image: url(lamp.jpg),
url(table.jpg);
background-repeat: none,
repeat-x;
background-position: left top,
20% 50%;
}
Hoe gebruiken?

67. article {
background: url(lamp.jpg) no-repeat left top,
url(table.jpg) repeat-x 20% 50%;
}
Short-hand notation

69. background-clip

70. article {
background-clip: border-box; /* default */
}
De achtergrondafbeelding is zichtbaar onder de border (als die er is).

71. article {
background-clip: padding-box;
}
De achtergrondafbeelding is zichtbaar onder de padding,
maar niet onder de border.

72. article {
padding: 2em;
background-clip: content-box;
}
De achtergrondafbeelding is zichtbaar onder de content,
maar niet onder eventuele padding of border.

73. background-origin

74. 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).

75. 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.

76. article {
background-origin: content-box; /* default */
background-repeat: no-repeat;
}
De achtergrondafbeelding wordt initieel gepositioneerd waar zich de
content van het element bevindt.

77. background-attachment

78. article {
background-attachment: scroll; /* default */
}
De achtergrond hangt vast aan
het element zelf.

79. article {
background-attachment: fixed;
}
De achtergrond hangt vast aan
de viewport.

80. article {
background-attachment: local;
}
De achtergrond hangt vast aan
de content van het element.
Duidelijkst zichtbaar als er een
eigen scrollmechanisme is.

81. background-size

82. article {
background-size: auto auto; /* default */
}

83. article {
background-size: 100px 100px;
}

84. article {
background-size: 100% 100%;
}

85. article {
background-size: cover;
}
De afbeelding wordt zo klein mogelijk geschaald, proportioneel, maar
geen van beide dimensies kleiner dan het element zelf.

86. article {
background-size: contain;
}
De afbeelding wordt zo groot mogelijk geschaald, proportioneel, maar
geen van beide dimensies groter dan het element zelf.

88. 7
gradients

89. Gebruik een verloop als achtergrond-afbeelding
van een element

91. article {
background-image: linear-gradient(red, yellow);
}
Hoe gebruiken?

92. article {
background-image:
linear-gradient(to right, red, yellow);
}

93. article {
background-image:
linear-gradient(to bottom right, red, yellow);
}

94. article {
background-image:
linear-gradient(45deg, red, yellow);
}

95. article {
background-image:
linear-gradient(to right, red, yellow, green,
blue, violet);
}

96. article {
background-image:
linear-gradient(to right, red, yellow 10%);
}

97. Radial gradients

98. article {
background-image: radial-gradient(red, yellow);
}
Hoe gebruiken?
S

99. article {
background-image:
radial-gradient(circle, red, yellow);
}

100. 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 ______________ “

101. article {
background-image:
radial-gradient(circle at top right, red,
yellow 50%);
}

102. It’s complicated. Bookmark this.

103. 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…)

105. Repeating gradients

107. 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.

108. article {
background-image:
repeating-radial—gradient(circle at bottom left,
red, red 10px, yellow 10px, yellow 20px);
}

110. 8
multiple column layout

111. Zet tekst in kolommen

114. p {
column-count: 3;
column-gap: 20px;
}
Hoe gebruiken?

115. 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.

116. 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

117. 9
web fonts

119. Gebruik elk lettertype

123. @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?

124. @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; }

125. 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.

126. Ondersteuning voor elke browserversie
@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;
}

127. Converteer elk lettertype

129. Enkele van vele font services
• Cloud typography
• Typekit
• Fontdeck
• Google Fonts
• fonts.com
• Fontspring
• WebINK
• Font Squirrel
• Typotheque
• …

131. 10
Media queries

133. Links en bronnen
• w3.org
• css-tricks.com
• css3.info
• caniuse.com
• developer.mozilla.org