Hoe maak je een prijsoverzicht in CSS?

Je kent ze vast wel, van bijvoorbeeld een hosting bedrijf. Een prijsoverzicht met bijvoorbeeld vier mogelijkheden waaruit je kunt kiezen met bovenaan, of juist onderaan de juiste prijs.

Dit kun je maken met een afbeelding, maar het is prima mogelijk om een prijsoverzicht te maken met CSS, in combinatie met HTML. Het voordeel daarvan is dat je eenvoudig onderdelen kunt aanpassen op het moment dat er iets verandert.

Als de prijs omhoog gaat hoef je alleen maar de HTML code aan te passen en niet een hele afbeelding.
Daarnaast is HTML code natuurlijk veel beter als het gaat om zoekmachine optimalisatie.

Prijstabel in HTML en CSS

In deze tutorial laat ik je zien hoe je deze prijstabel kunt maken.

eindresultaat

De eerste stap die we moeten nemen is het maken van een tabel, met alle gegevens.
Lees verder

Hoe krijg je de URL in beeld bij printen?

Wanneer je een webpagina wilt printen kun je heel wat instellingen van de website aanpassen met CSS. Je gebruikt hiervoor een specifiek stijlblad waarbij je alle gegevens voor het te printen geheel invoegt.

Hoe je dat doet lees je in een artikel over CSS voor het printen van je website.

Een van de onderdelen die het printen lastig maakt zijn de verschillende links die je gebruikt. Deze links komen er gewoon als tekst in te staan terwijl, wanneer de gebruiker print, het veel gemakkelijker is als er een complete URL gedrukt staat.
Lees verder

CSS – Een achtergrond mee laten schalen met de grootte

Wanneer je een mooie achtergrond hebt is het de moeite waard dat deze qua grootte mee schaalt met de grootte van de browser. Staat deze klein ingesteld, dan is je afbeelding ook klein en is de browser groot geopend, dan is de afbeelding als het ware meegegroeit.

Wat je jezelf moet realiseren is dat een dergelijke afbeelding best een behoorlijk formaat moet hebben wil je deze ook in grote browserformaten ook mooi laten weergeven.

Er zijn inmiddels genoeg gebruikers die hun scherm al op een formaat van 1920×1080 hebben en daar zul je wellicht dus rekening mee willen houden.

Grote afbeeldingen

Het laden van een dergelijke afbeelding kost wat bandbreedte. Het is dus zaak om de grootte qua KB’s beperkt te houden. Want je wilt uiteindelijk geen heel pixelige achtergrond.

Een achtergrond instellen

Allereerst bepaal je de achtergrond met de volgende code:

1
2
3
4
5
6
html {
  background-image: url(bg-image.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

De 5e regel is om de achtergrond vast te zetten als je scrolt. De achtergrond scrolt in dat geval niet mee als de inhoud van de pagina groter wordt. Deze instelling gebruik je dus wanneer je een achtergrond maakt voor het hele scherm.

We koppelen deze CSS aan de selector HTML. Het is van toepassing voor het hele document.

CSS3 eigenschap ‘cover’

Nu komen we aan de nieuwe onderdelen toe waarmee de achtergrond wordt geplaatst in de hele browser grootte. Dit doen we met de CSS3 eigenschap ‘cover’. Voor de verschillende browsers worden nu nog verschillende regels gebruikt.

1
2
3
4
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Wil je meer lezen over de verschillende browsers, lees dan een eerder artikel hierover eens: HTML5 en CSS3.

Hou er rekening mee dat de oudere browsers niet kunnen omgaan met de ‘cover’ van de achtergrond. Door het geheel te centreren kan dat een overkomelijk probleem zijn. Hou er echter wel rekening mee.

CSS 3 en de prefixes

Door Jan-Willem Wubkes
De nieuwste versie van CSS (Cascading Style Sheets) is nog volop in ontwikkeling, maar dit betekent niet dat webdesigners de nieuwe functies en mogelijkheden nog niet kunnen gebruiken. Iedereen kan nu beginnen met de implementatie van CSS3 op zijn of haar website. CSS3 biedt onder andere de volgende nieuwe functies:

border-radius;
text-shadow;
box-shadow;
opacity.
Lees verder