:before en :after in de praktijk header image

:before en :after in de praktijk

maandag 17 oktober 2016 ·Leestijd: 2 minuten
contacteer auteur:

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

B2B E-commerce
 Wakker worden!
Geschreven door
op dinsdag 28 juni 2022
Veel B2B-bedrijven in blijven hangen in; nauwelijks vindbare, verouderde B2B e-commerce websites met minimale conversiemogelijkheden en een betreurenswaardige gebruikerservaring. Zonde!
B2B Leadgeneratie: Alles wat je altijd al wilde weten!
Geschreven door
op maandag 27 juni 2022
B2B online leadgeneratie is het proces van het identificeren van de ideale klanten voor uw product of dienst, en hen vervolgens overhalen tot aankoop. Het is een essentiële activiteit voor B2B sales- en marketingteams.
Wat maakt een B2B webshop succesvol?
Geschreven door
op zondag 26 juni 2022
De opmars van de B2B webshop neemt toe. Regelmatig krijgen wij de vraag of er een groot verschil is tussen een consumentgerichte webshop en een puur B2B gedreven webshop. In deze blog leggen wij u uit hoe een B2B webshop succesvol kan zijn en worden.
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book â€ș