Geanimeerde radiobuttons

Hiernaast zie je een rijtje radiobuttons. De bovenste is gecheckt. Als je een andere aantikt of -klikt verandert de status met een animatie. Op deze pagina wordt uitgelegd hoe je de animaties maakt. De buttons doen overigens niets.
De animatie is het beste te zien als de eerste button gecheckt is en je dan op de zesde button klikt, of omgekeerd.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De code van het voorbeeld bestaat uit HTML en CSS. JavaScript in het voorbeeld niet gebruikt, hoewel je het in de praktijk wel nodig hebt om de status van de radiobuttons uit te lezen als het formulier niet wordt verwerkt op de server maar op de lokale computer.
• Inspiratie voor dit item is ontstaan door een internetsite die het gebruikt. Voor deze site heb ik het effect nagebouwd.
   
• De werking van het script
• Als een radiobutton wordt gecheckt verandert de kleur van (in het voorbeeld) grijs in een radiaal verlopende tint roze.
• Als bijvoorbeeld de vijfde button gecheckt is en er wordt op de eerste geklikt, is er ook beweging zichtbaar in de vierde, derde en tweede button. De andere kant op geldt het ook.
   
• HTML
• De HTML van het voorbeeld bestaat uit een zestal radiobuttons (<input type="radio">), waarvan het uiterlijk door CSS wordt veranderd.
• Alle buttons hebben name="naam", voor communicatie met ASP, PHP, enz. op de server.
• Alle radiobuttons hebben de klasse demobutton. Die zou voor dit voorbeeld niet nodig zijn, maar omdat een formulier meestal meer bevat dat alleen radiobuttons, is die klasse toegevoegd om de opmaak van de buttons te kunnen scheiden van andere <input>-elementen.
• De radiobuttons hebben alle een uniek id, ten behoeve van de <label>-tags. De id's kunnen in principe ook worden ingezet voor acties door JavaScript op de lokale computer.
• Om de buttons netjes onder elkaar te krijgen is aan buttons een <br> toegevoegd.
• De radiobuttons wordt bij elkaar gehouden door een <div>-tag met klasse demo.
• Omdat er in het voorbeeld geen communicatie is met een server, kan een <form>-tag worden weggelaten. Dat is in he voorbeeld ook gebeurd.
   
• CSS
• De klasse demo positioneert de set radiobuttons in het document, houdt de bij radiobuttons elkaar en zorgt dat ze netjes onder elkaar staan. Daarvoor is text-align:right ingezet in combinatie met padding-left:5px en een zwarte border van 1px breed.
• De radiobuttons hebben alle de klasse demobutton, die wordt gebruikt voor de opmaak. De animatie wordt ook gemaakt met CSS, met de pseudo-klassen checked en active.
• De klasse demobutton verbergt de standaard opmaak van de radiobuttons (appearance:none;), maar houdt ze wel zichtbaar (display:block). Vervolgens wordt een helemaal nieuwe opmaak ingesteld.
• Als eerste wordt een cirkel gemaakt met een diameter van 24px. De achtergrondkleur (background-color)is grijs.
  De donkere buitenrand wordt gemaakt met box-shadow.
• Voor de gecheckte toestand van een button wordt een achtergrond figuur background-imagegebruikt, die gemaakt wordt met een roze kleur, die naar buiten toe steeds transparanter wordt.
   
• Voor de animatie van de achtergrond en de grootte van de buttons is er een transition gedefinieerd, die gebruik maakt van cubic-bezier. Zie het item Bézier-krommen gebruiken in CSS-animaties.
   
• Er zijn twee pseudo-klassen voor demobutton:checked. De eerste verandert alleen de transitions van de radiobuttons, de tweede verandert de background-position in 0 0. Door de transitions gebeurt dit niet ineens, maar zie je de roze achtergrond in beeld schuiven.
• In de begintoestand (demobutton) en als de button is aangeklikt (demobutton.active), staat de achtergrond 24px naar beneden verschoven: background-position:0 24px.
• De regels input.demobutton:checked~input.demobutton en:
  input.demobutton:checked~input.demobutton:active
  bevatten een ˜ (tilde). Deze regels worden actief als een button wordt aangeklikt die hoger ligt dan de button die op dat moment gecheckt is. De roze achtergrondfiguur wordt over 24px naar boven verschoven. Op het scherm zie je beweging naar boven.
  Informatie over de tilde vind je in het item Over >, + en ˜ in Style Sheets.
   
• De hier gebruikte aanpak om het uiterlijk van radiobuttons naar je hand te zetten is de eenvoudigste die ik ken. Het kan ook anders, zie bijvoorbeeld het item Maak je eigen formulier-elementen met CSS II: Radio-buttons.
   
• Toepassen in je eigen site
• Download de zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
• Voeg extra radiobuttons toe of verwijder er juist, zoveel als nodig. Pas de labels aan voor je eigen toepassing.
• Verander de rand om het blok radiobuttons naar je eigen smaak, of verwijder hem juist. Pas ook de positionering in het document aan.
• Pas de (in het voorbeeld grijze) kleur van de achtergrond en van de donkere buitenrand aan naar je eigen smaak.
• Pas de roze kleur van de gecheckte toestand van de radiobuttons aan naar je eigen smaak. Zie daarvoor de items Kleurcodes voor tekst, links en achtergrond en Transparante kleuren in CSS.
• Pas desgewenst de grootte van de buttons aan. Dat doe je door in demobutton de width en height te veranderen. Houd ze wel aan elkaar gelijk. De border-radius moet de helft zijn van width en height.
  Maak width en height niet kleiner dan 16px, om de buttons aanklikbaar te houden.
• Dezelfde wijzigen moeten worden doorgevoerd in de eigenschap background-position op 2 plaatsen in de CSS. De regel background-position:0 0; moet echter niet worden veranderd!
   

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>.)

<style>
.demo {
  position:relative;
  top:0; left:0;
  border:1px solid black;
  float:left;
  margin:0 40px 20px 0;
  text-align:right;
  padding-left:5px;
}
input.demobutton {
  appearance:none;
  dislay:block;
  margin:10px;
  width:24px; height:24px;
  border-radius:12px;
  cursor:pointer;
  vertical-align:middle;
  box-shadow:hsla(0, 0%, 100%, .15) 0 1px 1px, inset
    hsla(0, 0%, 0%, .5) 0 0 0 1px;
  background-color:hsla(0, 0%, 0%, .2);
  background-image:radial-gradient(hsla(0, 100%, 90%, 1) 0%,
    hsla(0, 100%, 70%, .7) 28%, hsla(0, 100%, 30%, 0.4) 70%);
  background-repeat:no-repeat;
  transition:background-position .25s cubic-bezier(.8, 0, 1, 1),
    transform .5s cubic-bezier(.8, 0, 1, 1);
  outline:none;
}
input.demobutton:checked {
  transition:background-position .2s .15s cubic-bezier(0, 0, .2, 1),
    transform .5s cubic-bezier(0, 0, .2, 1);
}
input.demobutton:active {
  transform:scale(1.5);
  transition:transform 1s cubic-bezier(0, 0, .2, 1);
}
input.demobutton, input.demobutton:active {
  background-position:0 24px
}
input.demobutton:checked {
  background-position:0 0;
}
input.demobutton:checked~input.demobutton, input.demobutton:checked~input.demobutton:active {
  background-position:0 -24px;
}
</style>

(Zet dit in de <BODY> bij voorkeur aan het begin.)

<div class="demo">
<label for "demo1">Eerste</label>
<input class="demobutton" type="radio" id="demo1"
    name="naam" checked><br>
<label for "demo2">Tweede</label>
<input class="demobutton" type="radio" id="demo2"
    name="naam"><br>
<label for "demo3">Derde</label>
<input class="demobutton" type="radio" id="demo3"
    name="naam"><br>
<label for "demo4">Vierde</label>
<input class="demobutton" type="radio" id="demo4"
    name="naam"><br>
<label for "demo5">Vijfde</label>
<input class="demobutton" type="radio" id="demo5"
    name="naam"><br>
<label for "demo6">Zesde</label>
<input class="demobutton" type="radio" id="demo6"
    name="naam"><br>
</div>

Downloaden:
 
Druk op de knop:  File: voorb770.zip, 811 bytes.