¡Hallo YCLAS-vrienden! Deze week delen we een aantal tips en goede ideeën om je website beter te laten uitzien met CSS-code.
Je moet weten dat het uiterlijk van je website bepaalt of gebruikers en klanten blijven, of vertrekken op zoek naar een site die er beter uitziet.
Eerst moet je het gebruik van CSS inschakelen in je websitepaneel; klik hier om te zien hoe je aangepaste CSS inschakelt en toevoegt op YCLAS.
Laten we beginnen!
Achtergrond
Tegenwoordig gebruiken de beste websites verlopende achtergronden, een eenvoudige en vloeiende kleurovergang; als je de juiste kiest, krijgt je site een moderne stijl. Hier zijn 3 verschillende moderne achtergronden:
Verloop #1 (Pacifische kleuren)
#grad
{background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
Verloop #2 (Sterke kleuren)
#grad
{background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}
Verloop #3 (Zachte kleuren)
#grad
{background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}
Lettertypen
Het lettertype van je website speelt een fundamentele rol; we raden je aan schreefloze (sans-serif) lettertypen te gebruiken, zoals:
Arial
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
Tahoma
p.sansserif {
font-family: Tahoma, Geneva, sans-serif;
}
Trebuchet MS
p.sansserif {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
Dit zijn lettertypen die prettig zijn voor het oog.
Randen van elementen
Nog een tip: gebruik afgeronde randen voor elementen, dat laat je website er eenvoudig en modern uitzien. Gebruik hiervoor deze code:
p.round {
border: 2px solid black;
border-radius: 8px;
}
Je kunt de kleur (solid black) en straal (8px) van de rand aanpassen.
Navigatiebalk
De navigatiebalk is een van de belangrijkste dingen op een website. Een goed gemaakte navigatiebalk helpt gebruikers om goed op je site te navigeren. Hier is een vaste/actieve navigatiebalk (sticky); deze zorgt ervoor dat je navigatiebalk meebeweegt en boven blijft plakken, afhankelijk van de scrollpositie:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4682B4;
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: White;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4169E1;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#search">Search</a></li>
<li><a href="#YCLAS">YCLAS</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
Je kunt de kleuren (Background, Text, en Active/Current Link) en de grootte (Padding) van de navigatiebalk aanpassen.
Responsive afbeeldingen
¡Afbeeldingen! Tegenwoordig zijn afbeeldingen essentieel op elke website, en we zijn gewend overal afbeeldingen te zien; maar het is niet genoeg om alleen een afbeelding op je website te plaatsen, je moet die afbeelding instellen als responsive afbeelding om er op elk apparaat beter uit te zien. Gebruik hiervoor deze code voor alle afbeeldingen die je responsive wilt maken:
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="X" width="IMG width" height="IMG height">
De X staat voor de afbeeldings-URL; bij IMG Width en IMG Height moet je de originele afmetingen van de afbeelding invullen.
Website-opmaak
Dit gaat over de verdeling van de belangrijkste elementen van je website, bijvoorbeeld de header. De header is het eerste element dat elke gebruiker ziet wanneer hij de website binnenkomt, dus die moet makkelijk te begrijpen en eenvoudig zijn. Hier is CSS-code voor een afbeeldingsheader met tekst:
body {
margin: 0;
}
.header {
background:url(X) no-repeat;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>HEADER TEXT</h1>
</div>
De X staat voor de afbeeldings-URL, bij Padding kun je de grootte van de afbeeldingsheader instellen, en bij Header Text kun je schrijven wat je boven de headerafbeelding wilt tonen.
Een ander belangrijk element van je website is de footer, onderaan je pagina geplaatst, net zo belangrijk als de header. Je kunt deze code gebruiken voor een mooie footer:
.footer {
background-color: #00FFFF;
padding: 25px;
text-align: center;
}
Je kunt de kleur en grootte (padding) van de footer aanpassen.
Moderne CSS in 2026: wat er veranderd is sinds deze tips
De snippets hierboven laten nog steeds de basisideeën zien, maar CSS is sinds het schrijven van deze post flink veranderd. Browsers delen nu een gemeenschappelijke basis van functies, en het thema waarop je site draait, bepaalt welke selectors je CSS kan targeten. Dit is wat je moet weten voordat je iets in je aangepaste CSS plakt.
Controleer browserondersteuning met Baseline
Baseline, gedefinieerd door de W3C WebDX Community Group, labelt een functie als "nieuw beschikbaar" zodra deze werkt in alle kernbrowsers (Chrome, Edge, Firefox en Safari, op desktop en mobiel). 30 maanden later wordt het "breed beschikbaar", wanneer de meeste sites het kunnen gebruiken zonder zich zorgen te maken over oudere browsers. MDN toont de Baseline-status boven aan elke referentiepagina. Dit zijn de functies die de meeste workarounds hierboven vervangen:
| In plaats van... | Gebruik vandaag | Baseline-status (MDN) |
|---|---|---|
| Hexkleuren herhalen in elke regel | CSS custom properties (variabelen), bijv. var(--nova-accent) | Lang gevestigd |
| Hover-tinten handmatig uitkiezen | color-mix(), bijv. de accentkleur gemengd met 18% zwart | Breed beschikbaar (in alle grote browsers sinds mei 2023) |
| Extra classes of JavaScript om een ouderelement te stylen | :has(), bijv. form:has(:invalid) button { opacity: .6; } | Breed beschikbaar (in alle grote browsers sinds december 2023) |
| Lange, herhaalde selectors | CSS-nesting met & | Breed beschikbaar (in alle grote browsers sinds december 2023) |
| Media queries gekoppeld aan de schermbreedte | Container queries (@container), zodat een kaart zich aanpast aan de kolom waarin hij staat | Breed beschikbaar (in alle grote browsers sinds februari 2023) |
Zwevende menu-items (li { float: left; }) | Flexbox: display: flex; gap: 8px; | Lang gevestigd |
Begin vanuit je thema, niet vanaf een leeg blad
De huidige Yclas-handleiding schakelt aangepaste CSS in onder Vormgeving > Aangepaste CSS, met de schakelaar "Aangepaste CSS gebruiken". Er wordt ook gewaarschuwd dat klassenamen verschillen per thema, waardoor een regel die voor één thema geschreven is, na het wisselen van thema niets meer doet. Algemene selectors zoals #grad of ul doen niets of herstylen elke lijst op je site, dus richt je altijd op de classes die je thema daadwerkelijk gebruikt (klik met de rechtermuisknop op een element en kies Inspecteren in je browser om ze te vinden).
Nieuwe Yclas-sites draaien op het Nova-thema, dat gebouwd is op CSS-variabelen. Om de hoofdkleur te wijzigen, gebruik de instelling voor de accentkleur in de thema-opties in plaats van CSS: knoppen, links en accenten volgen deze allemaal, en de hover-tint wordt automatisch berekend. Voor andere aanpassingen is het overschrijven van een variabele veiliger dan regels herschrijven, omdat één regel elk element verandert dat deze gebruikt:
:root {
--nova-radius: 10px; /* rondere of hoekigere kaarten en knoppen */
--nova-radius-sm: 6px;
}
Nog twee regels houden je uit de problemen. Het vak voor aangepaste CSS accepteert alleen CSS, dus laat de <style>-, <head>- en HTML-tags uit enkele snippets hierboven weg. En controleer elke wijziging zowel op een telefoon als op een computer voordat je opslaat.
Probeer deze tips en laat ons weten of ze voor jou werken!
Let op: het gebruik van CSS-code vereist enige vaardigheid en ervaring. Als je nog nooit CSS hebt gebruikt, raden we je aan enkele CSS-tutorials en CSS-handleidingen te gebruiken om te bereiken wat je zoekt. Wil je geen CSS gebruiken, dan kun je onze thema's gebruiken; we bieden een verscheidenheid aan aangepaste websitesjablonen klik hier om ze te zien.
Met vriendelijke groet,
het YCLAS-team.
