In de webtip van vandaag gaan we eens kijken hoe we op een simpele manier met CSS een 3D effect kunnen verkrijgen op bijvoorbeeld buttons of plaatjes. Dit gaan we doen door middel van borders. Door bijvoorbeeld de 'bottom-' en 'rechter-border' een net iets donkerder kleurtje te geven dan de 'boven-' en 'linker-border' krijgen we een effect waardoor het lijkt dat een button of plaatje eruit springt. Doen we juist het tegenovergestelde dan krijgen we een effect waardoor het lijkt dat een button of plaatje ergens 'in ligt'.

Hoe werkt het?

Als eerst zullen we eens kijken naar het 'uitspringend' effect, dit doen we met bijvoorbeeld de volgende code in CSS:

.button {
    background: #fefefe;
    border-bottom: 2px solid #aaa;
    border-right: 2px solid #aaa;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    padding: 5px;
}

Willen we juist het tegenovergestelde effect, dan gebruiken we (bijvoorbeeld) het volgende:

.button {
    background: #fefefe;
    border-top: 2px solid #aaa;
    border-left: 2px solid #aaa;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 5px;
}

De bovenstaande codes resulteren dan in het volgende:

Uiteraard kun je dit alles ook weer combineren met bijvoorbeeld ronde hoeken, gradients of schaduw.

Demo

Een demo van deze webtip vind je hier.