Comment créer une bannière animée en utilisant CSS3. Bannières responsives en HTML5 et CSS3 Créez facilement des bannières en CSS3

Pour comprendre la structure de notre balisage, intéressons-nous un instant au bateau :

>

>
>
>
Jetons maintenant un œil à la première bannière de la page de démonstration. Il y a trois animations distinctes qui se déroulent sur le navire :
• Animation - lorsque le bateau glisse vers la gauche. Ceci s'applique directement à une liste non ordonnée (un groupe d'articles de bateau).
• Animation - qui donne au bateau un effet de balancement, simulant un bateau flottant sur l'eau. Cela s'applique directement aux éléments de la liste (le bateau).
• Animation - qui masque le point d'interrogation. Ceci s'applique à la (point d'interrogation) div.
Si vous n'avez pas le mal de mer, jetez un autre coup d'œil à la page de démonstration. Vous verrez que l'animation appliquée à l'élément de liste (bateau), provoquant le soulèvement du bateau, affecte également le DIV à l'intérieur (avec un point d'interrogation). De plus, l'animation "slide in" qui est appliquée à la liste non ordonnée (groupe) affecte également l'élément de liste et les DIV à l'intérieur (le bateau et le point d'interrogation). Cela nous amène à des observations importantes :
Les éléments enfants héritent de l'animation de leurs parents, en plus de leur propre animation. Ces connaissances ont été ajoutées à notre arsenal, mais le nombre d'enfants/parents lors de la création d'une animation vous épatera (et le processeur sur l'ordinateur portable de votre grand-mère) !
CSS
Avant d'entrer dans les choses vraiment cool et de commencer à créer des animations, nous devons encore créer des styles pour les navigateurs qui sont bloqués au 18ème siècle.
Styles de secours pour les anciens navigateurs

Nous allons juste créer des styles de secours comme si l'animation CSS n'existait pas (la pensée que l'animation CSS n'existe pas fera non seulement pleurer un adulte, mais s'accrocher à côté de moi :)). En d'autres termes, si notre animation ne fonctionne pas, la bannière devrait toujours avoir l'air décente. De cette façon, lorsque quelqu'un affichera une bannière à l'aide d'un ancien navigateur, il verra une bannière statique normale au lieu d'un espace vide.
Par exemple : si quelqu'un utilise CSS comme ceci, il y aura des problèmes :
/* FAUSSE ROUTE! * /

0% (opacité : 0 ;)
100 % (opacité : 1 ;)
}
Div (
opacité : 0 ; / * Ce bloc est masqué par défaut ! * /

}
Si le navigateur de l'utilisateur ne supporte pas l'animation, la bannière lui restera invisible. Et puis le client enfoncera la porte du bureau du vendeur - une tronçonneuse à la main - et exigera qu'il lui explique pourquoi il n'a pas vendu son produit ! Et s'ils ne parviennent pas à comprendre que le navigateur peut être si misérable, leur vie se terminera horriblement, et leurs derniers mots seront des malédictions contre Internet Explorer... :)
Mais ne vous inquiétez pas, nous fournirons une prise en charge avancée des navigateurs :
/* LE DROIT CHEMIN */
@keyframe our-fade-in-animation (
0% (opacité : 0 ;)
100 % (opacité : 1 ;)
}
Div (
opacité : 1 ; / * ce div sera visible par défaut * /
animation : our-fade-in-animation 1s 1 ;
}
Comme vous pouvez le voir, le DIV s'affichera même si l'animation ne parvient pas à jouer. Si l'animation est jouable, le DIV sera immédiatement masqué et l'animation sera lue jusqu'à la fin.
Maintenant que nous savons comment faire en sorte que nos bannières animées prennent en charge les navigateurs plus anciens, passons à quelques CSS de base.
Il y a trois choses importantes à garder à l'esprit :
• Étant donné que ces annonces peuvent être utilisées sur divers sites Web, nous allons rendre tous nos styles css très spécifiques... Nous commencerons par déclarer chaque sélecteur avec l'id : # ad-1. Cela empêchera nos styles de bannière d'interférer avec les styles et éléments existants.
• Nous serons déterminés ignorer la fonction de retard d'animation lors de la création de notre animation. Si nous devions utiliser la fonction de retard d'animation, ainsi que concevoir nos éléments de la bonne manière (visible par défaut), tout serait visible à l'écran avant que l'animation ne commence enfin à jouer. C'est pourquoi l'animation démarre immédiatement, ce qui nous permet de masquer des éléments de l'écran jusqu'à ce que nous en ayons besoin. Nous allons simuler le retard de l'animation en augmentant la durée et en ajustant manuellement les images clés. Vous en verrez des exemples lorsque nous commencerons à créer des animations.
• Si possible, utiliser une animation pour plusieurs éléments... De cette façon, nous pouvons gagner beaucoup de temps et réduire la prolifération du code. Vous pouvez créer plusieurs effets différents dans la même animation en ajustant la durée et les transitions.
Nous allons donc commencer à créer notre bannière publicitaire. Assurons-nous qu'il est positionné de manière relative (position : relative) afin que les éléments à l'intérieur puissent être positionnés correctement. Nous devons également nous assurer que la propriété overflow: hidden est définie pour masquer toutes les choses inutiles :
# annonce-1 (
largeur : 720px ;
hauteur : 300px ;
flotteur : gauche ;
marge : 40px auto 0 ;
image d'arrière-plan : URL (../images/ad-1/background.png);
position d'arrière-plan : centre ;
background-repeat : pas de répétition ;
débordement caché;
position : relative ;
box-shadow : 0px 0px 6px # 000 ;
}
# annonce-1 #contenu (
largeur : 325px ;
Flotter à droite;
marge : 40 px ;
text-align : centre ;
indice z : 4 ;
position : relative ;
débordement : visible ;
}
# ad-1 h2 (
famille de polices : "Alfa Slab One", cursive ;
couleur : # 137dd5 ;
taille de la police : 50px ;
hauteur de ligne : 50px ;

animation : animation en fondu différé 7s 1 entrée-sortie facilitée ; / * H2 disparaîtra avec un délai d'animation simulé * /
}
# ad-1 h3 (

couleur : #202224 ;
taille de la police : 31 px ;
hauteur de ligne : 31 px ;
ombre de texte : 0px 0px 4px #fff ;
animation : animation en fondu différé 10s 1 entrée-sortie facilitée ; / * H3 s'éteindra avec un retard d'animation simulé * /
}
# formulaire ad-1 (
marge : 30px 0 0 6px ;
position : relative ;
animation : forme-animation 12s 1 facilité d'entrée-sortie ; / * Ce code déplace notre formulaire email * /
}
# annonce-1 #email (
largeur : 158px ;
hauteur : 48px ;
flotteur : gauche ;
remplissage : 0 20px ;
taille de la police : 16px ;
famille de polices : "Lucida Grande", sans empattement ;
couleur : #fff ;
ombre de texte : 1px 1px 0px # a2917d ;
bordure-haut-gauche-rayon : 5px ;
bordure-bas-gauche-rayon : 5px ;
bordure : 1px solide # a2917d ;
contour : aucun ;
box-shadow : -1px -1px 1px #fff ;
couleur d'arrière-plan : # c7b29b ;
image d'arrière-plan : dégradé linéaire (en bas, RVB (216, 201, 185) 0 %, RVB (199, 178, 155) 100 %) ;
}
# ad-1 #email : focus (
image d'arrière-plan : dégradé linéaire (en bas, rgb (199, 178, 155) 0%, rgb (199, 178, 155) 100%);
}
# ad-1 #soumettre (
hauteur : 50px ;
flotteur : gauche ;
curseur : pointeur ;
remplissage : 0 20px ;
taille de la police : 20px ;
font-family : "Boogaloo", cursif ;
couleur : # 137dd5 ;
ombre de texte : 1px 1px 0px #fff ;
bordure-haut-droite-rayon : 5px ;
bordure-bas-droite-rayon : 5px ;
bordure : 1px solide # bcc0c4 ;
border-left : aucun ;
couleur d'arrière-plan : #fff ;
image d'arrière-plan : dégradé linéaire (en bas, rgb (245, 247, 249) 0%, rgb (255, 255, 255) 100%);
}
# ad-1 #submit : survolez (
image d'arrière-plan : dégradé linéaire (en bas, rgb (255, 255, 255) 0%, rgb (255, 255, 255) 100%);
}
Nous allons maintenant styliser l'eau et l'animer en conséquence :
# ad-1 ul # eau (
/ * Si on voulait ajouter une autre animation pour l'eau (se déplacer horizontalement par exemple), on pourrait le faire ici * /
}
# ad-1 li # water-back (
largeur : 1200px ;
hauteur : 84 px ;
image d'arrière-plan : URL (../images/ad-1/water-back.png);

indice z : 1 ;
position : absolue ;
bas : 10px ;
gauche : -20px ;
animation : water-back-animation 3s infini facilité d'entrée-sortie ; / * Effet rebond d'eau * /
}
# ad-1 li # front de mer (
largeur : 1200px ;
hauteur : 158px ;
image d'arrière-plan : URL ( ../images/ad-1/water-front.png) ;
background-repeat : répéter-x ;
indice z : 3 ;
position : absolue ;
bas : -70px ;
gauche : -30px ;
animation : water-front-animation 2s infini facilité d'entrée-sortie ; / * Un autre effet du rebond de l'eau est légèrement différent. Nous allons rendre cette animation un peu plus rapide pour créer une sorte de perspective. * /
}
Maintenant, stylisons le bateau et tous ses éléments. Encore une fois, nous appellerons l'animation appropriée :
# ad-1 ul # bateau (
largeur : 249px ;
hauteur : 215px ;
indice z : 2 ;
position : absolue ;
bas : 25px ;
à gauche : 20 pixels ;
débordement : visible ;
animation : boat-in-animation 3s 1 aisance de sortie ; / * Déplacer le groupe en premier * /
}
# ad-1 ul # bateau li (
largeur : 249px ;
hauteur : 215px ;
image d'arrière-plan : URL (../images/ad-1/boat.png);
position : absolue ;
bas : 0px ;
à gauche : 0px ;
débordement : visible ;
animation : boat-animation 2s infini facilité d'entrée-sortie ; / * Simulation d'un bateau se balançant sur l'eau - une animation similaire est déjà utilisée pour l'eau elle-même. * /
}
# ad-1 # point d'interrogation (
largeur : 24px ;
hauteur : 50px ;
image d'arrière-plan : URL ( ../images/ad-1/question-mark.png) ;
position : absolue ;
à droite : 34 pixels ;
haut : -30px ;
animation : animation en fondu différé 4s 1 entrée-sortie facilitée ; / * Cacher le point d'interrogation * /
}
Enfin, nous allons styliser le groupe de nuages ​​et un nuage. Nous appellerons également une animation assez astucieuse qui leur donnera un effet de défilement continu. Voici une illustration de ce qui va se passer :

Ces styles sont :
# ad-1 #nuages ​​(
position : absolue ;
haut : 0px ;
index z : 0 ;
animation : cloud-animation 30s infini linéaire ; / * Déplacer les nuages ​​vers la gauche, un nombre infini de fois * /
}
# ad-1 # cloud-group-1 (
largeur : 720px ;
position : absolue ;
à gauche : 0px ;
}
# ad-1 # cloud-group-2 (
largeur : 720px ;
position : absolue ;
à gauche : 720 pixels ;
}
# ad-1 .cloud-1 (
largeur : 172px ;
hauteur : 121px ;
image d'arrière-plan : URL (../images/ad-1 / cloud-1 .png);
position : absolue ;
haut : 10px ;
à gauche : 40 pixels ;
}
# ad-1 .cloud-2 (
largeur : 121px ;
hauteur : 75px ;
image d'arrière-plan : URL (../images/ad-1 / cloud-2 .png);
position : absolue ;
haut : -25px ;
à gauche : 300 pixels ;
}
# ad-1 .cloud-3 (
largeur : 132px ;
hauteur : 105px ;
image d'arrière-plan : URL (../images/ad-1 / cloud-3 .png);
position : absolue ;
haut : -5px ;
gauche : 530px ;
}
Ouf ! Il y avait beaucoup de code CSS ici. Mais le plaisir est le suivant!
Animation

Souvenez-vous : jusqu'à ce moment, il n'y avait en fait aucune animation. Si vous visualisez la bannière maintenant, vous verrez ce que même un ancien navigateur affichera : une annonce statique. AVECmaintenantnous allons en fait créer l'animation que nous avons déjà appelée dans notre code CSS.
Maintenant que notre bannière s'affiche bien, animons cette annonce statique ! Passons directement au code - je vous dirai dans les commentaires ce qui va se passer :
Conclusion
Au cours de ce tutoriel, nous avons appris les points clés de la création d'animations avec la prise en charge des anciens navigateurs :
1. Les éléments enfants héritent des animations de leurs parents en plus de leurs propres animations. Nous pouvons l'utiliser pour créer des animations plus complexes.
2. Pour nos styles d'annonces, nous devons utiliser des sélecteurs très spécifiques afin que nos annonces ne soient pas remplacées par d'autres styles de site.
3. Nous devons styliser les éléments de sorte que si notre animation ne parvient pas à jouer, l'annonce doit toujours sembler décente.
4. Dans la mesure du possible, l'utilisation de la même animation pour plusieurs éléments permet de gagner du temps et d'éviter la prolifération du code.
5. Nous nous référons souvent à Internet Explorer comme « le navigateur du XVIIIe siècle » et agitons le poing de dégoût et de colère. :)
Bonne chance avec vos expériences CSS.
Sans doute l'un des plus brillants tendances 2012 est le développement sur CCS3, HTML5. Aujourd'hui, nous vous proposons un large et très utile aperçu des exemples " 20+ : Tutoriels CSS3 créatifs et utiles ″ proposé à SpeckyBoy... Tous les exemples sont faits sur nettoyer sans JavaScript, dans les didacticiels présentés, il y a des démos et des fichiers CSS3 prêts à l'emploi à télécharger.
Nous sommes convaincus que ces techniques et techniques seront utiles aux développeurs Web !
Cours CSS3 :
1. Galeries de photos CSS3, curseurs, effets d'image
1.1 curseur CSS3
Je n'arrive pas à y croire, mais ce slider avec différents effets est réalisé exclusivement en CSS3, très impressionnant.
1.2. Arrière-plan plein écran avec effet de curseur CSS3
Les concepteurs de sites Web expérimentent depuis longtemps différents arrière-plans pour le site, mais toujours CSS pur vous pouviez faire très peu, vous deviez utiliser JS. Maintenant CSS3 permet de faire avec l'arrière-plan de votre site comme vous le souhaitez - vous pouvez avoir un arrière-plan avec une grande photo de haute qualité, vous pouvez changer plusieurs arrière-plans avec des effets différents, et avec l'évolutivité du fond en fonction de l'écran paramètres. Dans l'ensemble, une fonctionnalité impressionnante pour les sites créatifs.
1.3. Lightbox sur CSS3
Avec ce tutoriel, vous pouvez apprendre à créer une Lightbox avec une variété d'effets en pur CSS.
1.4. Propriétés de l'image CSS3
Ce didacticiel présente les nouvelles fonctionnalités CSS3 pour les propriétés d'image telles que les coins arrondis, les ombres et d'autres effets.
1.5. Bannière CSS3 animée
1.6 Barre de chargement CSS3
1.7. Ruban 3D en CSS3

Voir la démo ou télécharger les fichiers de code CSS3 →
2. Menus CSS3, navigation et boutons
2.1. Menus Apple.com en CSS3
Apprenez à créer le célèbre menu Apple.com avec CSS3.
2.2. Menu horizontal animé en CSS3
Un tutoriel simple pour vous montrer comment créer un menu CSS3 animé avec différents effets.
2.3. Menu vertical animé en CSS3
2.4. Boutons animés CSS3
Grand tutoriel avec 7 exemples de boutons créatifs animés.
2.5. Menu animé créatif avec des images CSS3
Dans cette leçon, seuls les yeux se sont levés sur les 10 exemples présentés. Ces menus créatifs complexes étaient créés exclusivement à l'aide de JS. Impressionnant!
2.6. Effet de navigation de cercle avec CSS3
Effet inhabituel lors du survol de l'élément de navigation sélectionné sous la forme d'un cercle avec une image. Prendre note!
2.7. Menu déroulant en CSS3
Un tutoriel pour implémenter un menu déroulant simple avec des sous-niveaux CSS3.
2.8. Navigation CSS3 avec transitions animées
3. Différents effets sur CSS3
3.1. Info-bulle animée en CSS3 sans jQuery

Grâce au développement des technologies web et des navigateurs modernes, nous pouvons créer de nombreux effets sans utiliser Javascript. Cela a rendu la vie beaucoup plus facile pour les développeurs Web. Après tout, nous pouvons maintenant créer des effets en CSS pur sans utiliser Javascript. Par conséquent, dans cet article, je souhaite vous expliquer s'il est possible de créer des bannières en CSS pur, ce qui est requis pour cela, ainsi que les avantages et les inconvénients de cette approche.
CSS3 offre un large éventail de possibilités, il vous suffit de les utiliser correctement. A titre d'exemple, je veux donner des liens vers mon travail passé "Caractères en CSS pur":
Tout d'abord, je veux donner des exemples de mes bannières CSS. Vous les avez peut-être déjà vus sur le site, mais vous n'avez même pas deviné à l'aide de quoi et comment ils ont été créés.
A propos de la démo : chaque exemple (bannière) a une durée en secondes en bas, ainsi qu'un bouton "Actualiser", qui commence à afficher la bannière depuis le début.
Bannière #1 - "Formation individuelle en construction de chantier":
J'ai créé cette bannière pendant environ 2 jours. Pourquoi si longtemps? Car il a fallu un certain temps pour adapter la bannière (pour la rendre caoutchouteuse) lors du recalcul des coordonnées. Maintenant, sa taille dépend de la largeur du bloc parent (qui contient la bannière CSS elle-même).
J'ai créé cette bannière en seulement 2 à 2,5 heures. La seule chose qui a ralenti le processus de création était le choix des icônes. Parce qu'ils devaient être sélectionnés à proximité du thème de la bannière.
Cette bannière s'étire également en fonction de la largeur du conteneur de blocs dans lequel elle se trouve. Il a fallu environ une heure et demie pour le créer.
De telles bannières sont très belles, mais est-ce que tout est si simple ? Jetons un coup d'œil aux avantages et aux inconvénients de cette façon de créer des bannières.
Avantages et inconvénients des bannières CSS :
Comment créer une bannière CSS ?
1 idée
Tout d'abord, vous devez savoir exactement quelle animation la bannière doit avoir (quoi, où et où elle doit se déplacer et où apparaître). Vous pouvez prendre une feuille A4 et dessiner où chaque élément se déplacera et ce qui devrait être sur la bannière.
Après tout, vous ne pouvez pas commencer à créer une bannière si vous ne savez pas ce qu'elle devrait être et comment fonctionner.
2 Structure HTML
L'étape suivante consiste à créer le balisage HTML afin que les éléments puissent être déplacés (et animés pour eux). C'est-à-dire que vous ne pouvez pas tout faire avec une seule image, qui se déplacera vers la droite ou la gauche, et c'est là que l'animation est terminée.
En règle générale, il existe un bloc commun dans lequel se trouvent tous les autres. Et dans ce bloc général, on peut gérer les éléments comme on en a besoin.
3 animations CSS
L'étape finale consiste à créer une animation pour les blocs, ainsi que des styles d'écriture pour eux, car certaines parties de l'animation sont masquées par défaut.
Pour créer votre bannière, vous devez avoir une bonne maîtrise des bases CSS et HTML.
Apprenez l'animation CSS de base avec ce tutoriel -.
Sortir
Tout navigateurs modernes prend en charge les propriétés CSS3, ce qui signifie que les bannières s'afficheront correctement dans ces navigateurs. Mais en utilisant les plugins JS, vous pouvez créer des bannières CSS pour les anciens navigateurs. Après avoir appris les bases de l'animation CSS, vous comprendrez le processus de création de bannières et créerez bientôt votre première bannière en pur CSS ! ??