Pts | Px | Em | Porcentaje |
6 pt | 8 px | 0.5 em | 50% |
7 pt | 9 px | 0.55 em | 55% |
7.5 pt | 10 px | 0.625 em | 62.5% |
8 pt | 11 px | 0.7 em | 70% |
9 pt | 12 px | 0.75 em | 75% |
10 pt | 13 px | 0.8 em | 80% |
10.5 pt | 14 px | 0.875 em | 87.5% |
11 pt | 15 px | 0.95 em | 95% |
12 pt | 16 px | 1 em | 100% |
13 pt | 17 px | 1.05 em | 105% |
13.5 pt | 18 px | 1.125 em | 112.5% |
14 pt | 19 px | 1.2 em | 120% |
14.5 pt | 20 px | 1.25 em | 125% |
15 pt | 21 px | 1.3 em | 130% |
16 pt | 22 px | 1.4 em | 140% |
17 pt | 23 px | 1.45 em | 145% |
18 pt | 24 px | 1.5 em | 150% |
19 pt | 25 px | 1.55 em | 155% |
20 pt | 26 px | 1.6em | 160% |
22 pt | 29 px | 1.8em | 180% |
24 pt | 32 px | 2em | 200% |
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: 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=
Comentarios
Publicar un comentario