Μια απαλή εξωτερική λάμψη που προστίθεται σε ένα στοιχείο στην ιστοσελίδα σας κάνει το στοιχείο να ξεχωρίζει για τον θεατή. Χρήση CSS3 και HTML για να εφαρμόσετε μια λάμψη στα εξωτερικά άκρα ενός σημαντικού αντικειμένου. Το αποτέλεσμα είναι παρόμοιο με μια εξωτερική λάμψη που προστίθεται σε ένα αντικείμενο στο Photoshop.
Δημιουργήστε το Element to Glow
Τα εφέ λάμψης λειτουργούν σε οποιοδήποτε φόντο, αλλά φαίνονται καλύτερα σε σκούρο φόντο γιατί τότε η λάμψη φαίνεται να λάμπει περισσότερο. Σε ένα παράδειγμα ορθογώνιου κουτιού στρογγυλής γωνίας, ένα στοιχείο DIV τοποθετείται σε ένα άλλο στοιχείο DIV με μαύρο φόντο. Το εξωτερικό DIV δεν είναι απαραίτητο για τη λάμψη, αλλά είναι δύσκολο να δείτε τη λάμψη σε λευκό φόντο.
Ορίστε το μέγεθος και το χρώμα του στοιχείου
Αφού επιλέξετε το στοιχείο που θα διακοσμήσετε με μια λάμψη, προσθέστε στυλ σε αυτό, όπως χρώμα φόντου, μέγεθος και γραμματοσειρές.
Αυτό το παράδειγμα είναι ένα μπλε ορθογώνιο. το μέγεθος έχει οριστεί σε 147 εικονοστοιχεία με 90 εικονοστοιχεία. και το χρώμα του φόντου έχει οριστεί σε # 1f5afe, ένα βασιλικό μπλε. Περιλαμβάνει ένα περιθώριο για να τοποθετήσετε το στοιχείο στη μέση του μαύρου στοιχείου δοχείου.
Γύρω από τις γωνίες
Η δημιουργία ορθογωνίου με στρογγυλεμένες γωνίες είναι εύκολη με το CSS3. Προσθέστε την ιδιότητα στυλ περιγράμματος-ακτίνας στην κατηγορία λάμψης σας. Απλώς θυμηθείτε να χρησιμοποιήσετε το –Webkit– και –Μοζ– προθέματα για την υψηλότερη συμβατότητα.
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
ακτίνα περιγράμματος: 15px;
Προσθέστε τη λάμψη με σκιά κουτιού
Η ίδια η λάμψη δημιουργείται με σκιά κουτιού. Επειδή ακινητοποιεί ολόκληρο το στοιχείο χωρίς να προβάλλει τη λάμψη από τη μία πλευρά σαν σκιά, ορίστε τα οριζόντια και κατακόρυφα μήκη σε 0px.
Σε αυτό το παράδειγμα, η ακτίνα θαμπώματος έχει οριστεί στα 15 εικονοστοιχεία και η εξάπλωση της θαμπάδας είναι 5 εικονοστοιχεία, αλλά μπορείτε να παίξετε με αυτές τις ρυθμίσεις για να προσδιορίσετε πόσο μεγάλη και διάχυση θέλετε να είναι η λάμψη. Το χρώμα rgb (255.255.190) είναι ένα κίτρινο χρώμα με διαφάνεια RGBa άλφα σε 75 τοις εκατό—rgba (255.255.190, .75). Επιλέξτε ένα λαμπερό χρώμα που ταιριάζει καλύτερα στο έργο σας. Όπως με τη στρογγυλοποίηση των γωνιών, μην ξεχάσετε να χρησιμοποιήσετε τα προθέματα του προγράμματος περιήγησης (–Webkit– και –Μοζ–) για την καλύτερη συμβατότητα.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);
box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);