Geplaatst op

Hoe maak je met CSS een vinkje?

Een rood vinkje achter een tekst maak je als volgt. In het voorbeeld zet ik achter het eerste list-item <li> met de class ‘vinkje’ een rood vinkje.

  • Eerste
  • Tweede

Om het vinkje absoluut te kunnen positioneren ten opzichte van het list-item, maken we de position van het list-item relative. We plaatsen het vinkje met het pseudo-element ::after achter de inhoud van het list-item. We geven de breedte en de hoogte verschillende waarden. Vervolgens maken we alleen de rechter- en de onderrand rood; de beide andere randen maken we transparant. Ten slotte draaien we het geheel 45 graden, zodat het met de punt naar beneden staat.

li.vinkje {position:relative;}
li.vinkje::after { 
  content: " ";
  position:absolute;
  top: 10px;
  width:7px;
  height:13px;
  margin-left:10px;
  border-width:3px;
  border-style:solid;
  border-color: transparent red red transparent;
  transform: rotate(45deg);
}
Geplaatst op

Hoe maak je met CSS een tooltip?

Een tooltip is een aanwijzing bij bijvoorbeeld een formulier-element. Als je met je muis over het formulier-element gaat wordt een korte aanwijzing zichtbaar. In het onderstaande voorbeeld is de tooltip geplaatst bij een checkbox.

Voorbeeld:
Zet hier je aanwijzing

Om een tooltip te maken zet je om het formulier-element een <span> en daarbinnen een tweede <span>. De HTML-code:

<span class="tooltip">
  <input type="checkbox">
  <span class="tooltiptext">Zet hier je aanwijzing</span>
</span>

En dan de CSS. De positioning van de tooltip-container is relative, zodat de positioning van de tooltip-text absolute is ten opzichte van de tooltip-container.

.tooltip {
  position: relative; 
  display: inline-block;
}

Vervolgens maak je de tooltip-text op. Door de absolute positioning ten opzichte van de tooltip-container kan je de tooltip-text rechts van het formulier-element plaatsen.

.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 120%; /* de tooltip komt rechts van het formulier-element */
}

De tooltip-text krijgt een pijltje aan de linkerkant. De manier waarop je zo’n pijltje maakt heb ik in een eerdere post beschreven.

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; 
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #333 transparent transparent; 
}

Ten slotte gebruik je CSS om de tooltip-text te laten verschijnen wanneer je met je muis over het formulier-element beweegt.

.tooltip:hover .tooltiptext {
  visibility: visible;
}
Geplaatst op

Hoe maak je met CSS een driehoekje?

Voor mijn eigen CMS zocht ik naar een pijltje omhoog en een pijltje omlaag. Wilde je vroeger zo’n pijltje of driehoekje op je website, dan was je genoodzaakt in een grafisch programma een driehoekje te tekenen en het grafische bestandje vervolgens in je webpagina te plaatsen. Inmiddels heb ik ontdekt dat veel professionele websites dit rechtstreeks met CSS doen.

Een driehoekje maak je met CSS als volgt. Je neemt een blok zonder hoogte en breedte. Vervolgens definieer je randen (borders), waarbij je (voor een pijltje naar beneden) de bovenste rand een kleur geeft en de overige randen transparant maakt. In code:

width: 0px;
height: 0px;
border-top: 5px solid black;
border-left: 5px solid transparant;
border-right: 5px solid transparant;
border-bottom: 5px solid transparant;

Alleen de bovenrand is in deze CSS opmaak zichtbaar. De schuine kanten links en rechts worden veroorzaakt doordat twee randen die haaks op elkaar staan schuin worden afgesneden. De transparante linker- en rechterrand snijden de bovenrand dus links en rechts schuin af.

Het resultaat is een driehoekje met de punt naar beneden, 10px breed (twee keer de breedte van de randen) en 5px hoog.