diff options
Diffstat (limited to 'files/fr/learn/css/howto/create_fancy_boxes/index.html')
| -rw-r--r-- | files/fr/learn/css/howto/create_fancy_boxes/index.html | 38 |
1 files changed, 13 insertions, 25 deletions
diff --git a/files/fr/learn/css/howto/create_fancy_boxes/index.html b/files/fr/learn/css/howto/create_fancy_boxes/index.html index dd242c62a3..31db5f3ac9 100644 --- a/files/fr/learn/css/howto/create_fancy_boxes/index.html +++ b/files/fr/learn/css/howto/create_fancy_boxes/index.html @@ -1,16 +1,12 @@ --- title: Créer de belles boîtes slug: Learn/CSS/Howto/create_fancy_boxes -tags: - - Apprendre - - CSS - - Débutant translation_of: Learn/CSS/Howto/create_fancy_boxes original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes --- -<p class="summary">Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.</p> +<p>Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.</p> -<p>Avant d'attaquer la partie pratique, nous vous recommandons de lire <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">l'article qui explique le fonctionnement du modèle de boîte CSS</a>. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire <a href="/fr/Apprendre/CSS/Les_bases/La_disposition">les bases de la disposition en CSS</a>.</p> +<p>Avant d'attaquer la partie pratique, nous vous recommandons de lire <a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">l'article qui explique le fonctionnement du modèle de boîte CSS</a>. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire <a href="/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction">les bases de la disposition en CSS</a>.</p> <p>D'un point de vue technique, créer de belles boîtes devient beaucoup plus simple quand on connaît les propriétés de bordure (<code>border-*</code>) et d'arrière-plan (<code>background-*</code>) et les règles qui permettent de les appliquer sur une boîte donnée. Mais au delà de cet aspect technique, il s'agit aussi de laisser libre cours à votre créativité. Cela ne se fera pas en un jour et certains développeurs web passent beaucoup temps sur ces sujets.</p> @@ -35,9 +31,7 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes <h3 id="Créer_des_cercles">Créer des cercles</h3> -<div class="hidden"> -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> -</div> +<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> <p>Voici un exemple à la fois simple et sympa. La propriété {{cssxref("border-radius")}} est utilisée pour arrondir les angles d'une boîte. Que se passe-t-il lorsque la taille du rayon pour l'arrondi est en fait supérieure ou égale à la taille de la boîte ?</p> @@ -75,18 +69,16 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes <h2 id="Les_arrière-plans">Les arrière-plans</h2> -<p>Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont <a href="/fr/docs/Web/CSS/CSS_Background_and_Borders">les propriétés <code>background-*</code></a>. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.</p> +<p>Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont <a href="/fr/docs/conflicting/Web/CSS/CSS_Backgrounds_and_Borders">les propriétés <code>background-*</code></a>. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.</p> <p>Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans :</p> <ul> - <li>On peut définir <a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">plusieurs arrière-plans</a> pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches.</li> + <li>On peut définir <a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">plusieurs arrière-plans</a> pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches.</li> <li>Les arrière-plans peuvent être des couleurs unies ou des images. Les couleurs remplissent toute la surface mais les images peuvent être mises à l'échelle et positionnées sur la boîte.</li> </ul> -<div class="hidden"> -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> -</div> +<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> <p>Passons à la manipulation :</p> @@ -123,18 +115,16 @@ original_slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes <p>{{EmbedLiveSample('Les_arrière-plans', '100%', '200')}}</p> <div class="note"> -<p><strong>Note :</strong> Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter <a href="http://lea.verou.me/css3patterns/">les excellents motifs CSS de Lea Verou</a>. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">notre article dédié</a>.</p> +<p><strong>Note :</strong> Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter <a href="https://lea.verou.me/css3patterns/">les excellents motifs CSS de Lea Verou</a>. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire <a href="/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients">notre article dédié</a>.</p> </div> <h2 id="Les_pseudo-éléments">Les pseudo-éléments</h2> -<p>Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser <a href="/en-US/docs/Web/CSS/Pseudo-elements">les pseudo-éléments CSS</a>.</p> +<p>Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser <a href="/fr/docs/Web/CSS/Pseudo-elements">les pseudo-éléments CSS</a>.</p> <h3 id="Un_nuage">Un nuage</h3> -<div class="hidden"> -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> -</div> +<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> <p>Voici un exemple qui illustre comment transformer la boîte en nuage :</p> @@ -275,13 +265,11 @@ blockquote i { <p>{{EmbedLiveSample('Une_citation', '100%', '300')}}</p> -<h2 id="L'assemblage">L'assemblage</h2> +<h2 id="Assemblage">Assemblage</h2> <p>En fusionnant tout ces aspects, il est possible de créer des effets somptueux. Au fur et à mesure, cela s'équilibrera entre un défi technique et un défi créatif. Pour conclure, par exemple, on peut créer des illusions d'optique :</p> -<div class="hidden"> -<pre class="brush: html"><div class="joli">Coucou ! Je veux être joli.</div></pre> -</div> +<pre class="brush: html hidden"><div class="joli">Coucou ! Je veux être joli.</div></pre> <p>Nous allons ici créer un effet d'ombre portée. La propriété {{cssxref("box-shadow")}} permet d'obtenir un effet basique mais en manipulant les pseudo-éléments et la propriété {{cssxref("transform")}}, on peut obtenir un résultat plus naturel.</p> @@ -308,8 +296,8 @@ blockquote i { transform: rotate(4deg); }</pre> -<p>{{EmbedLiveSample("L'assemblage", '100%', '100')}}</p> +<p>{{EmbedLiveSample("Assemblage", '100%', '100')}}</p> <h2 id="La_suite">La suite</h2> -<p>Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc <a href="/fr/Apprendre/CSS/Comment/Gérer_les_couleurs_et_les_images">à approfondir la gestion des couleurs et des images</a>. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir <a href="/fr/Apprendre/CSS/Les_bases/La_disposition">les bases de la disposition</a>.</p> +<p>Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc <a href="/fr/docs/Apprendre/CSS/Comment/Gérer_les_couleurs_et_les_images">à approfondir la gestion des couleurs et des images</a>. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir <a href="/fr/docs/conflicting/Learn/CSS/CSS_layout/Introduction">les bases de la disposition</a>.</p> |