Afbeelding met mat transparante overlay

Hierboven zie je een foto. Er bovenop ligt een knop met de tekst: "Log in op deze site". Als je op de knop klikt verdwijnt de knop en wordt een overlay met een inlogschermpje zichtbaar. Dat is alleen ter illustratie, het werkt dus niet.
Het gaat in het voorbeeld over de op matglas lijkende achtergrond van het inlogschermpje. Op deze pagina wordt uit de doeken gedaan hoe je dit kunt aanpakken. De code van het voorbeeld kun je downloaden om zelf te gebruiken, echter zonder de foto.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De code bestaat uit HTML, CSS (in de file styles.css) en JavaScript (in het document).
• Inspiratie voor dit item is ontstaan door een toepassing op internet. Voor deze site heb ik het nagebouwd.
   
• De werking van het script
• Als de pagina is geladen is de knop zichtbaar doordat display op block staat. De overlay is onzichtbaar doordat display op none staat.
• Als er op de knop wordt geklikt verdwijnt de knop doordat display op none wordt gezet. De overlay wordt zichtbaarheid doordat display op block wordt gezet.
• Het matglaseffect wordt gemaakt door een slimme combinatie van kleur, vervaging en doorzichtigheid.
   
• HTML
• De HTML van het voorbeeld bestaat uit een enkele <div>-tag met de klasse container. Deze houdt de knop en de overlay bij elkaar en positioneert het geheel in de regel. De achtergrond is de foto waar de knop en de overlay bovenop liggen.
• De knop is een <button> met id="deKnop". De opmaak wordt gedaan door CSS. Als er op de knop wordt geklikt, wordt de JavaScript-function toggleKnopEnSchermpje() aangeroepen via onclick.
• De overlay is een <div>-tag met id="overlay" voor de communicatie met JavaScript. De opmaak wordt gedaan door CSS.
• De inhoud van de overlay is alleen ter illustratie en heeft geen functie. Het bevat wat tekst in span-tags die met style-attributen zijn opgemaakt. De twee invoervelden zijn input-tags van de typen tekst resp. password.
   
• CSS
• De container houdt de onderdelen bij elkaar en positioneert het geheel in het midden van de regel. De afmetingen (hoogte × breedte) zijn: 500 × 550 px. De achtergrondfoto bedekt de hele div-tag en is horizontaal en verticaal gecentreerd. De hoeken zijn afgerond met een straal van 20px.
• De knop meet 300 × 70 px. De ellipsvorm ontstaat door de afrondingsstraal van 50%. Door de outset, 5px brede rand ontstaat de uiteindelijke knop.
• Bij het laden van de pagina is de knop zichtbaar, dat wordt door JavaScript gewijzigd.
   
• De overlay bevindt zich binnen de container, op 125px van de bovenrand en gecentreerd in de regel. De afmetingen (h × b) zijn 300 × 200 px.
• De rand van de overlay is 2px px breed. De kleur is ingesteld met behulp van rgba(), waardoor het mogelijk is om meteen de opacity in te stellen. De kleur van de rand is wit, maar door de opacity (= 0.3) en de overheersend bruine achtergrond komt die in een beige-achtige tint op het scherm. De hoekpunten zijn afgerond met sraal 15px.
• De overlay zelf is wit van kleur, ook ingesteld met rgba(). Door de opacity (= 0.1) is dat goed te zien, maar door backdrop-filter:blur(30px) is de achtergrond vervaagd en verdwijnt de witte kleur. De vervaging zie je aan de vleugels van de vlinder.
  De function rgba() wordt beschreven in het item Transparante kleuren in CSS.
• De overige elementen worden van de rand van de overlay weggehouden door padding:30px.
• Bij het laden van de pagina is de overlay niet zichtbaar, dat wordt door JavaScript gewijzigd.
   
• JavaScript
• Door op de knop te klikken wordt de function toggleKnopEnSchermpje() gestart via onclick. Deze function verandert display van de knop en de overlay.
   
• Toepassen in je eigen site
• Regel een geschikte foto voor de achtergrond.
• Download de .zip-file en pak hem uit. Zet de bestandsnaam van de foto in de CSS: background:url(), in het blok .container. Je hebt nu en erkend voorbeeld.
• Pas de grootte en eventueel de afrondingsstraal van de containeraan aan je eigen wensen.
• Experimenteer met de achtergrondkleur van de overlay. Dat geeft heel subtiele kleurverschillen, die het effect mooier kunnen maken (maar ook bederven!)
• Vervang de inhoud van overlay door je eigen inhoud. Op internet zijn toepassingen gezien met credit-cards, inlogschermen, foutmeldingen, de mogelijkheden zijn legio.

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">
 
<script>
function toggleKnopEnSchermpje() {
  document.getElementById('deKnop').style.display = "none";
  document.getElementById('overlay').style.display = "block";
}
</script>

(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen.)

<div class="container">
  <button id="deKnop" onclick="toggleKnopEnSchermpje()">Log
    in op deze site</button>
  <div id="overlay">
    <span style="font-size:110%;color:white">Inloggen op deze
      site</span><br>
    &nbsp;<br>
    <div style="text-align:left;color:white">Gebruikersnaam:</div>
      <input type="text"><br>
    &nbsp;<br>
    <div style="text-align:left;color:white">Password:</div>
      <input type="password">
  </div>
</div>

Downloaden:
 
Druk op de knop:  File: voorb760.zip, 1062 bytes.