Création d'un en-tête de papier à lettre élégant

Pour débuter cet exercice, vous devez :

• faire une copie locale du HTML et de la CSS — enregistrez‑les sous les noms index.html et style.css dans un nouveau répertoire.
• enregistrer des copies locales des images d'en‑tête, pied de page et logo dans le même répertoire que les fichiers de code.

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.

Vous avez les fichiers nécessaires à la création d'un modèle de papier à en-tête. Rassemblez les dossiers. Il faut :

• appliquer la CSS au HTML,

• ajouter à la lettre une déclaration background qui :

  • place l'image haute en en‑tête de lettre
  • place l'image basse en pied de lettre
  • ajoute un gradient semi-transparent au‑dessus des deux arrière‑plans ci‑dessus pour donner un peu de texture à la lettre. Faites en sorte qu'il soit légèrement obscurcissant en en‑tête et pied de page, mais totalement transparent sur la plus grande partie du centre de la lettre,

• ajouter une autre déclaration background qui mette uniquement l'image haute en en‑tête, en recours pour les navigateurs qui ne prennent pas en charge la précédente déclaration,

• ajouter un arrière‑plan de couleur blanche à la lettre.

• ajouter un encadrement plein de 1mm en haut et en bas de la lettre, dans une couleur qui soit en accord avec le schéma de couleur général,

• à l'élément <h1>, ajouter le logo en tant qu'image de fond,
• ajouter un filtre au logo pour donner une très légère ombre portée,.
• puis, commenter le filtre et implémenter l'ombre portée d'une autre manière pour être compatible inter-navigateurs, mais qui suive encore la forme ronde de l'image.

• Souvenez‑vous que vous pouvez créer un recours pour les navigateurs les plus anciens en faisant la déclaration de la version de recours avant celle qui n'est prise en charge que par les navigateurs modernes. Les anciens navigateurs appliqueront la première déclaration tout en ignorant la seconde, alors que les navigateurs récents appliqueront la première déclaration, mais l'écraseront avec la seconde.
• Vous êtes bien entendu libre de créer vos propres graphes si vous le souhaitez.

Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera :

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
• Suivant