Una luce esterna morbida aggiunta a un elemento nella pagina Web fa sì che l'elemento si distingua dal visualizzatore. Usa 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.
Prima crea l'elemento in bagliore
Gli effetti di bagliore possono essere eseguiti su qualsiasi sfondo di colore, ma hanno un aspetto migliore su sfondi scuri perché il bagliore sembra più brillante. In questo esempio di casella rettangolare con angoli arrotondati, un elemento DIV viene inserito 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.
Dai al DIV una classe di splendore:
Imposta la dimensione e il colore dell'elemento
Dopo aver scelto l'elemento che impreziosisci con un bagliore, vai avanti e aggiungi tutti gli stili che desideri, come colore di sfondo, dimensioni e caratteri. Questo esempio è un rettangolo blu; la dimensione è impostata su 147 px per 90 px; e il colore di sfondo è impostato su # 1f5afe, un blu reale. Include un margine per posizionare l'elemento nel mezzo dell'elemento contenitore nero.
Round the Corners
Creare un rettangolo con angoli arrotondati è facile con CSS3. Aggiungi la proprietà di stile border-radius alla tua classe glow. Basta ricordare di usare i prefissi -webkit- e -moz- per la massima compatibilità.
-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; Aggiungi il bagliore con un'ombra di casella
Il bagliore stesso viene creato con un'ombra di casella. Poiché desideri che l'alone venga trascinato dall'elemento intero e non proietti il bagliore da un lato come un'ombra, imposta le lunghezze orizzontale e verticale su 0px. In questo esempio, il raggio di sfocatura è impostato su 15px e la diffusione della sfocatura è di 5px, ma è possibile giocherellare con quelle impostazioni per determinare quanto ampio e diffuso si desidera che il bagliore sia. Il colore rgb (255,255,190) è un colore giallo con trasparenza alfa RGBa impostata su 75 percento-rgba (255,255,190, 0,75). Scegli un colore brillante che funzioni al meglio per il tuo progetto. Come per arrotondare gli angoli, non dimenticare di usare i prefissi del browser (-webkit- e -moz-) per la massima 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); Prova la scatola luminosa
Prova la scatola luminosa in uno o più browser e apporta le modifiche necessarie per dare l'effetto bagliore che funziona meglio per la tua pagina web.
