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

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

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