Shadows
With CSS you can create shadow effects!
CSS:n avulla voit lisätä varjoja tekstiin ja elementteihin.
Näissä luvuissa opit seuraavista ominaisuuksista:
text-shadow
box-shadow
CSS-ominaisuus text-shadow
käyttää varjoa tekstiin.
Yksinkertaisimmassa käytössä määrität vain vaakavarjon (2px) ja pystyvarjon (2px):
h1
{
text-shadow: 2px 2px;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
Lisää seuraavaksi väri varjoon:
h1
{
text-shadow: 2px 2px red;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
Lisää sitten sumennustehoste varjoon:
h1
{
text-shadow: 2px 2px 5px red;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
Seuraava esimerkki näyttää valkoisen tekstin mustalla varjolla:
h1
{
color: white;
text-shadow: 2px 2px 4px #000000;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
Seuraavassa esimerkissä näkyy punainen neonhehkuinen varjo:
h1
{
text-shadow: 0 0 3px #FF0000;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000;
}
</style>
</head>
<body>
<h1>Text-shadow with red neon glow!</h1>
</body>
</html>
Jos haluat lisätä tekstiin useamman kuin yhden varjon, voit lisätä pilkuilla erotetun luettelon varjoista.
Seuraava esimerkki näyttää punaisen ja sinisen neonhehkuvarjon:
h1
{
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>
<h1>Text-shadow with red and blue neon glow!</h1>
</body>
</html>
Seuraava esimerkki näyttää valkoisen tekstin, jossa on musta, sininen ja tummansininen varjo:
h1
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
Voit myös käyttää text-shadow -ominaisuutta luodaksesi tavallisen reunuksen tekstin ympärille (ilman varjoja):
h1
{
color: coral;
text-shadow: -1px 0 black, 0 1px
black, 1px 0 black, 0 -1px black;
}
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: coral;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
</head>
<body>
<h1>Border around text!</h1>
</body>
</html>