Share
Au cours de ce rapide tutoriel, nous allons nous familiariser avec les concepts d'opacité et de transparence des éléments HTML. Nous allons jouer avec un ensemble d'effets qui, avant CSS3, ne pouvaient être obtenus qu'en utilisant plusieurs images créées dans Photoshop..
Remarque: Tous les exemples suivants ont été testés sur Mozilla Firefox, Safari et Chrome. Si vous souhaitez obtenir quelque chose de similaire dans IE ou tout autre navigateur, laissez un commentaire et je serai heureux de vous aider..
Dans ce didacticiel, nous allons utiliser les fonds de dégradés, les ombres de boîtes et les fonds d’images multiples, sujets abordés dans les deux premiers tutoriels de cette série:
Si vous avez déjà utilisé Photoshop ou un logiciel graphique similaire, vous serez familiarisé avec la valeur d'opacité. Cette magie fonctionne en augmentant ou en diminuant la transparence de tout élément graphique en pourcentage, de 0% (totalement invisible) à 100% (totalement visible). Ce pourcentage est la valeur "Alpha", je vais expliquer comment cela fonctionne plus tard dans le tutoriel..
CSS3 inclut la propriété "opacity", prête à être implémentée dans tous les navigateurs modernes, mais comment ça marche? Imaginez que vous ayez trois éléments Photoshop dans un dossier, comme illustré dans la capture d'écran ci-dessous: une image, une ligne de texte et un carré plein sur un fond d'image. L'image, le texte et le carré jaune se trouvent dans un dossier nommé "Section". En réduisant le pourcentage d'opacité de ce dossier, toutes les couches qu'il contient apparaîtront plus transparentes..
En CSS3, les choses fonctionnent à peu près de la même façon. Le dossier est devenu un élément conteneur HTML (un div, un paragraphe, une section, etc.). Par conséquent, modifier la propriété "opacity" de cet élément augmentera (comme dans Photoshop) la visibilité de tous les éléments qu'il contient. Prenons, par exemple, ce balisage HTML:
Il s'agit d'un élément 100% opaque, tout ce qui est à l'intérieur de cette balise est entièrement visible.
Voyons maintenant le CSS pour le balisage précédent.
/ * Image de fond de page entière * / body.image background-image: url (images / bg.jpg); position de fond: en haut au centre; attachement de fond: fixe; répétition de fond: non répétée; / * Test d'opacité * / .opaque opacity: 1; .translucent60 opacité: 0.6;
Comme vous le voyez, il est très facile de changer d'opacité, mais quand l'utiliseriez-vous? Une technique très efficace consiste à augmenter l'opacité sur le :flotter pseudo-classe:
.translucent_on_hover opacité: 0.4; .translucent_on_hover: survol opacité: 0.9;
Mais si tu veux un vraiment effet impressionnant, vous pouvez introduire quelques transitions?
Un effet de transition interpole les états intermédiaires entre deux étapes ou instances de tout style d'élément HTML.
Pour simplifier les choses, regardons le code de base d'un effet de transition (dans un laps de temps d'une seconde)..
-webkit-transition: tous les 1 sont faciles à installer;
-moz-transition: tous les 1 s'installent facilement;
-o-transition: tous les 1 s'installent facilement;
-ms-transition: tous les 1 s'installent facilement;
transition: tous les 1 s'installent facilement;
Allusion: Pour vous assurer de ne manquer aucun des différents préfixes de navigateur, consultez l'outil Prefxr récemment publié par Jeffrey Way. Ça déchire.
Il vous suffit d'attacher cette règle CSS à l'élément que vous souhaitez animer avec un effet de transition, comme ceci:
.translucent_transition opacity: 0.4; -webkit-transition: tous les 1 sont faciles à installer; -moz-transition: tous les 1 s'installent facilement; -o-transition: tous les 1 s'installent facilement; -ms-transition: tous les 1 s'installent facilement; transition: tous les 1 s'installent facilement; .translucent_transition: hover opacity: 0.9;
Le style "facilité d'entrée" signifie que la transition d'opacité aura lieu en survol (augmentant l'opacité) et reviendra (diminuant l'opacité) à la valeur d'origine lorsque le curseur se déplacera en dehors de l'élément..
Chaque pixel de couleur peut être créé en combinant trois ensembles de valeurs: rouge, vert et bleu, chacun allant de 0 à 255..
Nous utilisons généralement des valeurs hexadécimales pour les couleurs de vos feuilles de style, par exemple les couleurs de base:
Vous pouvez obtenir les mêmes couleurs en utilisant les valeurs RVB de CSS, comme suit: rgb (.
Un moyen facile d'obtenir les valeurs RVB de n'importe quelle couleur consiste à utiliser le sélecteur de couleurs de Photoshop, comme indiqué dans l'image ci-dessous..
Lorsque vous appliquez la propriété "opacity" en CSS, vous affectez l'intégralité du conteneur et tout son contenu. Cela peut être utile parfois, mais vous souhaiterez peut-être seulement que l'arrière-plan soit transparent et que le texte et l'image soient 100% opaques. Voici à nouveau la valeur "Alpha".
CSS3 nous permet d'utiliser un format de couleur RVB comprenant une quatrième valeur appelée Alpha. Ce concept n’est pas nouveau, les images PNG utilisent le canal alpha pour définir la transparence des pixels d’une image sur une valeur de 0 à 1 (0 à 100%). Cela crée un meilleur effet de transparence que les images GIF, car elles ne définissent qu'une valeur visible / invisible sur les pixels..
Prenons par exemple le graphique suivant:
Notez que je ne change que l'opacité sur le calque d'arrière-plan jaune.
Pour ce genre d'effets il y a le "RGBA"(Rouge, Vert, Bleu, Alpha) valeur de couleur:
rgba (
.opaque couleur d'arrière-plan: rgba (255, 150, 0, 1); / * Alpha = 1 signifie 100% opaque * /
Et si vous souhaitez réduire l'opacité de l'arrière-plan pour le rendre translucide, il vous suffit de modifier la dernière valeur des paramètres de couleur rgba..
.translucide couleur de fond: rgba (255, 150, 0, .6); / * Alpha = .6 signifie 60% opaque * /
Comme la couleur rgba se comporte comme une couleur hexadécimale classique, vous pouvez l’utiliser sur un arrière-plan à dégradé linéaire..
.translucent_gradient background-image: -moz-linear-gradient (haut, rgba (255, 150, 0, .9), rgba (255, 150, 0, .1)); background-image: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (rgba (255, 150, 0, .9)) à (rgba (255, 150, 0, .1)) couleur-stop (1, rgba (255, 150, 0, .1)));
Et bien sûr, vous pouvez le combiner avec le style d'opacité pour créer de jolis effets de transition..
.translucent_transition opacity: 0.4; -webkit-transition: tous les 1 sont faciles à installer; -moz-transition: tous les 1 s'installent facilement; -o-transition: tous les 1 s'installent facilement; -ms-transition: tous les 1 s'installent facilement; transition: tous les 1 s'installent facilement; image d'arrière-plan: -moz-linear-gradient (top, rgba (255, 150, 0, .9), rgba (255, 150, 0, .1)); background-image: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (rgba (255, 150, 0, .9)) à (rgba (255, 150, 0, .1)) couleur-stop (1, rgba (255, 150, 0, .1))); .translucent_transition: hover opacity: 1;
Essayons maintenant quelque chose de plus complexe. Nous allons combiner plusieurs arrière-plans d’images en utilisant la transparence, un effet d’opacité de survol, des coins arrondis et des ombres pour créer une impression de profondeur..
Commençons par Photoshop, dans les ressources du didacticiel, vous trouverez le PSD du graphique suivant:
Nous allons essayer d'obtenir un résultat exact en utilisant uniquement les styles CSS3. Il y aura quelques exemples d’images pour la vignette sur les sections et un fond de motif (vous pouvez créer le vôtre). Cette fois, j'ai utilisé bgpatterns.com pour créer une image répétée..
Commençons par le balisage HTML, rien de trop compliqué:
Transparence et opacité
Du texte ici
Transparence et opacité
Du texte ici
Maintenant, la partie amusante, le CSS. Tout d'abord, réinitialisez les styles par défaut, définissez la typographie du corps, puis définissez les styles pour la section wrapper:
/ * Reset * / html, corps, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pré, formulaire, champs, table, th, td , img margin: 0; rembourrage: 0; bordure: 0px; en-tête, section, pied de page, côté, nav, article, figure display: block; / * Fin de réinitialisation * / body font-family: Arial, Helvetica, sans-serif; couleur: # 333; html height: 100%; / * Pour ajouter un dégradé CSS3 au corps de page complet, vous devez définir cette hauteur sur 100% * / .wrapper margin: 0px auto; largeur: 960px; padding: 60px 0px 60px 0px; .left text-align: left;
Puis définissez le fond du corps, essentiellement une image répétée (vous pouvez utiliser n’importe quelle image)
/ * Arrière-plan de l'image corporelle * / body height: 100%; fond: url (images / bg.png); / * Fond d'image * /
Maintenant, nous allons définir les styles d'un autre div wrapper appelé "page", ce div aura fondamentalement les mêmes largeur et hauteur que la fenêtre du navigateur, et plus important encore, nous allons ajouter un fond dégradé linéaire en utilisant les couleurs RGBA.
/ * Dégradé transparent * / .page width: 100%; hauteur: 100%; fond: -moz-linear-gradient (en haut, rgba (15,20,5,0,75) 0%, rgba (15,20,5,0) 50%, rgba (15,20,5,0,75) 100%) ; / * Dégradé transparent * / arrière-plan: -webkit-gradient (linéaire, gauche, supérieur, inférieur gauche, à partir de (rgba (15,20,5,0,75)), couleur-stop (0,5, rgba (15,20,5,0 )), to (rgba (15,20,5,0,75))); / * dégradé transparent * /
Maintenant, définissez le style de la section conteneur, une boîte à coins arrondis avec un arrière-plan translucide.
/ * Fond transparent RGBA * / .container width: 770px; rembourrage: 15px; hauteur: 460px; marge: 0px auto; / * Arrière-plan translucide * / arrière-plan: rgba (89, 113, 29, 0,5); / * Rayon de bordure * / bordure: 1px solide # 71941D; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; / * Se débarrasser de Bleed * / -moz-background-clip: padding; -webkit-background-clip: zone de remplissage; clip d'arrière-plan: padding-box; / * Box Shadow * / box-shadow: 0px 0px 25px rgba (0,0,0,0,75); -moz-box-shadow: 0px 0px 25px rgba (0,0,0,0,75); -webkit-box-shadow: 0px 0px 25px rgba (0,0,0,0,75);
Cela commence à prendre forme. Définissez maintenant les styles des zones de contenu. Définissez la position, un effet de coin arrondi, un fond dégradé et translucide et nous le combinerons avec un effet de survol augmentant l'opacité au passage de la souris (pour cela, activez les effets de transition)..
.box / * Position * / padding: 10px; marge inférieure: 20 px; hauteur min .: 200px; / * Arrière-plan à gradient translucide * / arrière-plan: -moz-linear-gradient (en haut, rgba (26,35,8,0), rgba (26,35,8,0,85)); / * Dégradé transparent * / arrière-plan: -webkit-gradient (linéaire, gauche, supérieur, inférieur gauche, de (rgba (26,35,8,0,15))) à (rgba (26,35,8,0,85)); / * Gradient transparent * / / * Coins arrondis * / -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; / * Corrige le fond perdu * / -moz-background-clip: padding; -webkit-background-clip: zone de remplissage; clip d'arrière-plan: padding-box; / * Cache-le un peu jusqu'à ce que la souris passe * / opacité: 0.4; / * Activer les effets de transition * / -webkit-transition: tous les 1 s'installent facilement; -moz-transition: tous les 1 s'installent facilement; -o-transition: tous les 1 s'installent facilement; -ms-transition: tous les 1 s'installent facilement; transition: tous les 1 s'installent facilement; .box: hover opacity: 1;
Ajoutons maintenant les touches finales pour les éléments HTML à l'intérieur des cases. Vous pouvez essayer d'ajouter plus d'effets aux éléments en mode statique et survolez, cette fois-ci, je ferai apparaître une ombre de boîte visible sur la balise "img" lorsque la souris survolera la section "boîte":
.box img float: left; marge droite: 20px; bordure: solide 1px # 71941D; .box: survoler img box-shadow: 5px 5px 5px rgba (0,0,0,0,50); -moz-box-shadow: 5px 5px 5px rgba (0,0,0,0,30); -webkit-box-shadow: 5px 5px 5px rgba (0,0,0,0,30); .box h3 font-size: 14px; poids de police: gras; couleur: # 8eb548; text-transform: majuscule; rembourrage en bas: 20px; .box p color: # c0cf9d; taille de police: 11px; hauteur de ligne: 150%;
Et voilà, voyons à quoi ça ressemble dans un navigateur:
Il n'y a pas de limite à ce qui peut être fait en utilisant des transparences et des effets d'opacité combinés avec d'autres styles CSS3. Essayez-le maintenant!
Accentsconagua
Il s'agit d'un élément 100% opaque, tout ce qui est à l'intérieur de cette balise est entièrement visible. 
