Marco outerglow a imágenes puro Css. O transparencia del centro al lateral. 29.3.12
Marco outerglow a imágenes puro Css. O transparencia del centro al lateral.
Un sencillo ejercicio para lograr opacidad creciente a un elemento desde el centro hacia el lateral. O lo que en programas de diseño llaman outerglow o máscaras de transparencias usando sólo Css
Como es sabido, la propiedad opacity se aplica de forma uniforme, no hay forma de hacerla progresiva. Así que esa vía hay que desecharla.
Necesitamos de otro enfoque y encontrar una propiedad que sí lo haga. Y ahí tenemos box-sadhow que nos lo ofrece, con la ventaja de no necesitar etiquetado extra en el html.
Tomemos un enlace con una imagen como contenido, que podría ser un item de un menú, galería...:
<a class="halo" href="#">
<img src="juniokseso.jpg" class="img_left" alt="alt" />
</a>
Puedes elegir cualquier otra etiqueta a tu conveniencia. Lo primero y, sólo a efectos de colocar la imagen centrada, es definir su posición para ser referente de su contenido:
a.halo {
display: block;
width: 379px;
margin: 10px auto;
position: relative;
}
A continuación elegimos la marmita de la poción mágica (:before) y seleccionamos los ingredientes que sólo los grandes druidas conocen:
a.halo::after {
content: "";
background: transparent;
left: 0;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 5;
box-shadow: 0 0 75px 100px #f5f5f5 inset;
-moz-transition: all 3s linear 0s;
-webkit-transition: all 3s linear 0s;
-o-transition: all 3s linear 0s;
-ms-transition: all 3s linear 0s;
transition: all 3s linear 0s;
}
Con el fondo trasparente logramos no arruinar la poción. Lo posicionamos y ta-ta-chan!! ¡box-sadhow! (sigue el enlace del inicio del artículo para conocerlo a fondo).
El border-radius sólo para un efecto (puedes prescindir de este ingrediente) y la transición es la guinda del pastel.
Complementamos las chispitas y burbujeo en la marmita con unas migajas más de css
a.halo:hover::after {
opacity: 0;
}
Y sin necesidad de agitar, remecer o esperar a la luna llena, aquí la imagen con su máscara de trasparencia:
Variación con gradientes Css
A raíz de publicar este juego Css en codepen, recibí tuiter de @csslab con una variación del mismo consistente en utilizar gradientes css en lugar de box-shadow:
Personalmente preferiria CSS gradients en vez de box-shadow ya que tienes más control del diametro e intensidad del degradado.
Marco Css outerglow con gradientes por Csslab
Y este es el resultado.
Gracias por el aporte.
Es lo bueno de compartir. siempre cabe la posibilidad de que alguien mejore tus juegos ;-)
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso