Ir al contenido principal

Efecto destello CSS3

En estas fechas tan señaladas a todos nos invade el espíritu navideño, y con él las ganas de decorar nuestra casa, nuestra habitación y por qué no, nuestra web.

Por este motivo se me ocurrió crear un efecto destello de luz mediante CSS3 e imágenes para dar la calidez necesaria que nuestra web se merece.

El efecto es sencillo, consiste en dos imágenes (una de fondo y otra que realizará el efecto) y una animación mediante CSS3.

El resultado sería el siguiente:

Navidad

Podemos duplicar cuantas veces queramos la estrella y posicionarla donde mejor nos venga.

A continuación os dejo el fragmento de código HTML y CSS para que lo probéis y hagáis las modificaciones que sean necesarias.

HTML


<div class="efectos">
<img src="directorio/imagen-01.jpg" alt="Navidad" class="background-navidad">
<img src="directorio/imagen-02.jpg" class="destello destello-01">
<img src="directorio/imagen-03.jpg" class="destello destello-02">
</div>

CSS


/*EFECTOS ESTRELLA NAVIDAD*/
.efectos{position:relative;}
.efectos .destello{position:absolute;}
.efectos .destello-01{right: 240px; top: 145px; animation: destello-efecto-01 5s infinite; -webkit-animation: destello-efecto-01 5s infinite;}
.efectos .destello-02{right: 360px; top: 80px; animation: destello-efecto-01 5s infinite; -webkit-animation: destello-efecto-01 2s infinite;}
@-webkit-keyframes destello-efecto-01 {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0.6;transform: scale3d(.3, .3, .3);-webkit-transform: scale3d(.3, .3, .3);}
}

@keyframes destello-efecto-01 {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0.6;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3);}
}

Comentarios

Entradas populares de este blog

Placeholder y su uso en HTML5 y CSS3

¿Qué es Placeholder? Placeholder es un texto descriptivo que incluimos dentro de la etiqueta <input> , cuando introduzcamos un valor se sustituirá automáticamente. Sintaxis HTML Su sintaxis es de lo más simple, dentro de la etiqueta <input> añadimos el atributo placeholder incluyendo el texto descriptivo. <input type="text" name="example" placeholder="Ejemplo de Placeholder"> Debajo podemos ver un ejemplo del código anterior. Soporte en navegadores A continuación podemos ver una lista con el soporte en los principales navegadores :   Chrome 4+   Internet Explorer 10+   Firefox 4+   Safari 5+   Opera 11.5+ Sintaxis CSS Mediante CSS podemos dar estilo al atributo Placeholder. Hay que tener en cuenta que la sintaxis no está estandarizada, por lo que en un futuro puede que cambie. ::-webkit-input-placeholder { color: #2c3e50; } ::-moz-placeholder { /* Firefox 19+ */ color:

Mitos sobre el diseño web responsive

Las idea del diseño responsive o adaptable surgió en el 2008 por el consorcio W3C. El planteamiento se basaba en mejorar la experiencia de usuario unificando la correcta visualización de una página web en cualquier dispositivo; ya fuese un teléfono móvil o un equipo de sobremesa. Muchas eran las ventajas que prometía el diseño responsive, pero también surgieron bastantes mitos que frenaron el entusiasmo por dar el salto a la web adaptable. A continuación vamos a comentar cuatro mitos falsos sobre el diseño responsive: Se debe probar la web en todos los dispositivos El diseño web responsive está enfocado a la resolución del dispositivo no a un modelo concreto. Teniendo en cuenta que hay miles de dispositivos con conexión a Internet esta tarea es prácticamente inviable. Imagina tener en tu casa u oficina cientos o miles de dispositivos en los que tienes que realizar pruebas, sería algo caótico. Por el contrario sí que podemos clasificar todos esos modelos mediante su resolución d