Tutorial Box Shadow CSS - Πώς να προσθέσετε ένα Drop Shadow σε οποιοδήποτε στοιχείο HTML

Μπορούμε να προσθέσουμε ένα drop shadow σε οποιοδήποτε στοιχείο HTML χρησιμοποιώντας την ιδιότητα CSS box-shadow. Δείτε πώς.

Προσθήκη βασικής Drop Shadow

Ας δημιουργήσουμε πρώτα ορισμένα βασικά στοιχεία HTML για να προσθέσουμε τις σκιές στα:

 Box1 Box2 Box3 

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

p { padding: 10px; } .box { padding: 20px; width: 50%; margin: 30px auto; background: #000; color: #fff; }

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

Ρύθμιση στοιχείων HTML

Για να προσθέσετε μια βασική σκιά, ας χρησιμοποιήσουμε την box-shadowιδιότητα στο πλαίσιο 1:

/* offset-x | offset-y | color */ #box1 { box-shadow: 6px 12px yellow; }
Προσθήκη βασικής σκιάς πτώσης στο πλαίσιο 1

Έχουμε 3 παραμέτρους εδώ. Τα πρώτα 2 είναι, αντίστοιχα, το x-offset και το y-offset. Ορίζουν τη θέση της σκιάς.

Η μετατόπιση σχετίζεται με την προέλευση, η οποία σε HTML είναι πάντα η επάνω αριστερή γωνία ενός στοιχείου. Ένα θετικό x-offset θα μετακινήσει τη σκιά προς τα δεξιά και ένα θετικό y-offset θα μετακινήσει τη σκιά προς τα κάτω.

Η τρίτη παράμετρος είναι το χρώμα της σκιάς σας.

Λάβετε υπόψη ότι παρόλο που χρησιμοποιήσαμε στοιχεία εδώ, η box-shadowιδιότητα μπορεί να εφαρμοστεί και σε οποιοδήποτε άλλο στοιχείο HTML.

Προσθήκη ακτίνας θαμπώματος

Εάν θέλουμε η σκιά να φαίνεται λίγο πιο ρεαλιστική, θα θέλαμε να πειραματιστούμε με την blur-radiusπαράμετρο.

Αυτή η παράμετρος ελέγχει πόσο θαμπάδα τη σκιά έτσι ώστε να γίνεται μεγαλύτερη και ελαφρύτερη. Ας το εφαρμόσουμε στο πλαίσιο 2:

/* offset-x | offset-y | blur-radius | color */ #box2 { box-shadow: 6px 12px 4px red; }
Προσθήκη ακτίνας θαμπώματος στο πλαίσιο 2

Η τιμή των 4 εικονοστοιχείων καθορίζει την ακτίνα του θολώματος να εφαρμόζεται στην πτώση της σκιάς μας.

Προσθήκη ακτίνας Spread

Εάν θέλουμε να ελέγξουμε το μέγεθος της σκιάς, μπορούμε να χρησιμοποιήσουμε την spread-radiusπαράμετρο που ελέγχει πόσο μεγαλώνει ή συρρικνώνεται μια σκιά.

Ας προσθέσουμε μια ακτίνα εξάπλωσης 8px στο πλαίσιο 2:

/* offset-x | offset-y | blur-radius | spread-radius | color */ #box2 { box-shadow: 6px 12px 4px 8px red; }
Προσθήκη ακτίνας εξάπλωσης επιπλέον θόλωσης στο πλαίσιο 2

Θυμηθείτε τη σειρά αυτών των παραμέτρων!

Συνδυασμός πολλαπλών σκιών σε μία ιδιότητα

Εάν θέλουμε να φανταχτούμε, μπορούμε να προσθέσουμε πολλές σκιές πτώσης σε ένα στοιχείο χρησιμοποιώντας μία box-shadowιδιότητα.

Ας το κάνουμε αυτό με το πλαίσιο 3 προσθέτοντας ταυτόχρονα μια μπλε και πράσινη σκιά:

/* Any number of shadows, separated by commas */ #box3 { box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green; }
συνδυάστε πολλές σκιές πτώσης

Μπόνους: Δημιουργήστε ένα Inset Shadow

Αν και δεν θα δημιουργήσει σκιά, η insetπαράμετρος μπορεί επίσης να χρησιμοποιηθεί με την box-shadowιδιότητα.

Όπως υποδηλώνει το όνομα, αυτή η παράμετρος δημιουργεί μια ένθετη σκιά (δηλ. Σκιά μέσα σε ένα κουτί).

Η insetπαράμετρος μπορεί να τοποθετηθεί είτε στην αρχή είτε στο τέλος του

box-shadowιδιοκτησία. Εδώ αποδεικνύουμε τη χρήση του με ένα blockquoteστοιχείο.

HTML:

 The key to success is to start before you're ready. 

— Marie Forleo

CSS:

blockquote { width: 50%; margin: 50px auto; padding: 20px; font-size: 24px; box-shadow: inset 10px 5px black; }
Δημιουργήστε μια ένθετη σκιά

Φυσικά μπορείτε να προσθέσετε κάποια θαμπάδα και να απλώσετε για να βελτιώσετε τη σκιά ή ακόμα και πολλές σκιές:

 box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;
Inset shadow σε συνδυασμό με drop shadow

Με την box-shadowιδιότητα, μπορούμε εύκολα να κάνουμε στοιχεία σε μια ιστοσελίδα να ξεχωρίζουν για να δημιουργήσουμε ένα ωραίο εφέ φωτισμού 3D.

Εάν θέλετε να κάνετε κάποιον πειραματισμό, εδώ είναι ένα στυλό κώδικα που δημιούργησα με τα παραδείγματα που χρησιμοποιήθηκαν σε αυτό το σεμινάριο.

Παίξτε και δείτε τι μπορείτε να βρείτε!

Θέλετε να δείτε περισσότερες συμβουλές και γνώσεις για την ανάπτυξη Ιστού;

  • Εγγραφείτε στο εβδομαδιαίο ενημερωτικό δελτίο μου
  • Επισκεφτείτε το ιστολόγιό μου στο 1000 Mile World
  • Ακολούθησέ με στο τουίτερ