Effets que vous pouvez faire avec des feuilles de style en cascade

CSS3, la dernière édition de Cascading Style Sheets, présente les progrès dans le traitement de conception. Parmi ceux-ci, quelques nouvelles fonctionnalités qui définissent des dégradés de couleurs, degrés de transparence, et même des réflexions sont certainement la peine de vérifier!

Dans le passé, si vous vouliez un dégradé de couleurs, vous avez eu à concevoir des images bitmap dans le but. Maintenant CSS vous permet de remplir des récipients avec des linéaires et radiales gradients qui font une transition, même d'une couleur à une autre, ou d'une couleur en plusieurs couleurs. Vous pouvez également contrôler la façon dont le gradient remplit le récipient.

Le plus intéressant est le fait que vous pouvez maintenant utiliser les dégradés CSS comme des masques d'image qui intègrent la transparence de canal alpha. En définissant l'image que vous utilisez comme un masque - et d'associer cette image avec un élément ou une autre image dans le cadre de la définition - vous pouvez faire ce que l'élément progressivement disparaître en apparence, révélant tout ce fond avait été caché en dessous. Cette capacité permet pour certains effets couches intéressants dans la conception de votre site web.

Pour créer une réflexion (où l'image semble se refléter sur la surface ci-dessous) en utilisant seulement CSS, vous devez utiliser une combinaison de paramètres de transformation et de conteneurs, mais l'effet net est néanmoins un effet de réflexion. Essentiellement, vous créez deux conteneurs - un pour l'image principale et l'autre pour la réflexion. En application d'une transformée effets au conteneur de réflexion qui se transforment d'abord l'image à l'envers puis écraser sa hauteur et puis ajoutez un masque de transparence, vous vous retrouvez avec une réflexion convaincante comme montré dans la figure suivante. La beauté est que, avec cette technique, vous en avez un graphique normale avec la possibilité d'inclure une réflexion - une réflexion qui est configurable dynamiquement - le tout sans l'utilisation de Photoshop.

CSS effets d'ombre

Il est maintenant possible d'utiliser les CSS pour ajouter des ombres portées aux éléments - un autre effet très cool. Avant CSS3, ombres semi-transparentes ne sont possibles image bitmap avec, en particulier en utilisant le format PNG qui prend en charge la transparence.

Simplement en ajustant les couleurs et la quantité de décalage et de flou, vous pouvez créer des effets très différents. Notez que dans le cas du box-shadow (la troisième image dans la figure suivante), il est nécessaire d'avoir deux lignes de code qui suivent immédiatement - un pour WebKit et un pour Moz. Ceux-ci sont de soutenir les navigateurs Safari et Firefox, respectivement.

Coins arrondis

La figure suivante montre un exemple de la nouvelle CSS3 propriété border-radius en action. En définissant une valeur pour cette propriété - vérifier les deux dernières lignes du code CSS, dont la valeur est fixée à 10 pixels - vous contrôlez la taille de la courbe d'angle apparaît. Avant l'introduction de la propriété border-radius, effets coins arrondis ne sont possibles que grâce à l'utilisation de graphiques bitmap.

Effets d'animation

Utilisation de CSS3, vous pouvez maintenant appliquer plusieurs 2D cool et des effets d'animation 3D en utilisant la propriété transform. Cette propriété contient un certain nombre de fonctions telles que l'échelle, la rotation, l'inclinaison, et de la perspective que vous pouvez définir et se combinent pour affecter votre animation de diverses manières. Vous pouvez même définir des effets de transition à un contrôle Comment l'objet se transforme, et combien de temps elle dure.

Les effets de transition peuvent également être appliquées aux liens normaux. Par exemple, si normalement vous rouler sur un lien pour voir un point culminant, il met en évidence tout à la fois. En utilisant les propriétés appelées transition propriété et la transition durée, vous pouvez faire le fondu de surbrillance dans lentement - et spécifier le nombre de secondes qu'il faut pour le faire.

Comme pour les effets 3D, si vous avez jamais vu l'application iPhone qui semble Météo “ retourner sur ” pour vous permettre de configurer vos villes, vous êtes témoin effets CSS3 en action. En utilisant la propriété de la perspective et la spécification de valeurs pour différentes fonctions de transformation tels que la perspective, rotation, inclinaison, et l'échelle, vous pouvez obtenir très créatif avec la présentation de votre interface utilisateur.