Comment travailler avec les modules CSS3

Pour plus de simplicité, les modules CSS3 peuvent être séparés en dix catégories: en bordures, des fonds, des polices, effets de texte, plusieurs colonnes, des transitions, des transitions 2D, transitions 3D, des animations et l'interface utilisateur. Jetez un coup d'œil sur chaque module pour voir ce qu'il peut faire.

Borders: Le module de la frontière étend les capacités de la catégorie des frontières en ajoutant des options pour la mise en rayon de la frontière pour faire des coins arrondis, l'ombre de la boîte pour ajouter des ombres portées, et l'image de la frontière en utilisant des graphiques de style de frontières plutôt que d'utiliser une seule couleur par arête.

Fond: Il existe actuellement trois nouveaux ajouts à la catégorie de fond avec CSS3. La taille de l'arrière-plan est particulièrement pratique pour créer des graphiques évolutives, l'origine de fond propose trois emplacements pour positionner les images de fond relatives au modèle de boîte, et le clip de fond permet couleurs de fond à être coupées au contenu d'une boîte plutôt que sur les bords d'un boîte.

En outre, CSS3 vous permet maintenant d'utiliser plusieurs images de fond pour tout récipient.

Fonts: Au lieu d'être coincé à l'aide des polices Web sécurisées pour toutes vos créations, la nouvelle @ font-face propriété vous permet de choisir et d'utiliser toute police hébergé sur votre serveur web. Ce qui se passe est une .TTF (True Type Fonts) ou .otf (Polices OpenType) fichier de police est automatiquement téléchargé sur l'appareil de l'utilisateur si et lorsque cette police sera pas détecté.

Vous avez peut-être déjà vu une fonction similaire dans l'action avec les sites utilisant Google polices et polices Typekit. Cette règle de style étend cette fonctionnalité en vous permettant d'utiliser vos propres polices système. Cependant, veillez à ne pas briser les lois de copyright en spécifiant protégés par copyright polices!

Effets de texte: Il ya en fait 11 nouvelles propriétés de ce module, mais pas tous d'entre eux support majeur du navigateur. Les propriétés qui ne sont actuellement avoir le soutien de justifier, débordement, ombre, mot pause, et retour à la ligne.

Colonnes multiples: Sans avoir à utiliser des contenants ou des flotteurs supplémentaires, vous pouvez maintenant créer plusieurs colonnes de texte avec les dix différents multiples propriétés de la colonne. Bien que la plupart d'entre eux travaillent aujourd'hui, certains ne nécessitent encore préfixes de style spécifiques au navigateur. Même ainsi, ils sont toujours sacrément soignée. Pour de meilleurs résultats, réglez le nombre de colonnes et de largeur de la fente.

Transitions: Tenez votre chapeau, vous pouvez maintenant créer un mouvement sur la page sans gifs animés, Flash ou javascript! Transitions sont offerts en trois saveurs, régulière, 2D, et 3D. Avec la transition régulière, vous pouvez modifier un ou de plusieurs propriétés d'un élément, comme la modification de la largeur d'un objet sur un certain nombre de secondes, lorsqu'il est combiné avec le : hover pseudo-classe.

2D Transitions: Les éléments de ce module vous permettent de manipuler les propriétés d'un élément 2D. Utilisez-les séparément ou combinés pour déplacer, redimensionner, incliner, rotation, étirer, et tourner les éléments le long d'un plan horizontal ou vertical. Par exemple, vous pouvez faire une boîte à croître et les effets tout en se déplaçant de gauche à droite.

3D Transitions: Comme si les transitions 2D ne sont pas assez cool, attendre jusqu'à ce que vous voyez ce que les transitions en 3D font! En utilisant une méthode qui transforme l'objet le long de l'axe X et / ou Y, vous pouvez faire vos objets semblent tourner dans l'espace 3D, offrant aux téléspectateurs avec une chance de voir le inversée “ retour ” côté d'un objet.

Bien que le soutien du navigateur est limitée pour les transformations les plus avancés, finalement, vous serez capable de pivoter, redimensionner et déplacer le long du X, Y, et Z, entre autres choses. Simplement puissant.

Animations: D'accord, ce qui arrive quand vous mettez toutes ces nouvelles techniques de transformation ensemble? Animations CSS3, bébé - le genre qui peut remplacer GIF animés, Flash, et même un peu de javascript. Toute la magie se produit par l'intermédiaire de la liaison de la nouvelle keyframes la propriété à un sélecteur en utilisant la propriété d'animation avec un nom et la durée spécifiée.

Par exemple, vous pouvez modifier la position et la couleur de fond d'un objet afin que l'objet a l'apparence de morphing à travers l'espace, et puis vous pouvez inclure le code de rendre l'ordonnance de inverse d'animation et de continuer boucle sans fin.

Interface utilisateur: Avec ces nouvelles propriétés, vous pouvez ajouter des propriétés à des objets différents qui les transforment en éléments interactifs pour les visiteurs du site. Par exemple, vous pouvez redimensionner et couches textarea champs de formulaire, invoquent les touches de tabulation et les flèches sur un clavier, et de créer un aperçu de décalage qui va au-delà de la bordure.

Maintenant que vous avez un aperçu des nouveaux modules, vous pouvez en savoir plus sur ce qu'ils peuvent faire. Par exemple, vous pouvez créer des ombres sur les formes et le texte, appliquer des effets de gradient de fond, et déplacez vos objets d'ici à là.