Aujourd'hui, la création de sites Web est en train de devenirart réel. Il ne s'agit pas simplement d'un ensemble d'éléments de page d'une certaine couleur et d'une certaine taille, de polices de styles différents et de dessins thématiques. Afin de rendre le site unique, d’attirer l’attention des visiteurs et de le diriger vers certains éléments, un grand nombre de méthodes et d’outils est utilisé. Parmi eux, il y a une propriété css très populaire - la transparence. Cette technique est assez à la mode et spectaculaire, et est donc souvent utilisée. Vous pouvez donner de la transparence à divers objets de la page du site - du texte, un bloc entier ou une image, par exemple. Il est également réalisé de différentes manières. Considérez-les ci-dessous.
Paramètres de transparence des éléments
Paramètres pour ajuster le degrééléments de transparence quelques-uns. Ils sont utilisés en fonction d'objectifs spécifiques, ainsi que du navigateur pour lequel le design est «personnalisé». Ceux-ci incluent les propriétés suivantes:
- l'opacité;
- filtrer;
- Image PNG en arrière-plan.
Les valeurs de la propriété css "transparence" changentcomme suit: plus le nombre est élevé, plus le niveau de transparence de l'élément est faible. Dans l'opacité, il varie de 0 à 1, dans le filtre - de 10 à 100. Ce dernier est utilisé pour le navigateur Interet Explorer, et pour tous les autres, la propriété opacity est utilisée.
Transparence de l'image (variable)
Commençons par l'option lorsque la transparence apparaît lorsque vous survolez un élément du curseur de la souris.
Considérez comment définir la transparence de l'image. CSS offre deux options. Pour ce faire, vous devez l'enregistrer directement dans le code html-document comme suit:
- Spécifiez le chemin d'accès à l'image.
- Nous déterminons les options de transparence lorsque vous survolez ou non. Pour ce faire, utilisez les propriétés onmouseover et onmouseout, dans lesquelles nous prescrivons les valeurs d'opacité et de filtre.
Les mêmes caractéristiques peuvent être enregistrées dans le document css, et dans le code source, ajoutez uniquement un lien vers celui-ci. Les résultats seront les mêmes.
Transparence du texte et des blocs de page
En ce qui concerne le texte ou le bloc (transparence div),css suggère d'utiliser une option similaire à la création d'une transparence d'image, c'est-à-dire d'utiliser un fichier css connecté dans lequel les paramètres nécessaires seront définis. Vous pouvez y aller d'une manière plus simple. Lors de la définition des styles du bloc de style div ou du texte p, écrivez le code html suivant pour les éléments onmouseover et onmouseout. Les deux options fonctionnent et donnent le résultat souhaité.
Constante de transparence
Dans certains cas, la transparence d'un objet, d'un élément de conception ou du texte doit être définie de manière continue. Dans cette situation, la solution est encore plus simple que de survoler la souris.
Pour les éléments css, la transparence sera définiecode suivant. Dans le bloc de style div, spécifiez les valeurs d'arrière-plan (par exemple, # ff8800), d'opacité (par exemple, 0,5), ainsi que de largeur et de remplissage.
Pour une image, nous ajoutons les valeurs d'opacité et de filtre au code, ainsi que le chemin d'accès à l'image.
Méthode RGBA
Il existe d'autres cas d'utilisation.de cette propriété css: la transparence peut être appliquée à la couleur d'arrière-plan de tout élément de conception. Pour ce faire, utilisez la méthode RGBA. Les trois premières lettres indiquent les couleurs principales (rouge, entier, bleu) et la dernière - alpha, qui définit le niveau de transparence. En utilisant le format RGBA, nous prescrivons le degré de transparence en l’indiquant dans le dernier chiffre. Par exemple, comme ceci: background: rgba (240,2,33,0.4035).
Conclusion
Ainsi, en utilisant au cours des travaux surla conception du site est une propriété css simple mais efficace "transparence", vous pouvez rendre ses éléments plus intéressants et visibles avec un minimum d'effort. Les options décrites pour spécifier les caractéristiques de transparence vous y aideront.
