Comment utiliser les effets d'image CSS3 - Les mannequins

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

Transparence

CSS3 supporte complètement l'opacité réglable. Cela se reflète de plusieurs façons. Tout d'abord, n'importe quel élément a un attribut qui peut être défini de 0 (entièrement transparent) à 1 (entièrement opaque).

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

Le code complet de cette page est facile à suivre:

opacité. corps html {background-image: url ("apoyo.jpg"); background-repeat: no-repeat;} h1 {color: rgba (0, 0, 0,.3);} #box {position: absolue; haut: 350px; gauche: 100px; hauteur: 100px; largeur: 100px; bordure: 1px rouge solide; couleur de fond: blanc; opacité:. 3;}

Opacité Démo

Tout le code est en HTML et CSS2, sauf le dernier attribut. L'attribut opacity prend une seule valeur à virgule flottante entre 0 et 1. Zero (0) est complètement transparent et un (1) est complètement opaque.

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

Toutes les versions récentes du navigateur prennent en charge l'opacité sans nécessiter de préfixes spécifiques au fournisseur. Les anciens navigateurs affichent simplement l'élément comme totalement opaque, de sorte que tout ce qui est sous un élément partiellement transparent peut être invisible pour les anciens navigateurs.

Réflexions

La réflexion est un autre de ces éléments visuels qui ajoute beaucoup à une page lorsqu'elle est bien faite. Bien que ce ne soit pas une partie formelle de la spécification CSS3, c'est une technologie prometteuse. Actuellement, seuls les navigateurs WebKit (c'est-à-dire Safari, iPhone / iPad et Chrome) prennent 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 moment donné.

Appliquez le code CSS suivant pour que tout élément de la classe reflect ait une belle apparence dans les navigateurs pris en charge:

-webkit-box-reflect: ci-dessous 2px;

Les réflexions de base sont assez simples:

1. Appliquez l'attribut -webkit-box-reflect.

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

2. Spécifiez où le reflet doit être placé.

   Normalement, la réflexion descend au-dessous de l'élément primaire, mais elle peut aussi être au-dessus, à gauche ou à droite.

3. Indique une largeur d'espace.

   Le reflet 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é en pixels.

Cela produira une très belle réflexion.

Cependant, les réflexions ne sont généralement pas des duplications parfaites au pixel près. Ils ont tendance à disparaître à distance. WebKit vous permet d'ajouter un dégradé à une réflexion. Dans ce cas, le dégradé passe de complètement opaque (blanc) à complètement transparent (transparent).

. refléter {

-webkit-box-reflect: ci-dessous 2px 
-webkit-linear-gradient (bas, blanc, transparent 40%, transparent);}

La partie standard de la réflexion est exactement comme la précédente par exemple, mais il inclut un dégradé qui aplanit la réflexion vers la transparence.

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

   Le dégradé pour une réflexion est presque linéaire. Notez que le dégradé n'est PAS une nouvelle règle CSS, mais simplement un paramètre dans la règle de réflexion existante.

2. Faites en sorte que le dégradé se déplace de bas en haut.

   Indique que le dégradé commence en haut et que le dégradé commence en bas. Ces valeurs représentent le haut et le bas de l'image originale , pas le reflet (qui, bien sûr, sera inversé). Normalement, votre dégradé commence au bas de l'image originale (qui est en haut de l'image réfléchie).

3. Commencez avec une opacité complète.

   Le bas de l'image originale est le haut de l'image réfléchie et le haut de l'image réfléchie doit être complètement opaque. Ce dégradé ne concerne pas vraiment la couleur, mais les parties de la réflexion qui sont visibles. Le réglage de la couleur initiale en blanc rend le haut de la réflexion complètement opaque.

4. Terminer à l'opacité complète.

   Le haut de l'image originale (le bas de la réflexion) doit être complètement transparent, donc terminez le dégradé avec le mot-clé spécial couleur transparent (équivalent à rgba 255, 255, 255, 0).

5. Ajoutez un arrêt de couleur pour ajuster le fondu.

   Ajoutez un arrêt de couleur pour indiquer où, dans la réflexion, vous voulez que l'image commence à s'estomper.

Notez que l'image reflétée n'est pas calculée en tant qu'élément distinct pour la mise en page, de sorte que le texte et tout autre contenu circulent directement au-dessus de votre réflexion.

Les réflexions sont généralement appliquées aux images, mais elles peuvent être appliquées à n'importe quel élément, même vidéo!

Il est possible d'obtenir un effet de réflexion dans d'autres navigateurs grâce à l'utilisation intelligente des attributs de transformation et de dégradé. 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 reflété n'est pas absolument nécessaire.