Deel 4: Kleur en typografie met CSS

Web Design

Verschillende types kleur

Kleur en typografie met CSS

CSS: kleur als naam

Er zijn 147 kleurnamen

  • pink
  • red
  • green
  • ...

Maar liever niet gebruiken! Ontwerpers willen doorgaans specifiekere kleuren.

body {
  background: pink;
}

CSS: kleur als hex code

Er zijn 16 miljoen kleuren definieerbaar 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: RGB kleur

Er zijn even veel kleuren definieerbaar via de Red-Green-Blue notatie:

  • rgb(0, 0, 0) tot rgb(255, 255, 255)
  • ofwel tot rgb(100%, 100%, 100%)

 

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

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

CSS: HSL kleur

Kleur kan ook genoteerd worden als we de Hue-Saturation-Lightness notatie volgen

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

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

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 kleuren overzicht

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

CSS: RGBa kleur

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

  • rgba(0, 0, 0, 0) -> rgba(255, 255, 255, 1)
  • ofwel tot rgba(100%, 100%, 100%, 1)

 

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

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

CSS: HSL kleur

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

  • rgba(0, 0, 0, 0) -> rgba(255, 255, 255, 1)
  • ofwel tot rgba(100%, 100%, 100%, 1)

 

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

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

Tip: auto-suggest colors

Open een CSS-bestand

Typ een nieuwe CSS-declaratie:

colo

En selecteer uit de autocomplete:

color

CSS-Eenheden

Kleur en typografie met CSS

px

Dit is kort voor pixel.

 

 

 

Dit is een vaste eenheid. De bovenstaande paragraph zal dus 100 pixels breed zijn. 

p {
  width: 100px;
}

em

Is relatief ten opzichte van de parent van het element.

 

 

 

 

Prachtig concept maar onpraktisch

body {
  font-size: 16px;
}

p {
  margin-top: 2em; /* 2em equals 32px */
}

rem

Root em: Is relatief ten opzichte van het root-element: <html>

 

Meest

aangewezen

unit!

body {
  font-size: 20px;  
}

p {
  /* 2rem equals 32px */
  margin-top: 2rem;
}

Vast vs relatief

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

 

Relatieve eenheden zijn nagenoeg altijd aangewezen.

Conclusie

Gebruik uitsluitend rem voor font-sizing.

Een browser kan de font-size van de html selector veranderen

html {
  
}

body {
  font-size: 1.2rem;  
}

h1 {
  font-size: 2rem;
}

CSS tekst eigenschappen

Kleur en typografie met CSS

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)

 

 

 

html {
  font-size: 16px;
  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:

Wanneer de browser hier niet een bold variatie kan vinden, zal deze zelf een bold genereren.

.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

 

Uitdagingen

Sliding hover animatie

StuBru funky font

(Enkel voor studenten met voorkennis)

Wat is een font?

Kleur en typografie met CSS

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

 - ...

Fonts gebruiken

Kleur en typografie met CSS

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.

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

Dit is een suggestie van 💩Google💩 dat jullie niet mogen 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

Jammer genoeg is Google Fonts onze vriend niet

 

Google Fonts laat u enkel toe om fonts in het TTF formaat te downloaden! Echter Mozilla heeft een beter alternatief: WOFF en WOFF2

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.

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

Green world

Web Design Deel 4: kleur en typografie met CSS

By Evelien Rutsaert

Made with Slides.com

Web Design Deel 4: kleur en typografie met CSS

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

  • 183

More from Evelien Rutsaert