CSS Het palet voor je website

Alles wat je op een website ziet wordt vormgegeven door Cascading Style Sheets. Het is samen met JavaScript en HTML een van de pilaren van web development. Daarom vond ik het tijd worden om eens uit te leggen wat CSS nou eigenlijk is. Daarnaast heb ik een aantal voorbeeldjes uitgekozen om te showcasen wat je allemaal met CSS kan doen. Zo hebben we een bubble animatie, een loading animatie en een van de nuttigste frameworks; Bootstrap!
updated: Sep 25, 2020 at 6:31PM | published: Sep 25, 2020

Cascading Style Sheets ook wel CSS genoemd worden gebruikt om je webpagina eruit te laten zien zoals je gewend went. CSS zorgt ervoor dat een HTML document zijn opmaak krijgt. CSS zijn een mogelijkheid om de vormgeving van een website los te trekken van de content. Deze scheiding zorgt ervoor dat je meer controle hebt over je presentatie en dat meerdere webpagina’s van hetzelfde stylesheet gebruik kunnen maken. CSS is samen met JavaScript en HTML een van de pilaren van webdevelopment.

Doordat CSS zorgde voor een consistente vormgeving van websites heeft Word Wide Web Consortium (W3C) het als standaard vastgelegd. De oorspronkelijke standaard standaard staat bekend als CSS1. De laatste complete stabiele versie is 2.1 vanaf versie 3 zijn ze het module per module aan het uitbreiden. Internet media type (MIME type) kan ook gebruik maken van CSS. Naast HTML ondersteund XHTML, XML en SVG het gebruik van CSS ook.

Het woord cascading is bedacht vanwege de mogelijkheid dat CSS eigenschappen overerven. Elk element neemt de stijl over van zijn parent element tenzij anders opgegeven. Er zijn honderden aspecten die je als style mee kan geven van hoogte, breedte, kleur, achtergrond tot lettertypes. Het mooie van het overerf principe is dat je iets maar een keer in het body van je html document hoeft aan te geven en vervolgens hoef je voor je de kinderen alleen maar de uitzonderingen een stijl mee te geven.

Zoals je kan kan lezen zijn er ontzettend veel mogelijkheden met CSS. Het is onmogelijk alle voorbeelden te geven van wat je allemaal kan doen met CSS maar ik heb er een aantal leuke en of nuttige voorbeelden uitgekozen.

Voorbeeld 1

Als eerste voorbeeld heb ik een waiting animatie. Jullie kennen allemaal wel het icoontje dat je ziet als je ergens op klikt en je moet even wachten totdat iets op het backend verwerkt is. Het is dan altijd wel fijn als je een wacht animatie ziet zodat je ziet dat je webpagina wel bezig is. Er zijn ontzettend veel voorbeelden hiervan en ik zal je er een paar laten zien.

De eerste is een standaard variant die je klant laat zien dat er iets aan het laden is. Het is een standaard lijn dat in een rondje ronddraait. Hiernaast zie je een voorbeeld hoe dat er dan uit komt te zien en hieronder laat ik de code zien hoe je dit zelf kan implementeren.

HTML

<div class=”fourbis-ring”>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
</div>

In onze css voegen we onze animatie toe

CSS

.fourbis-ring {
       display: inline-block;
       position: relative;
       width: 80px;
       height: 80px;
}
.fourbis-ring div {
       box-sizing: border-box;
       display: block;
       position: absolute;
       width: 64px;
       height: 64px;
       margin: 8px;
       border: 8px solid #fff;
       border-radius: 50%;
       animation: fourbis-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
       border-color: #fff transparent transparent transparent;
}
.fourbis-ring div:nth-child(1) {
       animation-delay: -0.45s;
}
.fourbis-ring div:nth-child(2) {
       animation-delay: -0.3s;
}
.fourbis-ring div:nth-child(3) {
       animation-delay: -0.15s;
}

@keyframes fourbis-ring {
       0% {
              transform: rotate(0deg);
       }
       100% {
              transform: rotate(360deg);
       }
}

De 2e wacht animatie is er een die wij zelf gebruiken voor een aantal van onze producten waaronder ons customer portal. Het is ons logo dat steeds verdwijnd en verschijnd. Het is een grid van 9 blokjes waar elk een deel van ons logo te zien is en die laten we met een animatie verschijnen en verdwijnen.

Fun Fact!
Recentelijk hebben wij onze customer portal gelanceerd. 

HTML

<div class=”fourbis-cube-grid”>
      <div class=”fourbis-cube fourbis-cube1″><img src=”https://4bis.nl/wp-content/uploads/2020/09/4bis.png”></div>
      <div class=”fourbis-cube fourbis-cube2″><img src=”https://4bis.nl/wp-content/uploads/2020/09/4bis.png”></div>
      <div class=”fourbis-cube fourbis-cube3″><img src=”https://4bis.nl/wp-content/uploads/2020/09/4bis.png”></div>
      <div class=”fourbis-cube fourbis-cube4″><img src=”https://4bis.nl/wp-content/uploads/2020/09/4bis.png”></div>
      <div class=”fourbis-cube fourbis-cube5″><img src=”https://4bis.nl/wp-content/uploads/2020/09/4bis.png”></div>
      <div class=”fourbis-cube fourbis-cube6″><img src=”https://4bis.nl/wp-content/uploads/2020/09/4bis.png”></div>
      <div class=”fourbis-cube fourbis-cube7″><img src=”https://4bis.nl/wp-content/uploads/2020/09/4bis.png”></div>
<div class=”fourbis-cube fourbis-cube8″><img src=”https://4bis.nl/wp-content/uploads/2020/09/4bis.png”></div>
      <div class=”fourbis-cube fourbis-cube9″><img src=”https://4bis.nl/wp-content/uploads/2020/09/4bis.png”></div>
</div>

In onze css voegen we onze animatie toe en wat styling toe

CSS

<style>
.fourbis-cube-grid {
     width: 100px;
     height: 100px;
     z-index: 2;
     display:block;
     margin:auto;
}

.fourbis-cube-grid .fourbis-cube {
     width: 33%;
     height: 33%;
     float: left;
     -webkit-animation: fourbis-cubeGridScaleDelay 1.3s infinite ease-in-out;
     animation: fourbis-cubeGridScaleDelay 1.3s infinite ease-in-out;
     overflow: hidden;
}

.fourbis-cube img{
     position: absolute;
     min-width: 100px;
     min-height: 100px;
}

.fourbis-cube-grid .fourbis-cube2 img{
     left: -100%;
}

.fourbis-cube-grid .fourbis-cube3 img{
     right: 0;
}

.fourbis-cube-grid .fourbis-cube4 img{
     bottom: -100%;
}

.fourbis-cube-grid .fourbis-cube5 img{
     bottom: -100%;
     left: -100%;
}

.fourbis-cube-grid .fourbis-cube6 img{
     right: 0;
     bottom: -100%;
}

.fourbis-cube-grid .fourbis-cube7 img{
     bottom: 0;
}

.fourbis-cube-grid .fourbis-cube8 img{
     bottom: 0;
     left: -100%;
}

.fourbis-cube-grid .fourbis-cube9 img{
     bottom: 0;
     right: 0;
}

.fourbis-cube-grid .fourbis-cube1 {
     -webkit-animation-delay: 0.2s;
     animation-delay: 0.2s;
}
.fourbis-cube-grid .fourbis-cube2 {
     -webkit-animation-delay: 0.3s;
     animation-delay: 0.3s;
}
.fourbis-cube-grid .fourbis-cube3 {
     -webkit-animation-delay: 0.4s;
     animation-delay: 0.4s;
}
.fourbis-cube-grid .fourbis-cube4 {
     -webkit-animation-delay: 0.1s;
     animation-delay: 0.1s;
}
.fourbis-cube-grid .fourbis-cube5 {
     -webkit-animation-delay: 0.2s;
     animation-delay: 0.2s;
}
.fourbis-cube-grid .fourbis-cube6 {
     -webkit-animation-delay: 0.3s;
     animation-delay: 0.3s;
}
.fourbis-cube-grid .fourbis-cube7 {
     -webkit-animation-delay: 0s;
     animation-delay: 0s;
}
.fourbis-cube-grid .fourbis-cube8 {
     -webkit-animation-delay: 0.1s;
     animation-delay: 0.1s;
}
.fourbis-cube-grid .fourbis-cube9 {
     -webkit-animation-delay: 0.2s;
     animation-delay: 0.2s;
}

@-webkit-keyframes fourbis-cubeGridScaleDelay {
     0%, 70%, 100% {
          -webkit-transform: scale3D(1, 1, 1);
          transform: scale3D(1, 1, 1);
     } 35% {
          -webkit-transform: scale3D(0, 0, 1);
          transform: scale3D(0, 0, 1);
     }
}

@keyframes fourbis-cubeGridScaleDelay {
     0%, 70%, 100% {
          -webkit-transform: scale3D(1, 1, 1);
          transform: scale3D(1, 1, 1);
     } 35% {
          -webkit-transform: scale3D(0, 0, 1);
          transform: scale3D(0, 0, 1);
     }
}
</style>

Voorbeeld 2

Zoals je ziet zijn er met CSS een hoop leuke animaties te maken, een andere leuke animatie zijn bubbles die verschijnen en naar boven ontsnappen. De 7up website gebruikt hier een leuk voorbeeld van maar je kan het natuurlijk ook gebruiken als je een website moet maken voor een aquarium of dierenwinkel gespecialiseerd in vissen.

Dit is een CSS bubble animatie

Voorbeeld 3

Een ander leuk voorbeeld met css is shape-outside eigenschap die je kan gebruiken als je text om een plaatje te laten vloeien. Hiermee kan je je textblokken er net wat dynamischer uit laten zien. Dit kan heel leuk zijn voor de wat speelsere websites. Zeker als je naast je textblok een plaatje van een rondje hebt dan kan je je text erom heen laten buigen zodat je het meer kan laten lijken alsof het onderdeel is van je website in plaats van een random plaatje dat je hebt geplaatst. Hieronder kan je de CSS zien die nodig is om dit te realiseren. Het zijn eigenlijk maar 2 css regels die je in een class zet en deze class kan je dan aan je image toevoegen.

CSS

.circle-shape {
      shape-outside: circle(50%);
      float: left;
}

Voorbeeld 4

Het laatste wat ik wil benoemen is Bootstrap 4. Bootstrap is een open-source css framework. Het is ontwikkeld zodat je snel responsive websites op kan zetten. Het bevat op CSS en JavaScript gebaseerde templates voor formulieren, navigatie en nog veel meer interface componenten. Hiermee kan je heel snel het geraamte van een website ontwikkelen. Er zijn tal van nuttige bootstrap componenten die kant en klaar zijn en alleen maar aangepast moeten worden om ze te integreren met je huisstijl. Bvb kant en klare buttons, een carousel, dropdowns, cards en breadcrumbs. Hieronder zie je een aantal bootstrap componenten in werking. Dit zijn allemaal kant en klare voorbeelden zo van de Bootstrap 4.0 site gepakt

Bootstrap buttons voorbeelden




Bootstrap card voorbeeld
Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link
Bootstrap accordion voorbeeld

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Zoals je ziet gaat er met CSS een wereld aan mogelijkheden voor je open en ik heb allen nor maar het topje van de ijsberg laten zien er is nog van alles mogelijk. Heb je nou CSS problemen of moet er een website voor je gemaakt woorden onze specialisten staan altijd voor je klaar.


Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de ReactHooks serie! We gaan het hebben over useCallback en over useMemo. Met deze hooks kunnen we waardes of callback memoizen dit kan nuttig zijn bij zware operaties of om te zorgen dat bepaalde componenten niet altijd mee rerenderen. Zeker omdat bij kleine applicatie het vaak efficienter is om niet te optimaliseren dan wel.

Lees meer
Redux de Intro!

Redux de Intro!

Deze week een korte introductie van de 4 basisbegrippen die je nodig hebt om Redux te begrijpen. We gaan kort uitleggen hoe state wordt aangepast in een Redux Store met behulp van Reducers en Actions. En we vertellen wat al deze begrippen doen en hoe ze werken in een Redux applicatie.

Lees meer

Software ontwikkeling op maat

Hoe werkt het?

Wat wonderen doet voor het ene bedrijf kan zinloos zijn voor een ander bedrijf. Daarom hebben we oplossingen op maat die het unieke karakter van jouw bedrijf respecteren. We werken in een positieve spiraal van testen, monitoren en verzamelen gegevens om precies te weten te komen wat voor jou werkt en wat niet. Het is onze ‘whole package’-mindset, een aandacht voor details die ons in staat stelt om elke keer jouw prestatiedoelstellingen te bereiken. Dus ontspan en geniet van de rit!