Opvallende koppen I: Tekstschaduw
Bij de kop hierboven staat een schaduw. Die is gemaakt met behulp van CSS. Op deze pagina wordt uitgelegd hoe je dat aanpakt.
De Code
- De CSS-code is:
text-shadow:12px 15px 2px #00d
- De parameters hebben de volgende betekenis:
| parameter | Betekenis | |
| h-shadow | Horizontale verschuiving. Deze parameter is verplicht. Je geeft h-shadow op in px, em, etc.,
zie ook het item Afmetingen van letters en toepassing met CSS. Je kunt hier zowel positieve (naar rechts) als negatieve (naar links) getallen opgeven. |
|
| v-shadow | Verticale verschuiving. Deze parameter is verplicht. Je geeft v-shadow op in px, em, etc.,
zie ook het item Afmetingen van letters en toepassing met CSS. Je kunt hier zowel positieve (naar beneden) als negatieve (naar boven) getallen opgeven. |
|
| blur | Breedte van het verloop van schaduw naar achtergrond. Deze parameter is optioneel, mag dus worden weggelaten.
Je geeft blur op in px, em, etc., net als bij h-shadow en v-shadow. Als je blur weglaat, krijgt je een slagschaduw, dus een schaduw met scherpe randen. |
|
| color | Kleur van de schaduw. Deze parameter is optioneel. Je kunt hier elke geldige CSS-kleuraanduiding
gebruiken, zie het item Kleuren in CSS. Als je color weglaat, wordt color:black (zwart) gebruikt. |
Gebruik:
- De code staat in een style-tag, style-sheet of is onderdeel van een style-attribuut van een tag (inline-style).
Opmerking:
Het is mogelijk om dit met JavaScript voor elkaar te krijgen. Daarvoor geef je een id mee aan de tekst.
Dit is bruikbaar als je de schaduwkleur of de grootte van de schaduw wilt veranderen als de pagina als geladen is, om zo de
aandacht van de gebruiker te vragen.
<h1 id="demo" onclick="Verander()"
style="text-shadow:5px 5px 3px red; text-align:center">
Klik op deze tekst<h1>
Klik op deze tekst
Als je op deze tekst klikt, wordt een scriptje gedraaid dat de kleur en de plaats van de schaduw aanpast:
<script>
var strs = ["-5px -5px 3px lime","5px 5px 3px yellow"]
var aa = document.getElementById('demo').style;
function Verander() {
if (aa.textShadow.indexOf('yellow') >= 0)
aa.textShadow = strs[0]
else
aa.textShadow = strs[1]
}
</script>
Toelichting:
De meest voor de hand liggende aanpak om te kijken of de schaduwkleur geel (yellow) of groen (lime) moet worden,
is om aa.textShadow te vergelijken met strs[0]. Dat werkt niet.
Als je in FireFox de string aa.textShadow opvraagt, krijg je een string met gegevens: h-shadow, v-shadow,
blur en color.
Als je echter in Edge en Chrome de string aa.textShadow opvraagt, krijg een andere volgorde: color, h-shadow,
v-shadow en blur.
Je moet dus wat anders verzinnen. Hier is ervoor gekozen om te kijken of de naam van een kleur in aa.textShadow voorkomt
en aan de hand daarvan te beslissen.
Bij het instellen van de textShadow maakt het niet uit of je de kleur vooraan of achteraan in de rij zet.
