Cómo crear un banner animado usando CSS3. Banners receptivos en HTML5 y CSS3 Cree fácilmente banners en css3

Para comprender la estructura de nuestro marcado, centrémonos en el barco por un segundo:

>

>
>
>
Ahora, echemos un vistazo al primer banner de la página de demostración. Hay tres animaciones separadas que tienen lugar en el barco:
• Animación: cuando el barco se desliza hacia la izquierda. Esto se aplica directamente a una lista desordenada (un grupo de elementos de barco).
• Animación: que le da al barco un efecto de balanceo, simulando un barco flotando en el agua. Esto se aplica directamente a los elementos de la lista (el barco).
• Animación: oculta el signo de interrogación. Esto se aplica al div (signo de interrogación).
Si no está mareado, vuelva a mirar la página de demostración. Verá que la animación que se aplica al elemento de la lista (bote), haciendo que el bote se levante, también afecta al DIV dentro de él (con un signo de interrogación). Además, la animación de "deslizamiento" que se aplica a la lista desordenada (grupo) también afecta el elemento de la lista y los DIV dentro de él (el barco y el signo de interrogación). Esto nos lleva a observaciones importantes:
Los elementos secundarios heredan la animación de sus padres, además de su propia animación. Este conocimiento se ha agregado a nuestro arsenal, pero la cantidad de niños / padres al crear una animación te dejará boquiabierto (¡y el procesador en la computadora portátil de tu abuela)!
CSS
Antes de adentrarnos en las cosas realmente interesantes y comenzar a crear animaciones, todavía tenemos que crear estilos para navegadores que están atascados en el siglo XVIII.
Estilos alternativos para navegadores antiguos

Simplemente crearemos estilos alternativos como si la animación CSS no existiera (la idea de que la animación CSS no existe hará que cualquier adulto no solo llore, sino que se quede a mi lado :)). En otras palabras, si nuestra animación no se reproduce, el banner aún debería verse decente. De esta forma, cuando alguien vea un banner con un navegador antiguo, verá un banner normal y estático en lugar de un espacio vacío.
Por ejemplo: si alguien usa CSS como este, habrá problemas:
/* ¡SENTIDO CONTRARIO! * /

0% (opacidad: 0;)
100% (opacidad: 1;)
}
Div (
opacidad: 0; / * ¡Este bloque está oculto por defecto! * /

}
Si el navegador del usuario no admite la animación, el banner permanecerá invisible para él. ¡Y luego el cliente derribará la puerta de la oficina del vendedor - con una motosierra en la mano - y exigirá que le expliquen por qué no vendieron su producto! Y si no comprenden que el navegador puede ser tan miserable, su vida terminará horriblemente y sus últimas palabras serán maldiciones contra Internet Explorer ... :)
Pero no se preocupe, proporcionaremos soporte avanzado para navegadores:
/* LA DIRECCION CORRECTA */
@keyframe nuestra-animación-fundida (
0% (opacidad: 0;)
100% (opacidad: 1;)
}
Div (
opacidad: 1; / * este div será visible por defecto * /
animación: our-fade-in-animation 1s 1;
}
Como puede ver, el DIV se mostrará incluso si la animación no se reproduce. Si se puede reproducir la animación, el DIV se ocultará inmediatamente y la animación se reproducirá hasta el final.
Ahora que sabemos cómo hacer que nuestros banners animados sean compatibles con navegadores más antiguos, pasemos a CSS básico.
Hay tres cosas clave a tener en cuenta:
• Dado que estos anuncios se pueden utilizar en varios sitios web, Haremos que todos nuestros estilos CSS sean muy específicos.... Comenzaremos declarando cada selector con id: # ad-1. Esto evitará que nuestros estilos de banner interfieran con los estilos y elementos existentes.
• Seremos decididos ignorar la función de retardo de la animación al crear nuestra animación. Si usáramos la función de retraso de la animación, además de diseñar nuestros elementos de la manera correcta (visible de forma predeterminada), todo estaría visible en la pantalla antes de que la animación finalmente comenzara a reproducirse. Es por esto que la animación comienza de inmediato, lo que nos permite ocultar elementos de la pantalla hasta que los necesitemos. Simularemos el retraso de la animación aumentando la duración y ajustando manualmente los fotogramas clave. Verá ejemplos de esto cuando comencemos a crear animaciones.
• Si es posible, usa una animación para múltiples elementos... De esta forma podemos ahorrar mucho tiempo y reducir la expansión del código. Puede crear varios efectos diferentes en la misma animación ajustando la duración y las transiciones.
Entonces, comenzaremos a crear nuestro anuncio de banner. Asegurémonos de que tenga una posición relativa (posición: relativa) para que los elementos de su interior se puedan colocar correctamente. También debemos asegurarnos de que la propiedad overflow: hidden esté configurada para ocultar cualquier cosa innecesaria:
# ad-1 (
ancho: 720px;
altura: 300px;
flotador izquierdo;
margen: 40px auto 0;
background-image: url (../images/ad-1/background.png);
posición de fondo: centro;
repetición de fondo: no repetición;
desbordamiento: oculto;
posición: relativa;
caja-sombra: 0px 0px 6px # 000;
}
# ad-1 #content (
ancho: 325px;
flotar derecho;
margen: 40px;
alineación de texto: centro;
índice z: 4;
posición: relativa;
desbordamiento: visible;
}
# ad-1 h2 (
familia de fuentes: "Alfa Slab One", cursiva;
color: # 137dd5;
tamaño de fuente: 50px;
altura de línea: 50px;

animación: animación de desvanecimiento retardado 7s 1 entrada y salida; / * H2 se desvanecerá con un retraso de animación simulado * /
}
# ad-1 h3 (

color: # 202224;
tamaño de fuente: 31px;
altura de línea: 31px;
sombra de texto: 0px 0px 4px #fff;
animación: animación de desvanecimiento retardado 10 s 1 facilidad de entrada y salida; / * H3 se desvanecerá con un retraso de animación simulado * /
}
# formulario ad-1 (
margen: 30px 0 0 6px;
posición: relativa;
animación: forma-animación 12s 1 entrada y salida; / * Este código mueve nuestro formulario de correo electrónico * /
}
# ad-1 # correo electrónico (
ancho: 158px;
altura: 48px;
flotador izquierdo;
relleno: 0 20px;
tamaño de fuente: 16px;
familia de fuentes: "Lucida Grande", sans-serif;
color: #fff;
sombra de texto: 1px 1px 0px # a2917d;
border-top-left-radius: 5px;
radio de borde inferior izquierdo: 5px;
borde: 1px sólido # a2917d;
esquema: ninguno;
caja-sombra: -1px -1px 1px #fff;
color de fondo: # c7b29b;
imagen de fondo: gradiente lineal (inferior, rgb (216, 201, 185) 0%, rgb (199, 178, 155) 100%);
}
# ad-1 #email: focus (
imagen de fondo: gradiente lineal (inferior, rgb (199, 178, 155) 0%, rgb (199, 178, 155) 100%);
}
# ad-1 #submit (
altura: 50px;
flotador izquierdo;
cursor: puntero;
relleno: 0 20px;
tamaño de fuente: 20px;
familia de fuentes: "Boogaloo", cursiva;
color: # 137dd5;
sombra de texto: 1px 1px 0px #fff;
border-top-right-radius: 5px;
radio de borde inferior derecho: 5px;
borde: 1px sólido # bcc0c4;
borde izquierdo: ninguno;
color de fondo: #fff;
imagen de fondo: gradiente lineal (inferior, rgb (245, 247, 249) 0%, rgb (255, 255, 255) 100%);
}
# ad-1 #submit: hover (
imagen de fondo: gradiente lineal (inferior, rgb (255, 255, 255) 0%, rgb (255, 255, 255) 100%);
}
Ahora diseñaremos el agua y la animaremos en consecuencia:
# ad-1 ul # agua (
/ * Si quisiéramos agregar otra animación para el agua (moviéndose horizontalmente, por ejemplo), podríamos hacerlo aquí * /
}
# ad-1 li # water-back (
ancho: 1200px;
altura: 84px;
background-image: url (../images/ad-1/water-back.png);

índice z: 1;
posición: absoluta;
abajo: 10px;
izquierda: -20px;
animación: water-back-animation 3s infinita facilidad de entrada y salida; / * Efecto de rebote de agua * /
}
# ad-1 li # water-front (
ancho: 1200px;
altura: 158px;
imagen de fondo: url ( ../images/ad-1/water-front.png) ;
repetición de fondo: repetición-x;
índice z: 3;
posición: absoluta;
abajo: -70px;
izquierda: -30px;
animación: water-front-animation 2s infinita facilidad de entrada y salida; / * Otro efecto del rebote del agua es ligeramente diferente. Haremos esta animación un poco más rápido para crear algún tipo de perspectiva. * /
}
Ahora diseñemos el barco y todos sus elementos. Nuevamente, llamaremos a la animación apropiada:
# ad-1 ul # barco (
ancho: 249px;
altura: 215px;
índice z: 2;
posición: absoluta;
abajo: 25px;
izquierda: 20px;
desbordamiento: visible;
animación: barco en animación 3s 1 salida fácil; / * Mover grupo primero * /
}
# ad-1 ul # barco li (
ancho: 249px;
altura: 215px;
imagen de fondo: url (../images/ad-1/boat.png);
posición: absoluta;
abajo: 0px;
izquierda: 0px;
desbordamiento: visible;
animación: barco-animación 2s infinita facilidad de entrada y salida; / * Simulación de un barco balanceándose en el agua - ya se utiliza una animación similar para el agua misma. * /
}
# ad-1 # signo de interrogación (
ancho: 24px;
altura: 50px;
imagen de fondo: url ( ../images/ad-1/question-mark.png) ;
posición: absoluta;
derecha: 34px;
superior: -30px;
animación: animación diferida retardada 4s 1 entrada y salida; / * Ocultar el signo de interrogación * /
}
Finalmente, diseñaremos el grupo de nubes y una nube. También llamaremos una animación bastante ingeniosa que les dará un efecto de desplazamiento continuo. Aquí hay una ilustración de lo que sucederá:

Estos estilos son:
# ad-1 #clouds (
posición: absoluta;
arriba: 0px;
índice z: 0;
animación: animación en la nube 30s infinito lineal; / * Mueve las nubes a la izquierda, un número infinito de veces * /
}
# ad-1 # cloud-group-1 (
ancho: 720px;
posición: absoluta;
izquierda: 0px;
}
# ad-1 # cloud-group-2 (
ancho: 720px;
posición: absoluta;
izquierda: 720px;
}
# ad-1 .cloud-1 (
ancho: 172px;
altura: 121px;
imagen de fondo: url (../images/ad-1 / cloud-1 .png);
posición: absoluta;
arriba: 10px;
izquierda: 40px;
}
# ad-1 .cloud-2 (
ancho: 121px;
altura: 75px;
imagen de fondo: url (../images/ad-1 / cloud-2 .png);
posición: absoluta;
superior: -25px;
izquierda: 300px;
}
# ad-1 .cloud-3 (
ancho: 132px;
altura: 105px;
imagen de fondo: url (../images/ad-1 / cloud-3 .png);
posición: absoluta;
superior: -5px;
izquierda: 530px;
}
¡Ufff! Aquí había mucho código CSS. ¡Pero la diversión es lo siguiente!
Animación

Recuerde: hasta este momento, en realidad no había animación. Si viera el banner ahora, verá algo que incluso un navegador antiguo mostrará: un anuncio estático. CONahoraDe hecho, crearemos la animación que ya hemos llamado en nuestro código CSS.
Ahora que nuestro banner se muestra bien, ¡animemos este anuncio estático! Vayamos directamente al código, te diré en los comentarios lo que sucederá:
Conclusión
En el transcurso de este tutorial, aprendimos los puntos clave de la creación de animaciones con soporte para navegadores más antiguos:
1. Los elementos secundarios heredan animaciones de sus padres además de sus propias animaciones. Podemos usar esto para crear animaciones más complejas.
2. Para nuestros estilos de anuncios, debemos usar selectores muy específicos para que nuestros anuncios no sean reemplazados por otros estilos de sitios.
3. Necesitamos diseñar los elementos para que, si nuestra animación no se reproduce, el anuncio aún se vea decente.
4. Siempre que sea posible, el uso de una animación para varios elementos ahorra tiempo y evita la expansión del código.
5. A menudo nos referimos a Internet Explorer como "el navegador del siglo XVIII" y agitamos el puño con disgusto e ira. :)
Buena suerte con tus experimentos CSS.
Sin duda uno de los mas brillantes tendencias 2012 está el desarrollo en CCS3, HTML5. Hoy ofrecemos una amplia y muy útil descripción general de ejemplos " Más de 20: tutoriales de CSS3 creativos y útiles ″ propuesto en SpeckyBoy... Todos los ejemplos están hechos en limpiar sin JavaScript, en los tutoriales presentados hay demostraciones y archivos CSS3 listos para descargar.
¡Estamos seguros de que estas técnicas y técnicas serán de utilidad para los desarrolladores web!
Lecciones CSS3 :
1.Galerías de fotos CSS3, controles deslizantes, efectos de imagen
1.1 control deslizante CSS3
No puedo creerlo, pero este slider con diferentes efectos está hecho exclusivamente en CSS3, muy impresionante.
1.2. Fondo de pantalla completa con efecto deslizante CSS3
Los diseñadores web han estado experimentando con diferentes orígenes para el sitio durante mucho tiempo, pero todavía están en CSS puro podías hacer muy poco, tenías que usar JS. Ahora CSS3 permite hacer con el fondo de su sitio lo que desee: puede tener un fondo con una foto grande de alta calidad, puede cambiar varios fondos con diferentes efectos y con escalabilidad del fondo dependiendo de los parámetros de la pantalla. . Considerándolo todo, una oportunidad increíble para los sitios creativos.
1.3. Lightbox en CSS3
Con este tutorial, puede aprender a crear un Lightbox con una variedad de efectos en CSS puro.
1.4. Propiedades de imagen CSS3
Este tutorial demuestra las nuevas funciones de CSS3 para las propiedades de la imagen, como esquinas redondeadas, sombras y otros efectos.
1.5. Banner animado CSS3
1.6 Barra de carga CSS3
1.7. Cinta 3D en CSS3

Ver demostración o descargar archivos de código CSS3 →
2. Menús, navegación y botones de CSS3
2.1. Menús de Apple.com en CSS3
Aprenda a crear el famoso menú de Apple.com con CSS3.
2.2. Menú horizontal animado en CSS3
Un sencillo tutorial para mostrarte cómo hacer un menú CSS3 animado con diferentes efectos.
2.3. Menú vertical animado en CSS3
2.4. Botones animados CSS3
Gran tutorial con 7 ejemplos de botones creativos animados.
2.5. Menú animado creativo con imágenes CSS3
En esta lección, solo se observan los 10 ejemplos presentados. Estos menús creativos complejos solían crearse exclusivamente con JS. ¡Impresionante!
2.6. Efecto de navegación circular con CSS3
Efecto inusual al pasar el cursor sobre el elemento de navegación seleccionado en forma de círculo con una imagen. ¡Tomar nota!
2.7. Menú desplegable en CSS3
Un tutorial para implementar un menú desplegable simple con subniveles CSS3.
2.8. Navegación CSS3 con transiciones animadas
3. Diferentes efectos en CSS3
3.1. Información sobre herramientas animada en CSS3 sin jQuery

Gracias al desarrollo de tecnologías web y navegadores modernos, podemos crear muchos efectos sin usar Javascript. Esto ha facilitado mucho la vida a los desarrolladores web. Después de todo, ahora podemos crear efectos en CSS puro sin usar Javascript. Por eso, en este artículo quiero contarte si es posible crear banners en CSS puro, qué se requiere para ello, así como los pros y contras de este enfoque.
CSS3 proporciona una amplia gama de posibilidades, solo necesita usarlas correctamente. Como ejemplo, quiero dar enlaces a mi trabajo anterior "Personajes en CSS puro":
Primero, quiero dar ejemplos de mis banners CSS. Quizás ya los haya visto en el sitio, pero ni siquiera adivinó con la ayuda de qué y cómo se crearon.
Acerca de la demostración: cada ejemplo (banner) tiene una duración en segundos en la parte inferior, así como un botón "Actualizar", que comienza a mostrar el banner desde el principio.
Banner n. ° 1 - "Formación individual en la construcción de sitios":
Creé este banner durante aproximadamente 2 días. ¿Porque tan largo? Porque tomó algún tiempo adaptar la pancarta (para que fuera de goma) al recalcular las coordenadas. Ahora su tamaño depende del ancho del bloque principal (que contiene el banner CSS).
Creé este banner en solo 2-2,5 horas. Lo único que ralentizó el proceso de creación fue la elección de iconos. Porque tenían que seleccionarse cerca del tema del banner.
Esta pancarta también se estira dependiendo del ancho del contenedor de bloques en el que se encuentra. Se tardó aproximadamente 1,5 horas en crearlo.
Estos banners se ven muy bien, pero ¿es todo así de simple? Echemos un vistazo a los pros y contras de esta forma de crear banners.
Ventajas y desventajas de los banners CSS:
¿Cómo creo un banner CSS?
1 idea
Primero, necesita saber exactamente qué animación debe tener el banner (qué, dónde y dónde debe moverse y dónde aparecer). Puede tomar una hoja A4 y dibujar dónde se moverá cada elemento y qué debería estar en el banner.
Después de todo, no puede comenzar a crear un banner si no sabe qué debería ser y cómo funcionar.
2 estructura HTML
El siguiente paso es crear el marcado HTML para que los elementos se puedan mover (y animar para ellos). Es decir, no puedes hacer todo con una imagen, que se moverá hacia la derecha o hacia la izquierda, y aquí es donde termina la animación.
Como regla general, hay un bloque común en el que se encuentran todos los demás. Y en este bloque común, podemos gestionar los elementos según lo necesitemos.
3 animaciones CSS
La etapa final es crear animación para los bloques, así como escribir estilos para ellos, porque algunas partes de la animación están ocultas por defecto.
Para crear su banner, debe tener un buen dominio de los conceptos básicos de CSS y HTML.
Aprenda la animación CSS básica con este tutorial -.
Producción
Todo navegadores modernos admite propiedades CSS3, lo que significa que los banners se mostrarán correctamente en dichos navegadores. Pero con la ayuda de los complementos JS, puede crear banners CSS para navegadores más antiguos. Después de aprender los conceptos básicos de la animación CSS, comprenderá el proceso de creación de banners y pronto creará su primer banner en CSS puro. 😉