Kleur, typografie,

media queries en favicons

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!

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, 100, 55, 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)

Media queries

Media queries

Media queries worden gebruikt om vanuit CSS een onderscheid te kunnen maken om conditioneel stijl toe te passen in bepaalde scenarios.

 

Conceptueel: Als [media-query] dan [CSS].

Media queries

h1 {
  text-align: left;
}

@media(min-width: 20rem) {
  h1 {
    text-align: center;
  }
}

Als scherm breder is dan 20rem, mag de text in het midden uitgelijnd worden.

Media queries

h1 {
  color: black;
}

@media(min-width: 20rem) {
  h1 {
    color: blue;
  }
}

@media(min-width: 50rem) {
  h1 {
    color: yellow;
  }
}

Als het scherm tussen 20rem en 50rem is, zal de "h1" blauw zijn

Media queries

h1 {
  color: black;
}

@media(min-width: 20rem) {
  h1 {
    color: blue;
  }
}

@media(min-width: 50rem) {
  h1 {
    color: yellow;
  }
}

CSS wordt gelezen van boven naar onder, in een mobile-first principe start je dus steeds vanaf mobile!

 

Gebruik ook

uitsluitend

"min-width"!

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 (é ê ë ē ę è ž, ...)

Om te excelleren

Wat is een font?

Die tekens kan je gaan categoriseren volgens subsets 

 - Alle Griekse tekens

 - Alle Latijnse tekens

 - Alle cijfers

 - ...

Om te excelleren

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). Zie hiervoor de instructies op het platform van Google Fonts!

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

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

Oefening @home

freelance Created with Sketch.

Green world

Fonts gebruiken

We kunnen ook de verantwoordelijkheid van het hosten van onze fonts 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.

Om te excelleren

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

Om te excelleren

Fonts gebruiken

Roboto.ttf

171kb

Subsetted

Roboto.ttf

47kb

Subsetted

Roboto.woff

26kb

Om te excelleren

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;
}

Om te excelleren

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;
}

Om te excelleren

Favicons

Favicons

Dit zijn de icoontjes dat verschillende systemen gebruiken om jouw website als icoon weer te geven!

 

Favicons

<head>
  ...
  <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
  <link rel="manifest" href="favicons/site.webmanifest">
  <link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#5bbad5">
</head>
...

Verschillende systemen verwachten verschillende resoluties van de icoontjes.

 

 

 

 

Dit zou veel te veel werk zijn om manueel te doen, laat je dus helpen door een online tool!

Tip

Niet duidelijk wat de instructies waren van de favicon generator tool naar keuze?

 

Deze Linkedin Video legt het nog eens voor je uit.

Web Technology - 04 - kleur, typografie, media queries en favicons

By Lecturer GDM

Source: Evelien Rutsaert

Web Technology - 04 - kleur, typografie, media queries en favicons

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

  • 360

More from Lecturer GDM