viernes, 26 de diciembre de 2014

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);}
}

miércoles, 24 de diciembre de 2014

Etiqueta theme-color en Chrome 39 para Android

Android 5.0 Lollipop

¿Qué es theme-color?

Se trata de la nueva funcionalidad que trae la versión 39 de Chrome para Android Lollipop. Consiste en asignar un color personalizado en la barra de tareas del navegador acorde a nuestra cabecera o el color que queramos.

Sintaxis theme-color

Su sintaxis es bastante sencilla, basta con elegir un color válido en formato hexadecimal e incluir la siguiente etiqueta antes de la etiqueta de cierre </head>:

<meta name="theme-color" content="#1b1b37">

El resultado sería el siguiente:

Antes

Captura Pruebas Acceso

Después

Captura Pruebas Acceso 02