Ronde hover-effecten met CSS
Hieronder zie je drie cirkels. Als je er met de muis overheen gaat veranderen ze van kleur en lijken ze groter te worden.
Als je er op klikt verschijnt er een alert; de cirkels bevatten nl. een link.
Op deze bladzijde wordt uitgelegd hoe je zoiets maakt.
N.B.: Dit wwerkt alleen als er muis is. Op een aanraakscherm zonder muis wordt de cirkel groter en verschijnt
er alleen een letter (A, B of C) en een cijfer (1, 2 of 3). Er komt geen alert.
-
A
1
-
B
2
-
C
3
Dit is een vrije bewerking van een item uit Webdesigner Magazine nr. 61 (2014) pag. 72 e.v. Het is niet beschikbaar op de
site van dat blad.
Het oorspronkelijke artikel is geschreven door Neil Pearce,
een designer uit Essex, Engeland. De code is op internet niet meer te vinden. Het is te leuk om vergeten te worden, dus
staat het nu hier.
- Er worden twee items besproken:
- De opbouw van de code, in globale termen.
- Inbouwen in je eigen site.
- De opbouw van de code
- Dit wordt helemaal gedaan in HTML en CSS. Er komen geen JavaScript of plaatjes aan te pas, hoewel je voor de opmaak van de cirkels wel plaatjes kunt gebruiken via background-image: url(' … ').
- De CSS staat in de file html-194.css, die je link in de <head>
- De HTML staat op de plaats waar je de cirkels wilt laten verschijnen.
- De techniek om de cirkels te tekenen staat beschreven in Cirkels en ellipsen tekenen met CSS. De rand (border) is iets doorschijnender dan het binnenste deel van de cirkels, dat geeft een leuk effect.
- De cirkels staan in een unordered list, <ul>, die met behulp van display: inline-block naast elkaar zijn gezet.
- De cirkels die verschijnen als je met de muis over een cirkel gaat, lijken groter, maar zijn dat niet. Als je met de muis over een cirkel gaat, worden deze van nul naar 100% geschaald. Daarom lijken ze vanuit het midden te ontstaan.
- De tekst onder de horizontale streep verschijnt met een vertraging van 1 seconde.
- De HTML waarmee dit gemaakt wordt, is omsloten door twee wrappers: De buitenste is <div class="main_wrapper">, die zorgt dat het hele blok met de drie cirkels correct staat gepositioneerd in het document. De binnenste is <section class="inner_wrapper">; die houdt de drie cirkels bij elkaar.
- Van de cirkels zijn hyperlinks gemaakt met behulp van onclick=.
- Inbouwen in je eigen site
- Link het style-sheet in de <head>.
- Bouw de HTML-structuur op in de <body>. Er is een <li>-tag voor elke cirkel. Breid de CSS uit voor elke extra cirkel.
- Om de kleuren aan te passen moet je steeds twee CSS-items aanpassen: img-1 en circle-1, img-2 en
circle-2, enz.
Houd je rgb-waarden voor elk paar CSS-items aan elkaar gelijk. Dat geeft het mooiste resultaat. - In het oorspronkelijke voorbeeld zijn de cirkels veel groter, waardoor er veel meer ruimte is voor tekst. Als je de cirkels
groter wilt maken doe je dat door in de CSS, in grid li {} de eigenschappen height en width groter te
maken. Houd ze aan elkaar gelijk voor cirkels, anders krijg je ellipsen.
- Tenslotte
- Zoals gezegd is ditminder geschikt voor aanraakschermen, omdat daar geen muis is. Het effect verschijnt pas als je een cirkel aantikt.
Gebruik:
- De code staat gedeeltelijk in de <HEAD>, maar voornamelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<link rel="stylesheet" href="styles.css">
(Zet dit in de <BODY>, op de plaats waar het kladblaadje moet verschijnen)
<div class="main_wrapper">
<section class="inner_wrapper">
<ul class="grid">
<li>
<div class="item img-1">
<div class="info circle-1" onclick="javascript:window.alert('een')">
<h3>A</h3>
<p>1</p>
</div>
</div>
</li>
<li>
<div class="item img-2">
<div class="info circle-2" onclick="javascript:window.alert('twee')">
<h3>B</h3>
<p>2</p>
</div>
</div>
</li>
<li>
<div class="item img-3">
<div class="info circle-3" onclick="javascript:window.alert('drie')">
<h3>C</h3>
<p>3</p>
</div>
</div>
</li>
</ul>
</section>
</div>
Downloaden:
Druk op de knop:
File: voorb194.zip, 1327 bytes.
