Un leggero bagliore esterno aggiunto a un elemento sulla tua pagina web fa risaltare l'elemento allo spettatore. Uso CSS3 e HTML per applicare un bagliore attorno ai bordi esterni di un oggetto importante. L'effetto è simile a un bagliore esterno aggiunto a un oggetto in Photoshop.
Crea l'elemento per brillare
Gli effetti bagliore funzionano su qualsiasi sfondo, ma hanno un aspetto migliore su sfondi scuri perché il bagliore sembra brillare di più. In un esempio di scatola rettangolare con angoli arrotondati, un elemento DIV viene posizionato in un altro elemento DIV con uno sfondo nero. Il DIV esterno non è necessario per il bagliore, ma è difficile vedere il bagliore su uno sfondo bianco.
Imposta la dimensione e il colore dell'elemento
Dopo aver scelto l'elemento che andrai ad abbellire con un bagliore, aggiungi stili ad esso, come il colore di sfondo, la dimensione e i caratteri.
Questo esempio è un rettangolo blu; la dimensione è impostata su 147px per 90px; e il colore di sfondo è impostato su #1f5afe, un blu reale. Include un margine per posizionare l'elemento al centro dell'elemento contenitore nero.
dietro gli angoli
Creare un rettangolo con gli angoli arrotondati è facile con CSS3. Aggiungi la proprietà di stile del raggio del bordo alla tua classe bagliore. Ricorda solo di usare il –webkit– e –moz– prefissi per la massima compatibilità.
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
raggio di confine: 15px;
Aggiungi il bagliore con un'ombra a scatola
Il bagliore stesso è creato con un'ombra scatolata. Poiché aureola l'intero elemento senza proiettare il bagliore da un lato come un'ombra, imposta le lunghezze orizzontale e verticale su 0 px.
In questo esempio, il raggio di sfocatura è impostato su 15 px e l'ampiezza della sfocatura è di 5 px, ma puoi armeggiare con queste impostazioni per determinare quanto ampio e diffuso vuoi che sia il bagliore. Il colore RGB (255,255,190) è un colore giallo con trasparenza alfa RGBa impostata al 75%—rgb (255,255,190, .75). Scegli un colore luminoso che funziona meglio per il tuo progetto. Come per l'arrotondamento degli angoli, non dimenticare di utilizzare i prefissi del browser (–webkit– e –moz–) per la migliore compatibilità.
-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);