Kleur, typografie,

media queries en favicons

Verschillende kleurnotaties

Namen
 

HSL - HSLa
 

RGB - RGBa
 

Hexadeximale notatie

1

2

3

4

kleur als naam

147 kleurnamen

  • pink
  • red
  • green
  • ...
body {
  background: pink;
}

1

Hue-Saturation-Lightness notatie

Deze notatie krijgt de voorkeur: specifiek en leesbaar!

 

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

HSL

2

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

HSLa

2

alpha (= transparantie):

Red-Green-Blue 

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

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

RGB

3

alpha (= transparantie):

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

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

RGBa

3

van #000000 tot #FFFFFF

ofwel #000 tot #FFF
 

body {
  background: #bada55;
}

Hexadecimaal

4

CSS kleuren overzicht

  1. Namen
     red, tomato, green
  2. HSL - HSLa
    hsla(123, 40%, 20%, 1)
  3. RGB - RGBa
     rgba(123, 40%, 20%, 1)
  4. hexadeximale notatie
     #48963a

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
 

em
 

rem
 

 

1

2

3

Pixel - vaste eenheid

 

 

 

p {
  font-size: 20px;
}

px

1

em

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>

em

2

Relatieve eenheid

 

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

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

rem

3

rem 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 */
}

...

Vast vs relatief

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

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.

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

By Evelien Rutsaert

Source: Lecturer GDM

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

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

  • 257

More from Evelien Rutsaert