CSS: 2 Handige technieken die de ontwikkeling van sites makkelijker maakt

Met CSS3 is tegenwoordig veel meer mogelijk dan wat er duidelijk wordt gemaakt. Hieronder zijn twee technieken die tijdens de ontwikkeling van verschillende sites het werk een stuk makkelijker hebben gemaakt.

Een driehoek door middel van borders

In verschillende gevallen is er een driehoek nodig geweest als een pijl. In de meeste gevallen werd er gebruik gemaakt van http://fontawesome.io/. Hier zijn honderden iconen te krijgen die oneindig geschaald kunnen worden. Als pijl maakte was “fa-caret-up” een perfect icoon.

fontawesome-driehoek.jpg

Om deze iconen te gebruiken moet de css van font-awesome geïntegreerd worden binnen de site. Dit zorgt ervoor dat er veel iconen worden toegevoegd die mogelijk nooit op de site gebruikt worden.

Om deze reden is het handiger om gebruik te maken van de kracht van CSS3.

Wanneer een element (bijvoorbeeld een span) een breedte van 0px krijgt, zullen de borders vanuit één punt komen. Wanneer de span vier borders krijgt van 20 pixels dik, ziet het er als volgt uit.

border-vier-zijdes.jpg

Wanneer een pijl naar boven moet wijzen, zijn er drie borders nodig:

-Border-bottom: dit wordt de pijl die naar boven wijst.

-Border-left & border-right om de driehoek-vorm te creëren.

Dit ziet er als volgt uit:border-drie-zijdes.jpg

Als de border-left en border-right de kleur “transparent” krijgen, blijft alleen de border-bottom zichtbaar. Hierdoor ontstaat de pijl.

border-driehoek.jpg

Hieronder de HTML-regel om dit effect te bereiken:

<span style="display: block; border-bottom: 20px solid red; border-right: 20px solid transparent; border-left: 20px solid transparent; /* border-top: 20px solid red;*/ width: 0;"></span>

Deze techniek is toegepast in pagina’s op http://hapjesaanhuis.nl/ die later dit jaar zichtbaar zijn op de site.

driehoek-voorbeeld-hapjesaanhuis.jpg

Het tegen gaan van verschuivende menu-elementen met :after

Wanneer menu-elementen naast elkaar zijn uitgelijnd en een hover-effect krijgen van font-weight: bold, zal dit problemen leveren. Wanneer een element bold wordt gemaakt, zullen de element aan de rechterkant gaan mee schuiven. Dit komt doordat een bold lettertype een klein stuk breder is dan de normale font-weight. Om dit probleem tegen te gaan kan er gebruik gemaakt worden van het CSS3-element “:after”. Met :after kan via CSS een element binnen een HTML-element toegevoegd worden.

De truck om het verschuiven van element tegen te gaan is om de bold-tekst al toe te voegen aan het huidige element. Dit zorgt ervoor dat de breedte van het element al gelijk is aan het dikkere font. Dit kan op de volgende manier  bereikt worden:

Als eerste moet er een menu zijn. Hieronder staat een basis voor een menu:

<ul id="menu">
  <li><a href="#" title="menu-item 1">menu-item 1</a></li>
  <li><a href="#" title="menu-item 2">menu-item 2</a></li>
  <li><a href="#" title="menu-item 3">menu-item 3</a></li>
  <li><a href="#" title="menu-item 4">menu-item 4</a></li>
</ul>

Met de volgende CSS kan een simpel menu gebouwd worden:

ul#menu {
    list-style-type: none;
    padding: 0;
}

ul#menu li {
    display: inline-block;
    margin-right: 5px;
}

ul#menu li a:hover {
    font-weight: bold;
}

Wanneer er met de muis over de menu-elementen wordt bewogen is te zien dat de andere element verschuiven. In de anchors zijn titles gebruikt, deze zijn nodig om dit effect te krijgen. Let hier ook goed op dat de title-attribuut dezelfde tekst bevat als de anchor zelf.

Met de volgende CSS-regel kan het probleem verholpen worden:

ul#menu li a:after {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0px;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
}

Wat deze CSS-code doet is:

-Als content wordt de title van de parent (hier de anchor) gebruikt.

-De color wordt transparant zodat de tekst niet leesbaar is.

-De overflow en visibility zijn gebruikt om zeker te zijn dat de tekst niet zichtbaar is.

-De height van 0px zorgt ervoor dat er geen witruimte onder de tekst ontstaat.

menuitem-bold.jpg

Dit allemaal zorgt voor het resultaat dat menu-items niet meer verschuiven wanneer de dikte van de letters wordt aangepast. Deze techniek is toegepast op verschillende websites waaronder https://leoxx.nl/ en https://handicare-trapliften.nl/.

menuitem-voorbeeld-leoxx.jpg


Op De Hoogte Blijven?

Online Succes realiseren is een vak, een vak wat wij verstaan en waarover we je graag vertellen. Schrijf je in voor onze maandelijkse nieuwsbrief en blijf op de hoogte van trends, thema’s en succesverhalen.

Aanhef

Andere blogartikelen

Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
Aliancys is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd gazellen 2017
Google analytics
Google adwords
TelefoonE-mail