Un resplendor suau afegit a un element de la vostra pàgina web fa que l'element es destaqui per l'espectador. Utilitzeu CSS3 i HTML per aplicar una brillantor a les vores exteriors d'un objecte important. L'efecte és similar a un resplendor extern afegit a un objecte de Photoshop.
Primer creeu l'element per brillar intensament
Els efectes brillants es poden fer en qualsevol fons de color, però es veuen millor en fons foscos perquè, després, el resplendor sembla brillar més. En aquest exemple rectangular de cantonada arrodonida, un element DIV es col·loca en un altre element DIV amb un fons negre. El DIV exterior no és necessari per al resplendor, però és difícil veure el resplendor sobre un fons blanc.
Doneu al DIV una classe de resplendor:
Estableix la mida i el color de l'element
Després d'escollir l'element que vas a embellir amb un resplendor, aneu endavant i afegiu els estils que vulgueu, com ara el color de fons, la mida i els tipus de lletra. Aquest exemple és un rectangle blau; la mida està establerta a 147px en 90px; i el color de fons s'estableix en # 1f5afe, un blau real. Inclou un marge per col·locar l'element al mig de l'element contenidor negre.
Round the Corners
Crear un rectangle amb cantonades arrodonides és fàcil amb CSS3. Afegiu la propietat d'estil del radi fronterer a la classe de resplendor. Només recordeu utilitzar els prefixos -webkit- i -moz- per a la màxima compatibilitat.
-webkit-border-radius: 15px;-moz-border-radius: 15px;límit de radi: 15 px; Afegiu el resplendor amb una ombra de caixa
El resplendor mateix es crea amb una ombra de caixa. Com que voleu que halo tot l'element i no projecta la brillantor d'un costat com una ombra, estableixi les longituds horitzontals i verticals a 0px. En aquest exemple, el radi de difusió s'estableix a 15 píxels i la difusió del borrós és de 5 píxels, però podeu fer el cercle amb aquests paràmetres per determinar la seva amplitud i difusió. El color rgb (255,255,190) és de color groc amb una transparència alfa RGBa fixada al 75%-rgba (255,255,190,75). Trieu un color brillant que funcioni millor per al vostre projecte. Igual que amb l'arrodoniment de les cantonades, no us oblideu d'utilitzar els prefixos del navegador (-webkit- i -moz-) per a la millor compatibilitat.
-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-ombra: 0px 0px 15px 5px rgba (255, 255, 190, .75); Proveu el quadre brillant
Proveu el quadre brillant en un o més navegadors i realitzeu els ajustos necessaris per donar l'efecte resplendor que funcioni millor per a la vostra pàgina web.
