:before en :after in de praktijk

Geschreven door: op maandag 17 oktober 2016

Leestijd: 3 minuten

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

  • Overeenkomsten tussen Growth Hacking en UX design

    Geschreven door: op zondag 13 september 2020

    Laten we beginnen met wat Growth hacking is, Growth hacking zijn experimenten voor oplossingen die groeiproblemen moeten oplossen. Dit is een nieuwe marketing aanpak die met name wordt gedreven door d ...

    Bekijk het artikel »
  • B2B SEO en Geoptimaliseerde Afbeeldingen

    Geschreven door: op woensdag 12 augustus 2020

    In een tijd waarin 27% van het koopproces van B2B kopers met eigen online research wordt doorgebracht is het essentieel om een goed vindbare website te hebben. Afbeeldingen kunnen, indien geoptimalise ...

    Bekijk het artikel »
  • Prospects zoeken B2B

    Geschreven door: op woensdag 12 augustus 2020

    Het zoeken van B2B prospects is een uitdaging voor elk bedrijf. Met name kwalitatieve B2B prospects.Door vooraf onderzoek te doen naar bedrijven die voldoen aan je criteria en je marketing hierop aan ...

    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
AOC 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-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten