CSS voor gevorderden

Al lange tijd hebben wij een artikel online staan over de basis van CSS in je website. Hier staat vooral uitgelegd wat je kunt met CSS en hoe de CSS van je website opgebouwd wordt. In deze blog gaan we dieper in op de meer geavanceerde mogelijkheden van CSS.

Wist je bijvoorbeeld dat je de volgorde van de blokken op je pagina op verschillende responsive formaten aan kunt passen met CSS? Of dat je in plaats van plaatjes gebruiken iconen kunt gebruiken bij het tonen van je social media kanalen? In deze blog ga je het leren.

We geven vooraf graag een waarschuwing dat deze blog soms behoorlijk technisch kan zijn. Maar jij wilt toch alles weten van websites bouwen? Snel verder lezen dus!

1. Waar plaats je extra CSS in je WordPress website?
2. Extra CSS stylesheet laden via je thema
3. 7 CSS tips die je nog niet kent
3.1 Text shadow met CSS maken
3.2 Opsommingstekens in een lijst met CSS vervangen voor iconen
3.3 Laatste menu item in je hoofdmenu op laten vallen
3.4 Afbeelding met CSS in de achtergrond laden
3.5 CSS border toepassen
3.6 Lettertype inladen via CSS
3.7 Extra tekst laden met :after content
Conclusie

1. Waar plaats je extra CSS in je WordPress website?

Er zijn heel veel verschillende plaatsen waar je de CSS kunt plaatsen voor je website. We zullen een aantal opties opsommen waar je de CSS nog meer zou kunnen plaatsen.

In de customizer van WordPress

Deze vind je via het dashboard van je website en dan ga je naar Customizer. Daarin vind je de optie Extra CSS. Hier kun je de code plaatsen die je nodig hebt.

In de custom CSS optie van je thema

Eigenlijk ieder thema heeft een optie om extra CSS toe te voegen.

Met een extra plugin

In principe is een extra plugin absoluut niet nodig om dit soort zaken te verwerken binnen je website. Maar er kunnen redenen denkbaar zijn (denk bijvoorbeeld aan een website of webshop die je niet zelf beheert maar waarin wel aanpassingen gemaakt moeten worden) om wel te kiezen voor een plugin. Je kunt dan bijvoorbeeld de plugin Simple Custom CSS and JS gebruiken.

In de stylesheet van je child-theme

Ons advies is sowieso om met een child-theme te werken om wijzigingen in de toekomst bij updates van je website nog steeds te laten werken. Wil je het voor jezelf nog duidelijker maken dan raden we zelfs aan te om bijvoorbeeld een mobile.css aan te maken waarin je alle styling voor de responsive weergave van je website verwerkt. Hierover verderop in deze blog meer.

De beste optie is om te werken in een child-theme en dan in de stylesheet.css binnen die map.

2. Extra CSS stylesheet laden via je thema

In de vorige alinea hadden we het over het inladen van een stylesheet specifiek voor mobiel. Dit kan bijvoorbeeld ook een stylesheet zijn voor WooCommerce of voor de styling van Gravity Forms. Bijkomend voordeel is dat je dit voor één website kunt maken en vervolgens bij andere websites kunt integreren. Hiermee bespaar je dus op termijn tijd en ontwikkel je een eenduidige werkwijze binnen je bedrijf.

We gaan er vanuit dat je een child-theme gebruikt voor de website. Voeg de onderstaande code toe aan je functions.php. De eerste regel staat er waarschijnlijk al, voeg dan alleen het stukje ‘wp_enqueue’ toe aan de bestaande code.

function theme_enqueue_styles() {
		wp_enqueue_style( 'mobile-style', get_stylesheet_directory_uri() . '/css/mobile.css');
}

Zorg dat je in je child-theme folder een map ‘CSS’ hebt en dat hier een CSS-bestand in staat met de naam die je definieert in de functions.php.

@media screen and (max-width: 600px) {{
color: #ff0000;
}
}

De bovenstaande code kun je plaatsen in mobile.css. Alle links zullen dan op schermgroottes tot 600 pixels rood zijn. Als je in je thema opties of een andere stylesheet ook de a gedefinieerd hebt zal vanaf 600 pixels die kleur getoond worden. Eventueel zou je deze nog kunnen overschrijven met !important. Je code zal dan worden.

{
color: #000 !important;
}
}

Je bent klaar om verder te werken naar een professionelere webdesignstandaard.

3. 7 CSS tips die je nog niet kent

Er is een behoorlijk aantal opties in CSS die verder gaan dan de basisstyling qua kleuren, lettergroottes enz. Om te voorkomen dat jij het zelf uit moet gaan zoeken hebben wij een aantal van deze functies voor je op een rijtje gezet.

3.1 Text shadow met CSS maken

Je hebt binnen je website een standaard opmaak voor je tekst en uiteraard maak je voor de beste SEO resultaten gebruik van bijvoorbeeld H1- en H2-koppen. Sliders gebruik jij natuurlijk niet, wil je weten waarom stuur ons dan gerust een berichtje, maar een mooie website zul je mogelijk wel voorzien van een headerfoto.

Let wel op dat je deze niet zo hoog maakt dat het voor je bezoekers niet duidelijk is dat er nog meer te zien is op een pagina, maar dat is het onderwerp gebruiksvriendelijke websites en daar hebben we al meerdere blogs over geschreven, dus dat laten we nu rusten.

Stel je gebruikt een headerfoto van 500 pixels hoog. Daar wil je een tekst in zetten. Alleen wat krijgt de meeste aandacht? De tekst of de foto’s? Je zult zien dat als je de tekst bijvoorbeeld standaard wit maakt, het slecht leesbaar is. Hoe verbeter je die leesbaarheid? Voeg een schaduw toe aan de tekst. Het makkelijkste is als je een class toevoegt aan de titels want dan kun je heel specifiek de schaduw aan die titels toekennen. Hoe dat werkt leggen we hieronder uit.

Text Shadow CSS uitleg

CSS text-shadow voorbeeld

Stel je hebt een H2 in de header staan en hier de class ‘header’ aan gekoppeld. Plaats dan deze code in je style.css.

.header h2 { text-shadow: rgba(0,0,0,0.5) 1px 1px 2px !important; }

De kleur kun je in dit geval vervangen voor een andere rgb kleur, dit is de eerste 0,0,0.
Met de 0.5 kun je de transparantie aanpassen.
De afsluitende px-waardes geven aan hoe groot/breed de schaduw moet worden. Dit kun je uiteraard naar wens aanpassen.

3.2 Opsommingstekens in een lijst met CSS vervangen door iconen

Een lijst met je socialemediakanalen in de footer is een handige optie om je bezoekers de mogelijkheid te geven om door te klikken naar jouw socialemediakanalen. Maar hoe plaats je dit? Maak een widget en zorg dat hier een ongeordende lijst komt met de kanalen die je nodig hebt. Dit ziet er zo uit.

<ul class="social"> 
<li><a class="facebook" title="Like onze facebook pagina" href="https://www.facebook.com/jouwkanaal/" target="_blank" rel="noopener">Like ons op facebook</a></li> 
<li><a class="instagram" title="Like onze Instagram pagina" href="https://www.instagram.com/jouwbedrijf/" target="_blank" rel="noopener">Volg ons op instagram</a></li> 
<li><a class="linkedin" title="Volg ons via LinkedIn" href="https://nl.linkedin.com/company/jouwbedrijf/" target="_blank" rel="noopener">Volg ons via LinkedIn</a></li> 
</ul>

Let op de class=”social” die toegevoegd is aan de ul openingstag. Dit doet de truc dus die is belangrijk. Plaats vervolgens de onderstaande code in je stylesheet:

ul.social li + li + li::before {
content: '\f167'; /*LinkedIn*/
}
ul.social li + li::before {
content: '\f16d'; /*Instagram*/
}
ul.social li::before {
display: inline-block;
margin: 0 5px 0 0;
font-family: 'Font Awesome 5 Brands';
font-size: 22px;
color: #FFFFFF;
content: '\f09a'; /*Facebook*/
text-align: center;
width: 25px;
float: left;
}

Social Media Icons met CSSAls je deze code gebruikt krijg je een lijst met drie items naar je socialemediakanalen. Eventueel kun je code voor je iconen wijzigen. Gebruik dan de Font Awesome code die je hier kunt vinden.

3.3 Laatste menu item in je hoofdmenu laten opvallen

In verschillende gevallen kun je een reden hebben om het laatste menu-item op te laten vallen. Dit kan bijvoorbeeld in een WordPress website zijn dat je een offerte-aanvraag op wilt laten vallen of in een webshop dat het laatste menu-item je sale-categorie is. Deze verdienen de aandacht. Hoe je dit doet? Door bijvoorbeeld de achtergrond afwijkend te maken in een opvallende Call To Action-kleur of alleen de tekstkleur aan te passen.

Het voordeel van CSS is dat je precies dat laatste menuiitem aan kunt passen. Hoe je dit doet? Dit is in principe per thema verschillend. Maar als hoofdlijn kun je deze CSS als basis aanhouden en aanpassen naar de classes die jouw thema gebruikt:

#header .main-menu > li.menu-item:last-child > a {
color: #db8778 !important;}
Last Item css

Styling laatste menu item met CSS :last-item

De toevoeging :last-child zorgt ervoor dat het alleen invloed heeft op de het laatste item. Wil je het eerste item? Dan kun je gebruik maken van de toevoeging :first-child.

3.4 Afbeelding met CSS in de achtergrond laden

Op bepaalde websites kan het qua design passen om een achtergrond te laden. Regelmatig gebruiken wij dit met een sterk vervaagde achtergrond zodat de achtergrond puur voor het design is en niet de aandacht wegtrekt.

Als voorbeeld nemen we de website van Tim’s Verhuurbedrijf uit Gouda die wij mochten bouwen. Op de homepage vind je een afbeelding terug achter een tekstvlak. Dit losten wij op met CSS.

Het tekstblok waar de achtergrond achter geplaatst is heeft de class tekst-achtergrond meegekregen. Door een ::after te gebruiken met een background url valt de afbeelding netjes achter de tekst. Met de opacity optie zorgden wij voor transparantie en daarnaast positioneerden wij met verschillende opties de afbeelding. De z-index zorgt ervoor dat de afbeelding altijd helemaal onderaan ligt, zodat het niet bovenop de tekst komt te liggen.

.tekst-achtergrond::after {
content: "";
background: url(https://jouwwebsite.nl/wp-content/uploads/de-afbeelding.png);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}

Op deze manier kun je onafhankelijk van je thema een achtergrond laden.

3.5 CSS border toepassen

Een border rondom een afbeelding? Of een border rondom een tekstblok? Aan de hand van een voorbeeld leggen we je uit hoe je een border kunt aanpassen naar jouw eigen stijl. Standaard heeft de border-optie in CSS verschillende opties; solid, dotted en dashed. Wil je meer, maak dan je eigen border met een eigen gemaakte SVG border.

Wij hebben dit onder andere toegepast op de website van Trouwtekst.com. De blokken op de homepage hebben de class border-box meegekregen en binnen deze class passen we het volgende toe wat zorgt voor de aangepaste border rondom de blokken:

.border-box {
display: block;
border: .5rem solid #000;
border-image: url(/wp-content/uploads/single-border.svg) 5 round;
padding: 20px;}
CSS Border

CSS border met SVG

Hier kun je uiteraard heel veel varianten op bedenken. Ook een interessante optie met CSS border is dat je een border niet altijd aan alle kanten hoeft weer te geven. Bijvoorbeeld met border-top-width style je alleen de border bovenaan. Met border-bottom-color style je alleen de kleur van de border aan de onderzijde. En zo heb je nog diverse variaties. Als je hier alles over wilt weten verwijzen we graag naar W3 Schools.

3.6 Lettertype inladen via CSS

Binnen veel thema’s heb je de mogelijkheid om Google Fonts in te laden. Mocht je nu toch een ander font willen hebben dan kun je dit inladen en via CSS selecteren op basis van een class. Je hebt een .woff en .woff2 lettertype bestand nodig. Let wel op dat je een font gebruikt waar je een licentie voor hebt. Hoe laad je een font via CSS?

@font-face {
font-family: 'quotefont';
src: url('https://jouwwebsite.nl/wp-content/themes/theme/font/fontnaam.woff2') format('woff2'),
url('https://jouwwebsite.nl/wp-content/themes/theme/font/fontnaam.woff') format('woff');
font-weight: normal;
font-style: normal;}

Hoe selecteer je dan het font op bijvoorbeeld een H2?

h2 {
font-family: quotefont !important;
}

Uiteraard kun je vervolgens nog meer aan deze styling meegeven als grootte, letter-spacing en line-height.

3.7 Extra tekst laden met :after content

Er zijn verschillende redenen te bedenken waarom je een extra tekst toe wilt voegen zonder dat je hiervoor de ruimte hebt. Denk bijvoorbeeld aan een tagline onder je logo, of een zwevende pijl om de aandacht te vestigen op een belangrijk onderdeel van je website. In dit voorbeeld leggen we je uit hoe je een tekst toevoegt onder je logo.

.logo:after {
content: "Regel 1 \a Regel 2";
color: #000 !important;
white-space: pre;
font-size: 10px !important;
text-align: center;
color: #5f7795 !important;}
Tagline toevoegen met CSSJe maakt dus gebruik van :after met daarin content: De rest van de bovenstaande opties is voor extra styling. Nog een extra tip: wil je een extra enter voor bijvoorbeeld een tekst op twee regels? Maak dan gebruik van white-space:pre en voeg bij content toe \a. Zie bijgevoegd screenshot voor het resultaat.

Conclusie

Ik hoop dat je het einde van deze blog gehaald hebt ;-) En daarnaast dat je uiteraard inhoudelijk hier iets aan hebt. Wat zijn jouw onmisbare CSS tips? Deel ze in een reactie.

0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *