Créer un empilement dynamique de cartes à l’aide CSS3
Nous allons créer une pile de cartes uniquement avec HTML et CSS 3 et utiliser les fonctionnalités CSS3 tels que la transformation et la transition (pour les effets dynamiques) et @ font-face, box-shadow et border-radius (pour le style).
On se motive avec le résultat avant de lire le tuto Commençons avec le balisage HTML simple, qui consiste en de simples listes non-ordonnées, remplies avec du contenu aléatoire. Maintenant, le CSS. J’utilise Yahoo User Interface (YUI) 2 Reset CSS pour obtenir des résultats similaires dans tous les navigateurs. Nous aurons besoin de définir les polices que nous voulons utiliser avec @ font-face (pour plus d’informations sur @ font-face ont un coup d’oeil sur cette page : Belles polices libres que vous pouvez utiliser avec @ font-face) et ajouter quelques règles générales CSS. Remarque : Le Polices Note This & Kulminoituva, qui sont toutes deux disponibles en kits @ font-face (avec tous les formats nécessaires font-et préformaté fichier CSS) sur Font Squirrel, sont celles utilisés dans l’exemple. Ensuite, nous aurons besoin de cartes. Nous avons d’abord ajouté quelques règles générales CSS2.1 comme la height, width, padding et border (Vous pouvez choisir n’importe quelles valeurs que vous voulez). L’image de fond est facultative, mais rend aussi les fiches tellement plus belles (vous pouvez la télécharger ici). Assurez-vous de mettre position : relative, display : block et float : left. En outre, nous allons utiliser quelques styles CSS3 pour lancer nos cartes d’un cran vers le haut. Avec l’aide de border-radius nous faisons les coins arrondis, le px-value que vous renseignerez définira le rayon. La propriété box-shadow nous permet d’ajouter une ombre portée sur les cartes, la première valeur détermine l’horizontale (x) de compensation, la deuxième valeur la verticale (y) et la troisième valeur la taille du flou. La dernière valeur définit la couleur de l’ombre. Avec l’aide de cette propriété que vous êtes capable de reproduire presque toutes les ombres portées que vous pouvez créer dans Photoshop. La transition property nous permet de définir comment se produiront les changements et combien de temps dans des états différents (:hover, :active, etc.) . La première valeur indique la propriété de votre ciblage (comme cela, vous pouvez à titre d’exemple créer des effets d’animation différents pour la croissance et la rotation d’un élément), le second moment de la transition se fera et la troisième définit le rendu de l’animation (comment l’animation transformera au fil du temps). Maintenant, nous devons ajouter un peu de style propre à chaque carte.
Disposer les cartes à l’aide de haut, à droite, en bas et à gauche, puis, avec l’aide de transformer : tourner ajouter une rotation à la carte. Assurez-vous que les valeurs des deux cartes plus haute (1 et 5) et deux cartes interne (2 et 4) sont opposées (e.g -20deg pour Card 1 ET 20 deg pour Card 5). Vous devez également attribuer des valeurs différentes pour le z-index des cartes - utiliser les valeurs constituent le code ci-dessous. La transition property vous permet plus que faire tourner un élément. avec celle-ci, vous pouvez aussi translater (déplacer), jouer sur l’inclinaison et l’échelle. Pour de plus amples renseignements, veuillez consulter la page officielle w3.org sur cette propriété. Maintenant nous n’avons qu’à ajouter les différents états de cartes. D’abord, nous allons assigner un état stationnaire générale à toutes les cartes dans lequel on attribue high z-index de la carte actuellement plané. Comme cela, la carte appropriée est toujours devant. Ensuite, vous devez ajouter transformer les valeurs individuelles pour chaque carte. Cette fois, nous avons besoin d’utiliser la fonction de transformation échelle propriété en plus la fonction de rotation. Dans le code ci-dessous chaque carte est agrandie à 110% (X1.1) et faire tourner 2 degrés (vous devez tenir compte de rotation initiale de la carte si, par exemple de 10 degrés à 12). Enfin il vous suffit d’ajouter un peu de style sur le contenu des cartes.
En dépit de la CSS-Reset, nous avons utilisé il pourrait y avoir des différences dans la marge et le rembourrage de la coutume @ font-face polices, il semble toujours y avoir des problèmes concernant la compatibilité multi-navigateurs. Dans mon exemple précis, j’ai ajouté des coins arrondis, une ombre portée et le contexte les images présentées et quelques ajustements mineurs au texte. Comme vous le voyez, vous pouvez obtenir d’excellents résultats en utilsiant CSS3. Malheureusement les effets CSS3 ne sont pas supportées dans par les navigateurs web actuels pour le moment. Dans notre exemple précis mieux vaut utiliser les dernières versions de Safari et Chrome, suivi par Firefox, qui manque d’effets de transition. Internet Explorer 8 et Opera ont des solutions de repli approprié (même si elles ne sont pas proche de l’effet d’origine), alors que cela ne fonctionne pas du tout aves Internet Explorer 7 et les versions antérieures. Si vous voulez en savoir plus sur CSS3 et de découvrir certains des autres avantages qu’il offre, vous devriez vérifier css3.info. ET HOP LE ZIP : http://designlovr.com/examples/dyna...
Voir en ligne : VOIR LE RESULTAT
Vous avez sans doute remarqué que les trois propriétés existent deux fois et sont précédées d’une fois par "-webkit-" (pour Safari et Chrome) et une fois par "-moz-" (pour Firefox). Parce que CSS3 n’est pas officiellement lancé et soutenu encore et que vous devez renseigner les navigateurs spécifiques de cette façon.