Εφέ σκιάς CSS

Καφέ
Σκιές

Δημιουργία εφέ σκιάς με CSS!

Αναστενάστε εδώ!

Εφέ σκιάς CSS

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

Σε αυτό το σεμινάριο, θα μάθετε τις παρακάτω ιδιότητες:

  • text-shadow
  • box-shadow

CSS κείμενο σκιάς

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

Η πιο απλή χρήση είναι να καθορίσετε μόνο το οριζόντιο και το κάθετο σκιές (2px):

Text Shadow Effect!

Example

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

Try It Yourself

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

Text Shadow Effect!

Example

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

Try It Yourself

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

Text Shadow Effect!

Example

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

Try It Yourself

Η παρακάτω παράδειγμα δείχνει το λευκό κείμενο με σκοτεινή σκιά:

Text Shadow Effect!

Example

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

Try It Yourself

Η παρακάτω παράδειγμα δείχνει την αχνή φωτεινή σκιά κόκκινου:

Text Shadow Effect!

Example

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

Try It Yourself

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

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

Η παρακάτω παράδειγμα δείχνει την αχνή φωτεινή σκιά κόκκινου και μπλε:

Text Shadow Effect!

Example

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

Try It Yourself

The following example shows white text with black, blue, and dark blue shadows:

Text Shadow Effect!

Example

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

Try It Yourself

You can also use the text-shadow property to create a solid border (no shadow) around the text:

Border around the text!

Example

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

Try It Yourself