CSS3 vous permet d'appliquer des effets spéciaux intéressants à vos pages HTML5. Ces effets peuvent être appliqués à tout élément, mais ils sont généralement appliqués à des images et les titres. Notez que ceux-ci sont encore considéré comme expérimental, de sorte que les implémentations navigateur varient.

Transparence

CSS3 a un support complet pour l'opacité réglable. Cela se reflète dans un couple des manières. En premier lieu, aucun élément possède un attribut qui peut être définie à partir de 0 (entièrement transparent)1 (complètement opaque).

Voici une div avec une transparence partielle superposée sur une image.

Le code complet de cette page est facile à suivre:

Opacité Démo

Tout le code est commune HTML et CSS2 choses, sauf le dernier attribut. La opacité attribut prend une seule valeur en virgule flottante entre 0 et 1. Zéro (0) Est complètement transparent et un (1) Est complètement opaque.

Notez que l'exemple utilise l'autre forme principale de transparence soutenue par CSS - le titre utilise le modèle de RGBA à ajouter de la transparence alpha à une couleur. En général, utilisez alpha lorsque vous souhaitez ajouter de la transparence partielle à une couleur individuelle. L'opacité peut être utilisé pour un élément entier, même complexe de quelque chose comme une image ou une vidéo.

Toutes les récentes versions des navigateurs supportent l'opacité sans nécessiter préfixes spécifiques au fournisseur. Les navigateurs plus anciens affichent simplement l'élément comme totalement opaque, donc tout sous un élément partiellement transparent peuvent être invisibles pour les navigateurs plus anciens.

Réflexions

La réflexion est un autre de ces éléments visuels qui ajoute un peu à une page quand bien fait. Bien qu'il soit pas officiellement partie de la spécification CSS3, il est une technologie prometteuse. Actuellement, seuls les navigateurs basés sur WebKit (qui est, Safari, iPhone / iPad, et Chrome) en charge cette fonctionnalité. Cependant, il montre une telle promesse qu'une certaine forme de cette capacité est susceptible d'apparaître dans les autres navigateurs à un certain point.

Appliquer le CSS suivant à faire tout élément avec le refléter classe ont un beau reflet dans les navigateurs pris en charge:

-webkit-box-refléter: 2px ci-dessous;

Réflexions de base sont assez simples:

1. Appliquer le -webkit-box-refléter attribuer.

   Malheureusement, il n'y a pas de version générique, ni a l'attribut été dupliqué par d'autres navigateurs.

2. Indiquez l'endroit où la réflexion doit être placé.

   Normalement, la réflexion passe en dessous de l'élément primaire, mais il peut aussi être au dessus, gauche, ou droit.

3. Indiquez une largeur d'intervalle.

   La réflexion peut être placé juste à côté de l'élément d'origine, mais souvent il semble mieux avec un petit écart. L'écart est normalement mesurée en pixels.

Ceci va produire une très belle réflexion.

Cependant, les réflexions ne sont généralement pas les duplications de pixel-parfait. Ils ont tendance à disparaître avec la distance. WebKit vous permet d'ajouter un dégradé à une réflexion. Dans ce cas, le gradient va de complètement opaque (blanc) à complètement transparent (transparent).

.refléter {
 -webkit-box-refléter: 2px ci-dessous
 -webkit-linear-gradient (en bas, blanc, transparent 40%, transparent) -}

La partie standard de la réflexion est juste comme l'exemple précédent, mais il inclut un gradient qui se fane le reflet de la transparence.

1. Construire un dégradé linéaire.

   Le gradient d'une réflexion est presque linéaire. Notez que le gradient est pas une nouvelle règle CSS, mais simplement un paramètre dans la règle de réflexion existant.

2. Faites le saut gradient de bas en haut.

   Utilisez pour indiquer la pente commence au sommet, et d'indiquer les dégradé commence en bas. Ces valeurs représentent la partie supérieure et inférieure de la original l'image, la réflexion pas (ce qui, bien entendu, être inversé). Normalement, le gradient à partir de la partie inférieure de l'image d'origine (qui est en haut de l'image réfléchie).

3. Commencez avec une opacité complète.

   Le fond de l'image d'origine est le haut de l'image réfléchie, et la partie supérieure de l'image réfléchie doit être complètement opaque. Ce gradient est pas vraiment sur la couleur, mais sur les parties de la réflexion sont visibles. Réglage de la couleur initiale au blanc rend le haut de la réflexion complètement opaque.

4. Terminer à une opacité totale.

   Le haut de l'image d'origine (le fond de la réflexion) devrait être totalement transparent, de sorte que la fin du gradient avec le mot-clé de couleur spéciale transparent (ce qui est équivalent à rgba 255, 255, 255, 0).

5. Ajouter une couleur-arrêt pour ajuster le fondu.

   Ajouter un arrêt de couleur pour indiquer où dans la réflexion que vous voulez l'image pour commencer la décoloration.

Notez que l'image réfléchie est pas calculé comme un élément distinct aux fins de mise en page, de sorte texte et autre contenu iront juste au-dessus de votre réflexion.

Réflexions sont couramment appliqués aux images, mais elles peuvent être appliquées à tout élément, même la vidéo!

Il est possible d'obtenir un effet de réflexion dans d'autres navigateurs avec l'utilisation intelligente des attributs de transformation et de gradient. Pour l'instant, cependant, il est probablement plus sûr de réserver cet effet pour les situations où vous savez que l'utilisateur utilisera un navigateur pris en charge ou lorsque l'effet réfléchi est pas absolument nécessaire.