Table des matières
Les sites ou applications Web qui traitent tout ce qui concerne les recettes alimentaires doivent avoir un design non seulement attrayant, mais aussi utile, convivial et permettant aux utilisateurs d'exécuter les instructions indiquées dans lesdites recettes.Si notre cœur est exactement cela, alors nous devons mettre en œuvre de bonnes conceptions pour chacune des recettes publiées sur notre site ou notre application Web, et bien que nous puissions penser que nous avons besoin d'heures et d'heures de conception, la vérité est qu'avec certains styles de CSS et une structure bien planifiée, nous pouvons réaliser ce dont nous avons besoin.
Code HTML
Notre HTML Ce sera assez simple, nous inclurons notre fichier styles.css dans notre en-tête et nous le structurerons en une série de divs, où nous organiserons les informations en listes, en plus d'identifier le bloc d'informations avec une balise article :
velours rouge
Dessert
- 1
- 45 minutes
- Difficulté
- 560
Un gâteau de velours rouge -en anglais : gâteau de velours rouge- est un gâteau de couleur rouge foncé, rouge vif ou rouge-brun.
Ingrédients : Lait, farine, oeufs, vanille, colorant, sucre, beurre.
Ici, nous ajoutons en plus l'image de notre recette, que chacun d'entre vous modifiera en fonction de vos besoins, voyons ce que notre fichier .css portera.Code CSS
En ayant notre structure définie en .html, nous n'avons qu'à créer nos styles. Pour cela, nous utiliserons certaines propriétés connues sous le nom de Rembourrage de marge et postes. En plus de cela, nous utiliserons des propriétés telles que les dégradés ou le dimensionnement de la boîte, Voyons voir:
* {-webkit-box-sizing : border-box; -moz-box-sizing : border-box ; dimensionnement de la boîte : border-box; } html {hauteur : 100 % ; } corps {couleur de fond : # 57abf2 ; image de fond : -webkit-linear-gradient (-225deg, # 19d3d1 5%, # 57abf2) ; image de fond : gradient linéaire (-45deg, # 19d3d1 5%, # 57abf2); font-family : 'Open Sans', sans-serif; taille de police : 1rem ; } img {max-largeur : 100 % ; hauteur : automatique ; alignement vertical : bas ; } .recipe-card {arrière-plan : #fff; marge : 4em auto ; largeur : 90 % ; largeur maximale : 496 px ; bordure-haut-gauche-rayon : 5px ; bordure-haut-droite-rayon : 5px ; bordure-bas-gauche-rayon : 5px ; bordure-bas-droite-rayon : 5px ; } En plus de cela, nous allons utiliser les propriétés des enfants de notre document et pour les icônes que nous utiliserons dans notre recette nous allons utiliser un .svg pour les extraire et les placer dans notre HTML :
.recipe-card .icon {affichage : en ligne; affichage : bloc en ligne ; image d'arrière-plan : URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg); background-repeat : pas de répétition; } .recipe-card .icon-calories, .recipe-card .icon-calories \: regular {background-position: 0 0; largeur : 16px ; hauteur : 19px ; } .recipe-card .icon-clock, .recipe-card .icon-clock \: regular {background-position: 0 -19px; largeur : 20px ; hauteur : 20px ; } .recipe-card .icon-level, .recipe-card .icon-level \: regular {background-position: 0 -39px; largeur : 16px ; hauteur : 19px ; } .recipe-card .icon-play, .recipe-card .icon-play \: regular {background-position: 0 -58px; largeur : 21px ; hauteur : 26px ; } .recipe-card .icon-users, .recipe-card .icon-users \: regular {background-position: 0 -84px; largeur : 18px ; hauteur : 18px ; }Une fois cela fait, voyons le résultat final de ce à quoi ressemblerait notre recette.
AGRANDIR
recette.zip 91.82K 415 téléchargementsAvez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif
