Les feuilles de style CSS (9/15) - Listes, débordement et opacité

Bonjour à tous et bienvenue dans cette nouvelle leçon de CSS. Aujourd'hui nous allons voir les listes, le débordement et l'opacité. Dans le code HTML suivant, nous avons intégré une balise <ul> qui contient 3 balises <li>, donc 3 entrées: entrée 1, entrée 2 et entrée 3. Si on exécute pour voir le résultat sur le navigateur, le rendu va ressembler à ceci. Ils ont été intégrés avec des marqueurs par défaut qui sont des disques. Nous avons vu en HTML que l'on peut changer ces marqueurs grâce à l'attribut type, mais on peut faire la même chose avec le CSS. Nous allons maintenant nous rendre sur la page CSS pour pouvoir modifier les styles qui concernent la balise ul. Alors on va commencer par list-style-type. Voilà, list-style-type, il peut accepter les valeurs que nous avons déjà vues en HTML, à savoir disc, circle ou bien square. Par défaut c'est disk. Quand j'exécute rien ne va changer. Donc ce sont les marqueurs par défaut. Maintenant on peut mettre circle exactement comme en HTML. Ça donne des cercles creux. Ou bien square qui donne des carrés. Nous allons maintenant voir le style list-style-position qui peut posséder 2 valeurs soit inside ou bien outside. Inside, ça va donner le résultat suivant. On va voir que les marqueurs, ils sont un petit peu rentrés. Ou bien outside, qui est la valeur par défaut. Dans ce cas, les marqueurs seront à l'extérieur. Quand je dis à l'intérieur ou bien à l'extérieur, c'est tout simplement par rapport à la balise li. Pour mieux voir ceci, on va essayer de styler la balise li comme ça. On va lui donner une bordure, donc border-solid-1px orange. Alors là, avec la valeur outside, on constate bien que les marqueurs sont à l'extérieur de la balise li. Mais avec inside, ils sont à l'intérieur. Dernier style maintenant, c'est list-style-image. Bon, c'est-à-dire que si vous voulez pas mettre les marqueurs par défaut comme square ou bien circle ou encore disk, alors il suffit tout simplement de choisir une image de votre choix. Dans ce cas, j'ai prévu une image dans le dossier images qui s'appelle ul.png. Et de la même manière, on va établir un chemin relatif commençant du style CSS. Voilà, alors là on va mettre URL exactement comme on fait pour les arrière-plans, /images/ul.png. Quand j'exécute, je vais voir maintenant que les marqueurs ont été remplacés par des images personnalisées. Je peux enlever ce style li pour avoir le résultat qui va ressembler à ceci à la fin. Bien sûr, il faut prendre soin de choisir des bonnes images Généralement de format GIF, voire même PNG ou bien JPG, mais de petite taille pour que la qualité ne soit pas compromise. Et du coup, vous aurez des puces qui sont personnalisées pour casser le rendu par défaut du HTML. Nous allons maintenant aborder la deuxième partie de cette leçon qui est consacrée aux débordements. Dans le code HTML, j'ai déjà prévu une balise div identifiée par container qui contient une sorte de paragraphe. Avec le CSS, j'ai essayé d'appliquer quelques styles de base comme des marges ou bien la couleur d'arrière-plan. Et à la fin, on a le résultat suivant. C'est une div dont l'arrière-plan est coloré en noir qui contient du texte. Mais puisque le texte est plus gros que la div, alors forcément il a débordé. Nous avons du texte même qui se poursuit à l'extérieur du container. Maintenant, on va essayer de contrôler ce débordement. Premièrement, on va intégrer le style overflow pour dire débordement. Alors, la valeur par défaut de overflow, c'est visible. Visible, ça veut dire quoi? Ça veut dire que même si les dimensions du conteneurs sont plus petits que le texte qu'ils contiennent, alors le texte se poursuit à l'extérieur même de ce conteneur-là, ce qui donne un petit peu le résultat que l'on voit devant nous. Mais on peut aussi mettre la valeur hidden. La valeur hidden, ça veut dire que tout simplement toute la partie qui déborde, elle va être masquée et elle pourra plus être accessible comme ça. Donc on a juste la partie du texte, mais on peut pas voir la suite. Bon, même le scrollbar ne s'affiche pas. Maintenant, pour pouvoir accéder à cette partie du texte en comprenant le débordement, ça veut dire en la maintenant à l'intérieur du conteneur, il suffit de mettre ici la valeur auto. La valeur auto, il va tout simplement afficher une scrollbar en cas de besoin, c'est-à-dire que je peux défiler maintenant et je peux voir la suite du texte. Une autre valeur, c'est scroll. Dans ce cas scroll, il va de toute manière afficher des scrollbars horizontales et verticales. Et du coup, même si le texte est plus petit que le conteneur, vous aurez toujours des scrollbars qui seront déposés sur le bord du conteneur. Mais ils seront pas activés parce qu'on n'en aura pas vraiment besoin. Alors voilà ce que ça donne, donc la barre verticale est conservée, il y a même l'intégration de la barre horizontale qui est désactivée parce qu'on n'en a pas vraiment besoin, mais son emplacement a été réservé. Alors ça, c'est ce qui concerne les débordements. En général, on met soit la valeur hidden pour pouvoir appliquer ensuite du JavaScript pour ajouter des effets qui sont plus interactifs, ou bien auto. Comme ça, donc, on peut contrôler nos débordements tout en permettant au navigateur d'afficher à la demande scrollbars. Pour la dernière partie maintenant, nous allons voir l'opacité. Et pour faire ceci, nous allons essayer d'intégrer une image. Balise img src, nous allons utiliser l'image qui s'appelle logo.png. De cette manière, j'exécute. Alors l'image est placée ici. Maintenant, je vais essayer de la positionner pour qu'elle puisse couvrir le contenu qui est là. Alors on va aller dans CSS et on va mettre un img. Voilà, on a une seule image, alors forcément le style va s'appliquer à cette image-là. Mais imaginons que vous avez d'autres images, dans ce cas il faut la sélectionner de manière plus précise, soit avec des ID ou bien les méthodes que nous avons vues. Par exemple, on va mettre src égale image/logo.png. Ça veut dire c'est une balise img qui contient l'attribut src dont la valeur c'est image/logo.png. Et maintenant à l'intérieur, on va mettre position absolute, et ensuite on va mettre top par exemple 40px. Quand j'exécute, on va voir que l'image couvre en partie le conteneur div. On veut maintenant rendre cette image un peu transparente pour qu'elle puisse laisser apparaître ce qui est derrière. Alors là, il suffit de mettre la propriété opacity. Et opacity peut accepter une valeur décimale qui est comprise entre 0 et 1 avec une précision de 2 chiffres après la virgule. Par exemple, la valeur 1, c'est opaque à 100%, ça n'aura aucun effet. La valeur 0, c'est transparente à 100%. Alors dans ce cas, l'image, c'est comme si elle n'a pas été intégrée. Ou bien la valeur, par exemple, 0,33 avec 2 chiffres après la virgule, qui donne l'image qui est en quelque sorte translucide. Ça veut dire qu'elle laisse apparaître en partie le contenu qui est derrière. Maintenant, imaginez que je veux appliquer cette transparence au conteneur lui-même. Je vais maintenant écarter l'image. Aussi dans le CSS. Et sur ce conteneur-là, je vais mettre opacity par exemple 0.33. Bon, qu'est-ce qui va se passer maintenant? C'est que le conteneur en entier est devenu transparent, c'est-à-dire que l'arrière-plan, les bordures et même le texte qui est dedans, c'est tout est devenu transparent. Mais si vous voulez appliquer la transparence uniquement à l'arrière-plan tout en conservant les autres objets sans les toucher, Alors il suffit d'agir uniquement sur le RGBA comme on a vu. Donc pour l'arrière-plan, on va enlever ça, et pour l'arrière-plan, au lieu de mettre le codage décimal ou bien RGB, on va mettre RGBA. Ça veut dire la prise en charge de la transparence. Et on va mettre la couleur noire avec la valeur par exemple 0.33. Dans ce cas, seul l'arrière-plan est concerné par la transparence et les autres éléments qui constituent l'objet, ils vont rester tels qu'ils sont. Et ça donne à la fin cet effet. Merci pour votre attention et à la vidéo prochaine.