Μάθετε πώς να προσθέτετε τα αποτελέσματα λάμψης γρήγορα και εύκολα με το CSS3

Προσθέστε μια λάμψη σε ένα στοιχείο ιστοσελίδας για έμφαση

Μια μαλακή εξωτερική λάμψη που προστίθεται σε ένα στοιχείο της ιστοσελίδας σας αναγκάζει το στοιχείο να ξεχωρίζει από το θεατή. Χρησιμοποιήστε το CSS3 και το HTML για να εφαρμόσετε μια λάμψη γύρω από τις εξωτερικές άκρες ενός σημαντικού αντικειμένου. Το αποτέλεσμα είναι παρόμοιο με μια εξωτερική λάμψη που προστίθεται σε ένα αντικείμενο στο Photoshop.

Πρώτα δημιουργήστε το στοιχείο για να λάμψει

Τα εφέ λάμψης μπορούν να γίνουν σε οποιοδήποτε έγχρωμο υπόβαθρο, αλλά φαίνονται καλύτερα σε σκούρα φόντο, επειδή τότε η λάμψη φαίνεται να λάμπει περισσότερο. Σε αυτό το παράδειγμα ορθογώνιου κουτιού στρογγυλής γωνίας, ένα στοιχείο DIV τοποθετείται σε άλλο στοιχείο DIV με μαύρο φόντο. Το εξωτερικό DIV δεν είναι απαραίτητο για τη λάμψη, αλλά είναι δύσκολο να δούμε τη λάμψη σε λευκό φόντο.

Δώστε στο DIV μια κατηγορία λάμψης:


Ορίστε το μέγεθος και το χρώμα του στοιχείου

Αφού επιλέξετε το στοιχείο που θα διακοσμήσετε με λάμψη, προχωρήστε και προσθέστε τυχόν στυλ που θέλετε, όπως χρώμα φόντου, μέγεθος και γραμματοσειρές. Αυτό το παράδειγμα είναι ένα μπλε ορθογώνιο. το μέγεθος έχει οριστεί σε 147px by 90px. και το χρώμα φόντου έχει οριστεί σε # 1f5afe, βασιλικό μπλε. Περιλαμβάνει ένα περιθώριο για να τοποθετήσετε το στοιχείο στη μέση του μαύρου στοιχείου δοχείου.