Εφέ σκιάς CSS

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων
Norway

Shadows

With CSS you can create shadow effects!

Hover over me!

Εφέ σκιάς CSS

Με το CSS μπορείτε να προσθέσετε σκιά σε κείμενο και σε στοιχεία.

Σε αυτά τα κεφάλαια θα μάθετε για τις ακόλουθες ιδιότητες:

text-shadow
box-shadow

Σκιά κειμένου CSS

Η ιδιότητα CSS text-shadow εφαρμόζει τη σκιά στο κείμενο.

Στην απλούστερη χρήση του, ορίζετε μόνο την οριζόντια σκιά (2px) και την κάθετη σκιά (2px):

Text shadow effect!

Παράδειγμα

  h1
{
  text-shadow: 2px 2px;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Στη συνέχεια, προσθέστε ένα χρώμα στη σκιά:

Text shadow effect!

Παράδειγμα

  h1
{
  text-shadow: 2px 2px red;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Στη συνέχεια, προσθέστε ένα εφέ θολώματος στη σκιά:

Text shadow effect!

Παράδειγμα

   h1
{
  text-shadow: 2px 2px 5px red;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Το ακόλουθο παράδειγμα δείχνει ένα λευκό κείμενο με μαύρη σκιά:

Text shadow effect!

Παράδειγμα

   h1
{
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

Το ακόλουθο παράδειγμα δείχνει μια κόκκινη σκιά λάμψης νέον:

Text shadow effect!

Παράδειγμα

  h1
{
  text-shadow: 0 0 3px #FF0000;
}

Δοκιμάστε το μόνοι σας →

<!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>

Πολλαπλές σκιές

Για να προσθέσετε περισσότερες από μία σκιές στο κείμενο, μπορείτε να προσθέσετε μια λίστα σκιών διαχωρισμένων με κόμματα.

Το ακόλουθο παράδειγμα δείχνει μια κόκκινη και μπλε σκιά λάμψης νέον:

Text shadow effect!

Παράδειγμα

   h1
{
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Δοκιμάστε το μόνοι σας →

<!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>

Το ακόλουθο παράδειγμα δείχνει ένα λευκό κείμενο με μαύρη, μπλε και σκούρα μπλε σκιά:

Text shadow effect!

Παράδειγμα

   h1
{
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Δοκιμάστε το μόνοι σας →

<!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>

Μπορείτε επίσης να χρησιμοποιήσετε την ιδιότητα text-shadow για να δημιουργήσετε ένα απλό περίγραμμα γύρω από κάποιο κείμενο (χωρίς σκιές):

Border around text!

Παράδειγμα

   h1
{
  color: coral;
  text-shadow: -1px 0 black, 0 1px 
    black, 1px 0 black, 0 -1px black;
}

Δοκιμάστε το μόνοι σας →

<!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>