Une boîte d'aspect rafraîchissant

Pour débuter, vous devez :

• faire des copies locales de ces HTML et CSS — enregistrez‑les sous les noms index.html et style.css dans un nouveau répertoire.

Autrement, vous pouvez utiliser un site comme CodePen, JSFiddle ou Glitch pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <style> dans l'élément head du document.

Votre tâche consiste à créer une boîte élégante et rafraîchissante tout en explorant le côté ludique des CSS.

• Appliquez la CSS au HTML.

Vous devez appliquer un style à l'élément <p> en lui donnant :

• une largeur raisonnable pour un gros bouton, disons autout de 200 pixels,
• une hauteur raisonnable pour un gros bouton en centrant le texte verticalement dans ce processus,
• un texte centré horizontalement,
• une taille de texte légérement augmentée, vers 17-18 pixels. Utilisez les rem comme unité. Écrivez un commentaire sur la façon dont vous avez opéré pour le calcul de la valeur.
• une couleur de base pour l'aspect général. Cette couleur de boîte sera celle de son arrière‑plan.
• la même couleur pour le texte. Faites en sorte qu'il soit lisible en le dotant d'un ombrage de couleur noire.
• un encadrement avec des coins arrondis subtils,
• un encadrement de 1-pixel uni de couleur similaire à la couleur de base, mais légérement plus foncée.
• un gradient linéaire noir semi‑transparent à partir du coin inférieur droit. Faites‑le totalement transparent au départ et donnez‑lui une opacité croissante de 0,2 sur 30% de la longueur puis restant de la même couleur jusqu'à l'autre extrémité.
• des ombres de boîte multiples. Donnez lui un ombrage la faisant ressortir légérement de la page. Les autres deux seront des ombres avec la propriété inset — une ombre blanche semi-transparente près de l'angle supérieur gauche et une ombre semi‑transparent noir près de l'angle inférieur droit — pour donner un aspect surélevé 3D à la boîte.

Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler :

Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur le fil de discussion à propos de cet exercice ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abord, il n'y rien à gagner en trichant !

• Précédent
• Aperçu : CSS building blocks