Tekstkleuren Wijzigen in CSS
Eerder hebben we kleuren aan tekst toegevoegd op een zeer intuïtieve en eenvoudige manier. Laten we echter dieper ingaan op de details van kleurtoepassing.
Kleur
Tekstkleur kan worden toegepast op een tekstelement met behulp van de CSS-eigenschap color, waaraan een waarde in verschillende formaten kan worden toegekend. De meest gebruikte kleurwaarden zijn RGB, hex en kleurnamen. Laten we het volgende voorbeeld bekijken, waarin we rood toepassen op de tekst.
index.html
styles.css
Opmerking
Interessante kleurenschema's zijn te vinden op https://colorhunt.co/.
Formaten om kleur te specificeren
Een nadere beschouwing van elk formaat.
Kleurnaam
Gebruik van gereserveerde kleurwoorden is mogelijk. De lijst met gereserveerde kleuren is te vinden op https://htmlcolorcodes.com.
Hex-formaat
Hex geeft kleuren weer als een zescijferige code bestaande uit drie paren van twee cijfers. Elk paar vertegenwoordigt de intensiteit van rood, groen en blauw (in deze volgorde).
Hex-formaatwaarden variëren van 00 (geen intensiteit) tot FF (maximale intensiteit).
RGB-formaat
RGB geeft kleuren weer als een reeks van drie getallen die overeenkomen met de intensiteit van rood, groen en blauw (in deze volgorde)
RGB-formaatwaarden variëren van 0 (geen intensiteit) tot 255 (maximale intensiteit).
Opmerking
Zowel hex- als rgb-waarden worden veel gebruikt in webdesign, en de keuze ertussen hangt af van persoonlijke voorkeuren en projectvereisten.
Transparantie
Transparantie in rgb-kleuren kan worden bereikt door gebruik te maken van de rgba-notatie (rood, groen, blauw, alpha), waarbij alpha het niveau van dekking of transparantie van de kleur aangeeft.
De alpha-waarde kan variëren van 0 (volledig transparant) tot 1 (volledig dekkend). Bijvoorbeeld, de RGBA-waarde rgba(0, 255, 0, 0.5) staat voor een groene kleur met 50% dekking.
index.html
styles.css
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Can you explain the difference between hex, rgb, and color names in CSS?
How do I use rgba to add transparency to a color?
Where can I find a list of all reserved color names?
Awesome!
Completion rate improved to 2.56Tekstkleuren Wijzigen in CSS
Veeg om het menu te tonen
Eerder hebben we kleuren aan tekst toegevoegd op een zeer intuïtieve en eenvoudige manier. Laten we echter dieper ingaan op de details van kleurtoepassing.
Kleur
Tekstkleur kan worden toegepast op een tekstelement met behulp van de CSS-eigenschap color, waaraan een waarde in verschillende formaten kan worden toegekend. De meest gebruikte kleurwaarden zijn RGB, hex en kleurnamen. Laten we het volgende voorbeeld bekijken, waarin we rood toepassen op de tekst.
index.html
styles.css
Opmerking
Interessante kleurenschema's zijn te vinden op https://colorhunt.co/.
Formaten om kleur te specificeren
Een nadere beschouwing van elk formaat.
Kleurnaam
Gebruik van gereserveerde kleurwoorden is mogelijk. De lijst met gereserveerde kleuren is te vinden op https://htmlcolorcodes.com.
Hex-formaat
Hex geeft kleuren weer als een zescijferige code bestaande uit drie paren van twee cijfers. Elk paar vertegenwoordigt de intensiteit van rood, groen en blauw (in deze volgorde).
Hex-formaatwaarden variëren van 00 (geen intensiteit) tot FF (maximale intensiteit).
RGB-formaat
RGB geeft kleuren weer als een reeks van drie getallen die overeenkomen met de intensiteit van rood, groen en blauw (in deze volgorde)
RGB-formaatwaarden variëren van 0 (geen intensiteit) tot 255 (maximale intensiteit).
Opmerking
Zowel hex- als rgb-waarden worden veel gebruikt in webdesign, en de keuze ertussen hangt af van persoonlijke voorkeuren en projectvereisten.
Transparantie
Transparantie in rgb-kleuren kan worden bereikt door gebruik te maken van de rgba-notatie (rood, groen, blauw, alpha), waarbij alpha het niveau van dekking of transparantie van de kleur aangeeft.
De alpha-waarde kan variëren van 0 (volledig transparant) tot 1 (volledig dekkend). Bijvoorbeeld, de RGBA-waarde rgba(0, 255, 0, 0.5) staat voor een groene kleur met 50% dekking.
index.html
styles.css
Bedankt voor je feedback!
