Post on 26-Jan-2017
Nieuwe dingenCSS3
CSS3CSS2CSS11996 1998 (CSS2.0)
2004 (CSS2.1)?
“Wanneer zal CSS3 ‘af’ zijn?”
The HTML5 story…
2022
Wanneer zal CSS3 af zijn? Wanneer kunnen we CSS3 gebruiken?
Je kan CSS3 nu al zonder problemen gebruiken! *
CSS2.1 was al jaren afgewerkt. Toch ondersteunt nog geen enkele
browser de CSS2.1 specificatie volledig.
CSS3
MODULE
MODULEMODULE
MODULE
MODULE
MODULE
MODULE
http://www.css3.info/modules/
CSS3
SELECTORS
ANIMATIONSFONTS
LISTS
MULTI-COLUMN LAYOUT
TRANSITIONS
BACKGROUNDS & BORDERS
http://www.css3.info/modules/
CSS3
MODULE
MODULEMODULE
MODULE
MODULE
MODULE
MODULE
http://www.css3.info/modules/
Je kan elke CSS3 eigenschap gebruiken. Je website zal niet kapot gaan.
Maar…
Browsers die je CSS3 regel niet kennen, zullen de regel gewoon negeren.
Prachtig naslagwerk
Progressive enhancement FTW
Vendor prefixes
Voorbeelden van vendor-prefixes
• -webkit- voor Webkit (& Blink) browsers • -moz- voor Mozilla Firefox • -o- voor Opera • -ms- voor Microsoft IE
-moz-border-radius: 12px;
Vb. van een vendor-prefixed regel
mozilla vendor prefix
-webkit-property: value; -moz-property: value; -o-property: value; -ms-property: value; property: value;
Hoe gebruiken?
Break free from CSS prefix hell!
CSS3 kleuren
1
In CSS3 kan je kleur op nieuwe manieren definiëren
rgb & rgba( )
p { color: rgba(50,50,50,.5); }
Hoe gebruiken?
dekking (waarde tussen 0 & 1)
hsl & hsla( )
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)
0% 100%
0% 100%
0°
90°
180°
270° Hue
Saturation
Lightness
Het is meestal intuïtiever om kleur te definiëren in hsl(a) dan in hex of rgb(a)
Maar Photoshops hsb(a) != CSS’s hsl(a)
p { color: #f8db94; color: hsla(45,90%,50%,.5); }
Ondersteuning voor IE8
hsl naar rgb naar hex
Afgeronde hoekjes
2
Rond de hoeken af van de achtergrond van elk element via border-radius
article { border-radius: 5px; }
Hoe gebruiken?
article { border-radius: 100px 10px 50px 0; }
box-shadow
3
Voeg een slagschaduw toe aan een element
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)
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)
Achtergrond header neemt volledige breedte in
text-shadow
4
Voeg een slagschaduw toe aan tekst
article { text-shadow: 0px 1px 1px black; }
Hoe gebruiken?
1—horizontale verschuiving 2—verticale verschuiving 3—vervaging (opt) 4—kleur (opt)
article { box-shadow:0 1px 1px black; }
1—horizontale verschuiving 2—verticale verschuiving 3—vervaging (opt) 4—kleur (opt)
opacity
5
Maak elementen (gedeeltelijk) doorschijnend
article { opacity: .4; }
Hoe gebruiken?
article { zoom: 1; filter: alpha(opacity=40); opacity: .4; }
Mogelijke IE fall-back
backgrounds6
Gebruik meerdere achtergrond-afbeeldingen per element
article { background-image: url(lamp.jpg), url(table.jpg); }
Hoe gebruiken?
lamp.jpg zal voor table.jpg te zien zijn
article { background-image: url(lamp.jpg), url(table.jpg); background-repeat: none, repeat-x; background-position: left top, 20% 50%; }
Hoe gebruiken?
article { background: url(lamp.jpg) no-repeat left top, url(table.jpg) repeat-x 20% 50%; }
Short-hand notation
background-clip
article { background-clip: border-box; /* default */ }
De achtergrondafbeelding is zichtbaar onder de border (als die er is).
article { background-clip: padding-box; }
De achtergrondafbeelding is zichtbaar onder de padding, maar niet onder de border.
article { padding: 2em; background-clip: content-box; }
De achtergrondafbeelding is zichtbaar onder de content, maar niet onder eventuele padding of border.
background-origin
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).
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.
article { background-origin: content-box; /* default */ background-repeat: no-repeat; }
De achtergrondafbeelding wordt initieel gepositioneerd waar zich de content van het element bevindt.
background-attachment
article { background-attachment: scroll; /* default */ }
De achtergrond hangt vast aan het element zelf.
article { background-attachment: fixed; }
De achtergrond hangt vast aan de viewport.
article { background-attachment: local; }
De achtergrond hangt vast aan de content van het element. Duidelijkst zichtbaar als er een eigen scrollmechanisme is.
background-size
article { background-size: auto auto; /* default */ }
article { background-size: 100px 100px; }
article { background-size: 100% 100%; }
article { background-size: cover; }
De afbeelding wordt zo klein mogelijk geschaald, proportioneel, maar geen van beide dimensies kleiner dan het element zelf.
article { background-size: contain; }
De afbeelding wordt zo groot mogelijk geschaald, proportioneel, maar geen van beide dimensies groter dan het element zelf.
gradients7
Gebruik een verloop als achtergrond-afbeelding van een element
article { background-image: linear-gradient(red, yellow); }
Hoe gebruiken?
article { background-image: linear-gradient(to right, red, yellow); }
article { background-image: linear-gradient(to bottom right, red, yellow); }
article { background-image: linear-gradient(45deg, red, yellow); }
article { background-image: linear-gradient(to right, red, yellow, green, blue, violet); }
article { background-image: linear-gradient(to right, red, yellow 10%); }
Radial gradients
article { background-image: radial-gradient(red, yellow); }
Hoe gebruiken?
S
article { background-image: radial-gradient(circle, red, yellow); }
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 ______________ “
article { background-image: radial-gradient(circle at top right, red, yellow 50%); }
It’s complicated. Bookmark this.
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…)
Repeating gradients
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.
article { background-image: repeating-radial—gradient(circle at bottom left, red, red 10px, yellow 10px, yellow 20px); }
multiple column layout8
Zet tekst in kolommen
p { column-count: 3; column-gap: 20px; }
Hoe gebruiken?
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.
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
web fonts
9
Gebruik elk lettertype
@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?
@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; }
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.
@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
Converteer elk lettertype
Enkele van vele font services
• Cloud typography • Typekit • Fontdeck • Google Fonts • fonts.com • Fontspring • WebINK • Font Squirrel • Typotheque • …
Media queries
10
Links en bronnen
• w3.org • css-tricks.com • css3.info • caniuse.com • developer.mozilla.org