web/04

CSS Basics

Kleur en typografie

Verschillende kleurnotaties

CSS: kleur als naam

Er zijn 147 kleurnamen

  • pink
  • red
  • green
  • ...

Maar liever niet gebruiken! Ontwerpers willen doorgaans specifiekere kleuren.

body {
  background: pink;
}

CSS: HSL kleur

Hue-Saturation-Lightness notatie

Deze notatie krijgt de voorkeur: specifiek en leesbaar!

 

p {
  background: hsl(310, 10%, 23%);
}

Deze notatie krijgt de voorkeur: specifiek en leesbaar!

Bron: http://thenewcode.com/61/An-Easy-Guide-To-HSL-Color

CSS: HSLa kleur

De Hue-Saturation-Lightness kan aangevuld worden met een alpha-waarde.

body {
  /* Hue: Graden op de kleurencirkel 0-359 */
  /* Saturation: Graden op de kleurencirkel 0% - 100% */
  /* Lightness: Graden op de kleurencirkel 0% - 100% */
  /* Alpha: Graden op de kleurencirkel 0-1 */
  color: hsla(0, 100%, 0%, 0.2);
}

p {
  background: hsla(310, 10%, 23%, 1);
}

CSS: RGB kleur

Red-Green-Blue 

body {
  background: rgb(0, 0, 0);
}

p {
  background: rgb(40, 10, 230);
}

CSS: RGBa kleur

Je kan de RGB-notatie aanvullen met een waarde voor alpha (= transparantie):

body {
  background: rgba(0, 0, 0, 1);
}

p {
  background: rgba(40, 10, 230, 0.3);
}

CSS: kleur als hex code

16 miljoen kleuren via hexadecimale kleurcodes

van #000000 tot #FFFFFF

ofwel #000 tot #FFF

Als de 3 paar hexadecimale getallen uit 2 dezelfde getallen bestaan, dan kan de verkorte notatie gebruikt worden.
 

body {
  background: #bada55;
}

CSS kleuren overzicht

  • Namen: red, tomato, green
  • HSL - HSLa: hsla(123, 40%, 20%, 1)
  • RGB - RGBa: rgba(123, 40%, 20%, 1)
  • hexadeximale waarde: #48963a

HSL krijgt de voorkeur vanwege leesbaarheid & kleurbereik

Tip: auto-suggest colors

Open een CSS-bestand

Typ een nieuwe CSS-declaratie:

colo

En selecteer uit de autocomplete:

color

Tip: switch tussen kleurnotaties

Hover over een kleur-preview vierkantje

Klik op de value in de popup tot je de juiste kleurnotatie hebt

CSS-eenheden

px

Dit is kort voor pixel.

 

 

 

Dit is een vaste eenheid. De bovenstaande paragraph zal dus een font-grootte hebben van 20 pixels.

p {
  font-size: 20px;
}

Vast vs relatief

Vaste eenheden lijken simpel, maar zijn vaak een struikelblok voor schaalbaarheid en toegankelijkheid.

rem

Is relatief ten opzichte van de font-grootte van het html-element.

De default is hier 16px:

 

body {
  /* 1rem equals 16px */
  font-size: 1rem;  
}

p {
  /* 2rem equals 32px */
  font-size: 2rem;
}

Conclusie

Gebruik uitsluitend rem voor font-sizing!

Zo respecteer je de lettergrootte dat gebruikers instellen in hun browser.

Stevig fundament voor font-sizing

html {
  font-size: 100%; /* Een procentuele waarde op het html-element respecteert de accessibility instelling van de browser wel! */
}

/* De standaard font-grootte van alle tekst, behalve wanneer overschreven */
body {
  font-size: 2rem; /* 2 maal 16px */
}

h1 {
  font-size: 3rem; /* 3 maal 16px */
}

...

Om te excelleren

em

(Minder gebruikt) Is relatief ten opzichte van de parent van het element.

 

 

 

 

div {
  font-size: 20px;
}

p {
  font-size: 2em; /* 2em equals 40px */
}
<div>
  <p>
    Alle eendjes zwemmen in het water, ....
  </p>
</div>

Om te excelleren

Tekst eigenschappen

Color

Tekstkleur

p {
  color: red;
}

Opacity

Ondoorschijbaarheid

 

 

 

Dit wordt niet gelimiteerd op tekst, maar zal het volledige element 50% minder doorzichtig maken.

p {
  /* Maak de paragraph 50% doorzichtig */
  opacity: 0.5;
}

Font-size

Tekengrootte (rem is aangeraden)

 

 

Tip:

Je kan kiezen welke tekengrootte je graag wilt gebruiken op je website.

 

Weet je niet goed hoe hier de verschillende waardes te bepalen, kies dan voor een type scale.

line-height

Regelhoogte (zonder eenheid is aangeraden)

 

 

 

p {
  font-size: 1rem;
  line-height: 1.5;
}

Font-style

Gebruik een variant van de gevonden font.

.special {
  font-style: italic;
}

.another-one {
  font-style: oblique;
}

Font-weight

Kiest het dikte van het lettertype.

 

 

 

Let op:

Voorzie een bold variant van de font, zo vermijd je dat de browser hier zelf een bold variatie uitvindt.

.special {
  font-weight: bold;
}

text-align

Het aligneren van text.

 

text-decoration

Enkele manieren om tekst te decoreren.

text-indent

Enkele manieren om tekst te decoreren.

Letter-spacing

Letterspariëring

Text-transform

Transformeren van letters tussen lowercase en lowercase

List-style

Pas de visuele weergave aan van List Items.

Oefening @Campus

Apple watch

 

programming Created with Sketch.

Uitdagingen

Sliding hover animatie

 

unicycle Created with Sketch.

(Enkel voor studenten met voorkennis)

What the font?

Wat is een font?

1 font = 1 bepaald lettertype in 1 bepaalde stijl:

bv: Roboto Regular

Wat is een font?

1 font heeft een hele hoop tekens:

 - Iedere letter van het alphabet (a - Z)

 - Ieder nummer (0 tot 9)

 - Lettertekens (; , . ? / >)

 - Lettervariaties (é ê ë ē ę è ž, ...)

Wat is een font?

Die tekens kan je gaan categoriseren volgens subsets 

 - Alle Griekse tekens

 - Alle Latijnse tekens

 - Alle cijfers

 - ...

Font gebruiken

Fonts gebruiken

font-family property (Lettertype)

 

 

De webpagina zal nu proberen het Verdana font te laden en indien dit font niet gevonden wordt op de computer, zal vervolgens Arial ingeladen proberen worden = fallback

html {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

Fonts gebruiken

Verschil per besturingssysteem.

 

Welke fonts beschikbaar? (ref)

OSX (Apple): 198 fonts

Windows (Microsoft): 440 fonts

 

Fonts gebruiken

Default verschilt per software versie. (ref)

 

 

 

Fonts gebruiken

Design zal altijd een specifieke font verwachten, bijvoorbeeld: "Lato".

 

 

 

Maar wat doe je als die font niet bestaat op een gebruiker hun systeem?

html {
  font-family: "Lato", Arial, Helvetica, sans-serif;
}

Fonts gebruiken

1. Download de fonts en plaats ze in een mapje naast je index.html 

 

Gratis: Google fonts + Font squirrel

Betalend: Fonts.com, ...

Fonts gebruiken

Download enkel de variaties van de font dat je zal gebruiken!

Bijvoorbeeld:

  • regular
  • italic
  • black

Fonts gebruiken

Je kan Google Fonts toevoegen met een CDN (content delivery network). Maar voor onze lessen gaan we dit niet doen

html {
  font-family: 'Roboto', sans-serif;  
}

...
<head>
  ...
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
  ...
</head>

Fonts gebruiken

We gaan echter niet de verantwoordelijkheid van het hosten van onze fonts aan Google toevertrouwen, maar zullen dit zelf in handen nemen.

 

Zelf hosten van fonts zal onze pagina sneller doen laden en laat ons toe om hier nog subsets uit te verwijderen.

Fonts gebruiken

Gebruik een converter om

  1. het .ttf formaat om te zetten naar .woff en .woff2
  2. de juiste subset te kiezen van de font.

Online converters: Font Squirrel, Fontie of Transfonter

 

Hulpmiddel voor Google Fonts: Google webfont helper

Fonts gebruiken

Roboto.ttf

171kb

Subsetted

Roboto.ttf

47kb

Subsetted

Roboto.woff

26kb

Fonts gebruiken

Dan stuur je de fonts mee!

@font-face {
  font-family: "Lato";
  src: url('fonts/lato.woff2') format('woff2'), 
    url('fonts/lato.woff') format('woff');
}


html {
  font-family: "Lato", Arial, Helvetica, sans-serif;
}

Fonts gebruiken

Iedere variatie krijgt zijn eigen @font-face

@font-face {
  font-family: "Lato";
  src: url('fonts/lato.woff2') format('woff2'), 
    url('fonts/lato.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Lato";
  src: url('fonts/lato--bold.woff2') format('woff2'), 
    url('fonts/lato--bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Lato";
  src: url('fonts/lato--italic.woff2') format('woff2'), 
    url('fonts/lato--italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}


html {
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

em {
  font-style: italic;
}

Oefening @home

freelance Created with Sketch.

Green world

DigExp - WEB/04 - CSS Basics

By Lecturer GDM

DigExp - WEB/04 - CSS Basics

CSS Kleur, CSS-eenheden, CSS eigenschappen: tekst, fonts.

  • 319

More from Lecturer GDM