:before en :after in de praktijk

In de vorige blog “CSS Tips and Tricks” is er verteld over het maken van een driehoek met het CSS-element “:before”. De :before- en :after-elementen hebben oneindig veel mogelijkheden wat ermee gedaan kan worden. In deze blog worden verschillende toepassingen uitgelegd die zijn gebruikt op websites.

1. Ticketbar: ticket-effect in menu

Op de site van Ticketbar (http://amsterdam.ticketbar.eu/) is in de header een menu gebruikt. Wanneer er met de muis over de menu-items wordt bewogen wordt het geselecteerd item oranje. Bij de twee buitenste menu-items wordt de rand getoond alsof het een ticket is. De ‘hap’ uit de ticket is gedaan door middel van :before en :after.

ticketbar-menu.jpg

Om dit effect te creëren is het after-element een cirkel geworden met dezelfde kleur als de achtergrond. De cirkel is zo gepositioneerd dat de helft van de cirkel op de buitenrand van het menu-item staat. Hieronder staat de CSS-code van het after-element:

#main-nav li.hover:nth-child(2):after, #main-nav li.active:nth-child(2):after {

    left: -7px;

}

#main-nav li.hover:nth-child(2):after, #main-nav li.active:nth-child(2):after {

    content: '';

    display: block;

    position: absolute;

    top: 13px;

    width: 14px;

    height: 14px;

    background-color: #00154d;

    border-radius: 10px;

}

Wanneer de “background-color” wordt aangepast naar bijvoorbeeld wit is het duidelijk te zien hoe het element eruit ziet.

ticketbar-menu-edited.jpg

2. Handicare: Pijl in button-class

Op de site van Handicare (https://handicare-trapliften.nl/) zijn verschillende buttons te vinden met een pijl naast de tekst. Deze buttons zijn eigenlijk anchors die gestijld worden door de class “button” aan toe te voegen.

handicare-button.jpg

De pijl is in een :after-element verwerkt, omdat de pijl alleen getoond moet worden wanneer een anchor de class “button” krijgt. Hieronder staat de gebruikte CSS-code voor het maken van de buttons met pijl.

a.button {

    font-size: 17px;

    color: #fff;

    background-color: #0094d0;

    padding: 15px 60px 15px 15px;

    cursor: pointer;

    position: relative;

    display: inline-block;

    text-decoration: none;

    transition: background-color .2s;

    -webkit-transition: background-color .2s;

    -moz-transition: background-color .2s;

    -o-transition: background-color .2s;

}

a.button:after {

    content: '';

    display: block;

    background-image: url(/img/newdesign/button-arrow-right-icon.png);

    background-size: contain;

    background-repeat: no-repeat;

    width: 22px;

    height: 19px;

    position: absolute;

    top: 18px;

    right: 18px;

}

3. LEOXX: Invliegende underline bij hover

Op de voorpagina van LEOXX (https://leoxx.nl/) is een effect toegevoegd aan de “Lees meer”-links. Wanneer er met de muis over deze links wordt bewogen, komt er een lijn van onder naar boven die als underline van de tekst fungeert. Deze lijn is gemaakt door gebruik te maken van een :after-element.

leoxx-read-more.jpg

Het invliegende effect wordt gedaan door middel van de CSS-code “transition”. Met transition kunnen veranderingen van HTML-elementen in een vloeiende animatie getoond worden. De volgende CSS-regels zorgen voor deze animatie op leoxx.nl:

.frontPage #content #area3 div:nth-child(3) p:last-of-type {

    display: block;

    padding-bottom: 10px;

    bottom: 0;

    overflow: hidden;

    text-transform: uppercase;

    font-weight: 800;

    position: absolute;

    bottom: 10px;

    font-family: 'Raleway',sans-serif;

    margin: 0;

}

.frontPage #content #area3 div:nth-child(3) p:last-of-type::after {

    content: "";

    display: block;

    width: 100%;

    border-top: 1px solid #000;

    position: absolute;

    bottom: -1px;

    transition: bottom .2s;

    -webkit-transition: bottom .2s;

    -moz-transition: bottom .2s;

    -o-transition: bottom .2s;

}

.frontPage #content #area3 div:nth-child(3) p:last-of-type:hover:after {

    bottom: 13px;

}


Andere blogartikelen

  • Plugins maken in jQuery

    Geschreven door: op vrijdag 29 juni 2018

    Door zelf code die je vaak gebruikt om te zetten naar jQuery-plugins, zorg je ervoor dat je deze code eenvoudig kan toepassen in andere projecten en je je kan bezighouden met het maken van nieuwe func ...

    Bekijk het artikel »
  • Dependency injection

    Geschreven door: op dinsdag 26 juni 2018

    Vanuit een programmeer standpunt gezien is indeling van code een van de belangrijkste aspecten van het programmeren. Een rommelige werkomgeving maakt het lastig om te vinden wat je nodig hebt. Het opr ...

    Bekijk het artikel »
  • Databasetypen

    Geschreven door: op dinsdag 26 juni 2018

    Bij de meeste websites behoort een database waarin gegevens van de website worden opgeslagen. Er zijn verschillende manieren waarop deze gegevens kunnen worden bijgehouden. De meest gebruikte methode ...

    Bekijk het artikel »
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
partners-logo.jpg

mockup_tablet.png

Bedient u uw (potentiële) klant optimaal binnen het online koopproces? 

Vul de Online Scorecard in ›