diff options
Diffstat (limited to 'files/fr/learn/css/building_blocks/advanced_styling_effects/index.html')
| -rw-r--r-- | files/fr/learn/css/building_blocks/advanced_styling_effects/index.html | 57 |
1 files changed, 23 insertions, 34 deletions
diff --git a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html index 8091fe664e..3d0b3c1fe5 100644 --- a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html +++ b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html @@ -19,13 +19,13 @@ original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects <div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> -<p class="summary">Cet article est une sorte de boîte à malices : elle introduit certaines des fonctions avancées disponibles pour styliser les boîtes, fonctions n'entrant pas dans catégories vues plus haut — comme les ombres, les mélanges de couleurs ou les filtres.</p> +<p>Cet article est une sorte de boîte à malices : elle introduit certaines des fonctions avancées disponibles pour styliser les boîtes, fonctions n'entrant pas dans catégories vues plus haut — comme les ombres, les mélanges de couleurs ou les filtres.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Notions de HTML (voir <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>) et idées sur le fonctionnement des CSS (voir <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a>).</td> + <td>Notions de HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>) et idées sur le fonctionnement des CSS (voir <a href="/fr/docs/Learn/CSS/Introduction_to_CSS">Introduction aux CSS</a>).</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -36,7 +36,7 @@ original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects <h2 id="Ombres_des_boîtes">Ombres des boîtes</h2> -<p>Revenons au module <a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a> — nous y avons vu la propriété {{cssxref("text-shadow")}} : elle permet d'appliquer une ou plusieurs ombres portées au texte d'un élément. Il existe une propriété équivalente pour les boîtes — {{cssxref("box-shadow")}} : elle applique une ou plusieurs ombres portées à une boîte d'élément réelle. Tout comme les ombres de texte, les ombres de boîtes sont bien prises en charge par les navigateurs, mais seulement au-delà de IE9. Les utilisateurs des anciennes versions d'IE pourraient être confrontés à l'absence d'ombres ; donc, testez simplement vos designs pour être sûr que le contenu reste lisible sans ombrage.</p> +<p>Revenons au module <a href="/fr/docs/Learn/CSS/Styling_text">Styling text</a> — nous y avons vu la propriété {{cssxref("text-shadow")}} : elle permet d'appliquer une ou plusieurs ombres portées au texte d'un élément. Il existe une propriété équivalente pour les boîtes — {{cssxref("box-shadow")}} : elle applique une ou plusieurs ombres portées à une boîte d'élément réelle. Tout comme les ombres de texte, les ombres de boîtes sont bien prises en charge par les navigateurs, mais seulement au-delà de IE9. Les utilisateurs des anciennes versions d'IE pourraient être confrontés à l'absence d'ombres ; donc, testez simplement vos designs pour être sûr que le contenu reste lisible sans ombrage.</p> <p>Vous trouverez les exemples de cet article dans le fichier <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html">box-shadow.html</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html">code source</a> également).</p> @@ -44,7 +44,7 @@ original_slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects <p>Débutons avec un exemple simple. D'abord, un peu de HTML :</p> -<div id="example_1"> + <pre class="brush: html"><article class="simple"> <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p> </article></pre> @@ -59,7 +59,7 @@ article { max-width: 500px; padding: 10px; color: white ; -<code class="language-css"><span class="property token"> text-align</span><span class="punctuation token">:</span> center</code> ; + text-align: center; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } @@ -67,11 +67,11 @@ article { .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); }</pre> -</div> + <p>donnent le résultat suivant :</p> -<p>{{ EmbedLiveSample('example_1', '100%', 100) }}</p> +<p>{{ EmbedLiveSample('Ombre_simple_pour_une_boîte', '100%', 100) }}</p> <p>Notez les quatre éléments valeur de la propriété <code>box-shadow</code> :</p> @@ -88,14 +88,12 @@ article { <p>Vous pouvez également définir plusieurs ombres de boîtes dans une seule déclaration en les séparant par des virgules :</p> -<div id="example_2"> -<div class="hidden"> -<pre class="brush: html"><article class="multiple"> +<pre class="brush: html hidden"><article class="multiple"> <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p> </article></pre> </div> -<pre class="brush: css">p { +<pre class="brush: css hidden">p { margin: 0; } @@ -114,11 +112,10 @@ article { 5px 5px 1px black, 6px 6px 1px black; } </pre> -</div> <p>Nous obtenons le résultat suivant :</p> -<p>{{ EmbedLiveSample('example_2', '100%', 100) }}</p> +<p>{{ EmbedLiveSample('Ombres_multiples_pour_une_boîte', '100%', 100) }}</p> <p>Voici quelque chose d'amusant : nous créons une boîte avec une impression de relief avec plusieurs couches de couleur. Vous pouvez utiliser ce procédé d'autre manière, par exemple pour donner une apparence plus réaliste avec des ombres à partir de plusieurs sources de lumière.</p> @@ -128,7 +125,6 @@ article { <p>D'abord un HTML différent pour cet exemple :</p> -<div id="example_3"> <pre class="brush: html"><button>Appuyez ici !</button></pre> <pre class="brush: css">button { @@ -152,20 +148,17 @@ button:active { inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); }</pre> -</div> <p>Et voici le résultat :</p> -<p>{{ EmbedLiveSample('example_3', '100%', 70) }}</p> - -<p> </p> +<p>{{ EmbedLiveSample('Autres_fonctionnalités_des_ombres_de_boîtes', '100%', 70) }}</p> <p>Ici, nous avons mis en place un style de bouton avec des états différents selon qu'il a le focus, qu'il est survolé par le pointeur de souris ou qu'il est actif. Le bouton est doté d'une simple ombre noire définie par défaut, plus deux ombres d'insertion, l'une claire et l'autre sombre, placées sur les coins opposés du bouton pour lui donner un bel effet d'ombrage.</p> <p>Lorsque le bouton est cliqué, l'état actif entraîne le remplacement de la première ombre de la boîte par une ombre d'insertion très sombre, donnant l'apparence que le bouton est enfoncé.</p> <div class="note"> -<p><strong>Note </strong>: il y a un autre élément qui peut être paramétré parmi les valeurs de <code>box-shadow</code> — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le <strong>rayon de diffusion</strong>. S'il est défini, l'ombre devient plus grande que la boîte originelle. Ce paramètre n'est pas couramment utilisé, mais il est bon de le signaler.</p> +<p><strong>Note :</strong> il y a un autre élément qui peut être paramétré parmi les valeurs de <code>box-shadow</code> — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le <strong>rayon de diffusion</strong>. S'il est défini, l'ombre devient plus grande que la boîte originelle. Ce paramètre n'est pas couramment utilisé, mais il est bon de le signaler.</p> </div> <h2 id="Filtres">Filtres</h2> @@ -186,7 +179,7 @@ button:active { <pre class="brush: css">p { margin: 1rem auto; padding: 20px; - <code class="language-css"><span class="property token">text-align</span><span class="punctuation token">:</span> center</code> ; + <code class="language-css">text-align: center</code> ; width: 100px; border: 5px dashed red; } @@ -214,7 +207,7 @@ button:active { </ul> <div class="note"> -<p><strong>Note </strong>: Si vous décidez d'utiliser des préfixes dans votre code, assurez-vous d'inclure tous les préfixes requis ainsi que la version non préfixée, afin que le plus grand nombre possible de navigateurs puissent utiliser la fonction, et lorsque les navigateurs abandonneront plus tard les préfixes, ils pourront également utiliser la version non préfixée. Soyez également averti que ces caractéristiques expérimentales pourraient changer, de sorte que votre code pourrait casser. Il est vraiment préférable d'expérimenter avec ces fonctions jusqu'à ce que les préfixes soient supprimés.</p> +<p><strong>Note :</strong> Si vous décidez d'utiliser des préfixes dans votre code, assurez-vous d'inclure tous les préfixes requis ainsi que la version non préfixée, afin que le plus grand nombre possible de navigateurs puissent utiliser la fonction, et lorsque les navigateurs abandonneront plus tard les préfixes, ils pourront également utiliser la version non préfixée. Soyez également averti que ces caractéristiques expérimentales pourraient changer, de sorte que votre code pourrait casser. Il est vraiment préférable d'expérimenter avec ces fonctions jusqu'à ce que les préfixes soient supprimés.</p> </div> <p>Vous pouvez voir d'autres exemples de filtres sur <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html">filters.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/filters.html">code source</a>).</p> @@ -233,7 +226,7 @@ button:active { <p>Vous trouverez beaucoup plus d'exemples de ce qui est disponible à la page <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html">blend-modes.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html">code source</a>) et à la page de référence de {{cssxref("<blend-mode>")}}.</p> <div class="note"> -<p><strong>Note </strong>: Les modes de mélange sont aussi une toute nouvelle fonctionnalité un petit peu moins bien prise en charge que les filtres. Il n'y a pas de prise en charge encore dans Edge et Safari ne l'accepte que partiellement.</p> +<p><strong>Note :</strong> Les modes de mélange sont aussi une toute nouvelle fonctionnalité un petit peu moins bien prise en charge que les filtres. Il n'y a pas de prise en charge encore dans Edge et Safari ne l'accepte que partiellement.</p> </div> <h3 id="background-blend-mode">background-blend-mode</h3> @@ -331,7 +324,7 @@ article div:last-child { <p>Vous voyez ici que <code>mix-blend-mode: multiply;</code> a mélangé non seulement les deux images d'arrière plan, mais également la couleur du <code><div></code> situé dessous.</p> <div class="note"> -<p><strong>Note </strong>: Ne vous inquiétez pas si vous ne saisissez pas certaines propriétés de mise en page telles que {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Nous en reparlerons en détail dans le module <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS Layout</a>.</p> +<p><strong>Note :</strong> Ne vous inquiétez pas si vous ne saisissez pas certaines propriétés de mise en page telles que {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Nous en reparlerons en détail dans le module <a href="/fr/docs/Learn/CSS/CSS_layout">CSS Layout</a>.</p> </div> <h2 id="-webkit-background-clip_text">-webkit-background-clip: text</h2> @@ -348,7 +341,7 @@ article div:last-child { <p>Si vous voulez utiliser de telles fonctionnalités dans votre travail de production, assurez-vous de tester minutieusement tous les navigateurs et vérifiez que, lorsque ces fonctionnalités ne sont pas prises en charge , le site reste toujours utilisable.</p> <div class="note"> -<p><strong>Note </strong>: Pour un exemple de code complet avec <code>-webkit-background-clip: text</code>, allez à la page <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">code source</a>).</p> +<p><strong>Note :</strong> Pour un exemple de code complet avec <code>-webkit-background-clip: text</code>, allez à la page <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">code source</a>).</p> </div> <h2 id="Apprentissage_actif_expérimenter_certains_effets">Apprentissage actif : expérimenter certains effets</h2> @@ -357,10 +350,8 @@ article div:last-child { <p>Si vous faites une erreur, vous pouvez toujours <em>Réinitialiser</em> l'exemple avec le bouton correspondant.</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> -<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> +<pre class="brush: html hidden"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> <h2>Zone de saisie HTML</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="style-me"> </div></textarea> @@ -385,7 +376,7 @@ article div:last-child { </div> </pre> -<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +<pre class="brush: js hidden">var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -411,9 +402,9 @@ htmlInput.addEventListener("input", drawOutput); cssInput.addEventListener("input", drawOutput); window.addEventListener("load", drawOutput); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 820) }}</p> + +<p>{{ EmbedLiveSample('Apprentissage_actif_expérimenter_certains_effets', 700, 820) }}</p> <h2 id="Résumé">Résumé</h2> @@ -421,8 +412,6 @@ window.addEventListener("load", drawOutput); <p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p> -<p> </p> - <h2 id="Dans_ce_module">Dans ce module</h2> <ul> @@ -431,6 +420,6 @@ window.addEventListener("load", drawOutput); <li><a href="/fr/docs/Apprendre/CSS/styliser_boites/Borders">Encadrements</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Styling_tables">Mise en page des tableaux</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/Advanced_box_effects">Effets de boîte avancés</a></li> - <li><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creation d'un en-tête de papier à lettre élégant</a></li> + <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creation d'un en-tête de papier à lettre élégant</a></li> <li><a href="/fr/Apprendre/CSS/styliser_boites/A_cool_looking_box">Une boîte d'aspect rafraîchissant</a></li> </ul> |