Geanimeerde icons
Hiernaast staat een transparante knop. Als je er met de muis overheen gaat, verandert die in drie andere knoppen. Hier
staat beschreven hoe je dat doet.
De middelste knop brengt je naar de facebookpagina van deze site, de andere twee knoppen doen niets.
Op een aanraakscherm tik je op of naast de knop.
De code kun je downloaden om zelf te gebruiken, inclusief de plaatjes.
- Er worden twee items besproken:
- De werking van het script.
- Gebruiken in je eigen site.
- De werking van het script
- De code bestaat uit HTML en CSS. Er komt geen JavaScript aan te pas.
- De HTML bestaat uit een <div>-tag (de wrapper), met daarbinnen <div>-tag met de knoptekst en drie andere <div>-tags, die de drie icons en de links bevatten.
- De wrapper wordt gebruikt om de knop in het document te positioneren.
- Met de class social social wordt de knoptekst opgemaakt (de border wordt geregeld door wrapper) en wordt het rollover-effect geregeld. Verder houdt deze de drie icons bij elkaar en op de goede plaats.
- Voor de icons (drie in het voorbeeld, maar je kunt er net zoveel maken als je wilt) is er binnen .social een klasse
met de naam .social_xx, waarbij xx iets zegt over het icon en de bijgehorende link:
• .social_pl gaat over Google plus.
• .social_fb gaat over Facebook.
• .social_tw gaat over Twitter. - Elk van deze klassen heeft een logo als background. Dit zijn .png-plaatjes. Elk van deze logo's heeft een grijze achtergrond.
- Bij elk van deze klassen hoort een pseudo-klasse :hover, die niets anders doet dan het achtergrondplaatje vervangen
door hetzelfde plaatje, maar dan met een gekleurde achtergrond.
- De links zijn geprogrammeerd in de HTML, met <a>-tags.
- Gebruiken in je eigen site
- Pak de download-file uit. Maak de code zoals hieronder aangegeven.
- Plaats de knop in je document door de CSS van #wrapper aan te passen. Maak de knop op door de CSS van #wrapper,
.social en .social p aan te passen.
- Je kunt de icons vervangen door je eigen icons. In dat geval verander je de url() in de CSS-eigenschap background,
zowel voor de a als voor de a:hover.
- Het is mogelijk de knop te voorzien van meer of juist minder icons. Als je dat wilt moet je rekening houden met het volgende:
• Zorg dat alle icons even groot zijn. In het voorbeeld zijn ze 48px × 48px. Als je andere afmetingen wilt moet je de afmetingen door het hele style-sheet heen aanpassen, maar ook de afmetingen in #wrapper worden anders. Ook moet je dan de translateY(-64px) in .social:hover aanpassen. Het is kwestie van een beetje spelen om de goede waarde te vinden.
• De icons hoeven niet persé vierkant te zijn, zolang ze maar allemaal even hoog zijn. Anders wordt het rollover effect lelijk.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk 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 de transparante knop moet verschijnen).
<div id="wrapper">
<div class="social">
<p>DELEN</p>
<div class="social_pl"><a href="#"></a></div>
<div class="social_fb"><a
href="https://www.facebook.com/webmasterij"
target="NewBen"></a></div>
<div class="social_tw"><a href="#"></a></div>
</div>
</div>
Downloaden:
Druk op de knop:
File: voorb512.zip, 8575 bytes.
