Share
Aujourd'hui, nous allons créer l'interface Web App Joyeux Noël; une mise en page Photoshop d'un tutoriel précédent de Tomas Laurinavicius.
Ce sera un tutoriel en deux parties. Nous utiliserons des techniques de base réactives et des éléments progressivement améliorés, le tout simplifié un peu avec l’utilisation de SASS. Ce tutoriel ne couvrira pas comment faire fonctionner l'application avec Twitter, mais il jettera les bases pour faire avancer le développement.
Pour en savoir plus sur le SASS, visitez notre série d’écrans Mastering Sass ou visitez sass-lang.com. Je suis sur un Mac, je vais donc utiliser l'excellent CodeKit pour regarder et compiler ma feuille de style SASS. Il existe de nombreuses alternatives à CodeKit telles que Koala et Scout. Ils fournissent tous presque la même fonctionnalité et se révèlent inestimables lorsque vous ne voulez pas jouer avec la ligne de commande..
Alors sans plus tarder, allons-nous commencer à construire la page?
Notre première étape consiste à créer toutes les tranches dont nous avons besoin dans notre PSD et à les exporter au format images..
Pour cette conception particulière, nous n'avons besoin que de quatre images, qui sont toutes contenues dans la section supérieure..
Nous avons la grande image d'arrière-plan, le sapin supérieur, le sapin blanc et le sapin vert inférieur. À l'aide de l'outil Slice de Photoshop, nous pouvons tracer un cadre autour de chaque élément à exporter. Afin d’obtenir l’image d’arrière-plan seule, nous devons masquer les calques situés au-dessus de celle-ci avant de les enregistrer pour Web afin d’éviter que ces éléments fassent partie de l’image. Nous pouvons rapidement masquer toutes les couches sauf celle que nous voulons, en maintenant ALT / Option et en cliquant sur l'icône de visibilité à côté de la couche. Faire cela sur un groupe de calques dans Photoshop affichera uniquement le contenu du groupe et n'affectera pas les calques déjà masqués.
Une fois que nous avons nos tranches, nous pouvons utiliser la boîte de dialogue "Enregistrer pour le Web" de Photoshop pour exporter nos images dans un endroit sûr. Conseil rapide: accélérez votre flux de travail avec Photoshop Actions pour en savoir plus sur le découpage dans Photoshop.
La prochaine étape consiste à trier nos fichiers et dossiers.
Pour commencer à travailler sur la page Web, nous avons besoin de fichiers et de dossiers avec lesquels travailler. Nous n'avons besoin que d'une configuration de base ici, donc la structure suivante devrait la couvrir.
Nous devons maintenant copier les images exportées précédemment dans le dossier images et créer un style.scss fichier contenant toutes nos déclarations SASS.
Rappelles toi: lorsque vous utilisez une application associée telle que CodeKit, vérifiez le chemin de sortie de votre fichier CSS compilé afin de vous assurer qu'il apparaîtra au bon endroit.
Lorsque vous utilisez Sass et, bien sûr, tout simplement CSS, vous avez la possibilité de scinder votre feuille de style en morceaux plus petits et de les inclure tous dans un seul fichier. Par exemple, vous pourriez avoir un _variables.scss "partial" pour contenir toutes les déclarations de variables et un _functions.scss "partial" pour contenir tous les mixins que vous pourriez créer. Le monde est vraiment votre huître ici, mais pour ce projet, il est assez simple d’avoir un seul fichier Sass, c’est ce que nous allons faire..
J'aime également inclure une copie de Modernizr.js afin que nous puissions détecter différentes capacités de navigateur si nous en avons besoin. La construction utilisée ici comprend de nombreuses fonctionnalités CSS3 et HTML5.
Nous devons également inclure les avatars des six utilisateurs que nous pouvons voir dans les tweets. Ceux-ci peuvent être trouvés dans leur forme originale sur uifaces.com, ce qui est une excellente ressource pour ceux qui souhaitent utiliser de vrais visages dans un dessin. Téléchargez les six avatars utilisateur souhaités, puis insérez-les dans un répertoire appelé visages à l'intérieur de images annuaire.
Le dernier fichier à ajouter est normalize.css. C'est l'une des meilleures réinitialisations CSS disponibles de nos jours et nous donnera un bon niveau de bases dans tous les navigateurs. Téléchargez la dernière et ajoutez-la à la css annuaire.
Ensuite, nous allons ouvrir index.html et ajoutez le balisage HTML de base dont nous avons besoin. Ce qui suit devrait nous permettre de bien commencer.
La chose importante ici est la balise méta Viewport, qui indique aux navigateurs mobiles d’utiliser la bonne échelle initiale de 1,0, ce qui correspond à 100%. Conseil rapide: n'oubliez pas la balise méta Viewport pour les balises méta de la fenêtre Viewport..
Une des meilleures choses à propos de Sass est, à mon avis, les variables. Nous allons utiliser un certain nombre de variables dans notre feuille de style Sass pour stocker des informations telles que la famille de polices, la taille de la police et les couleurs. Vérifiez les éléments suivants pour savoir exactement quoi configurer.
$ noir: # 000; $ white: #FFF; $ grey: # e9e9e9; $ gris foncé: # 727272; $ red: # cf2f32; $ green: # 42a747; $ padding: 10px; $ marge: 10px; $ largeur principale: 1000px; $ taille de police: 14px; $ font-family: 'Open Sans', sans-serif; $ title-font: 'Josefin Slab', serif;
La section supérieure répertorie les couleurs utilisées dans la conception. Celles-ci peuvent facilement être choisies dans Photoshop. J'inclus toujours un $ blanc et $ noir variable afin de créer et de contrôler facilement les nuances de gris si nécessaire. Nous avons également des valeurs de remplissage et de marge standard, la largeur de la zone de contenu principale et des informations sur les polices. Vous remarquerez peut-être ici que nous utilisons "Josefin Slab" et non "Klinic Slab". Josefin Slab est une police alternative à Klinic et est disponible sur le Web via Google Fonts. Cela signifie que nous pouvons l'inclure ici facilement avec un simple @importation déclaration. La même chose vaut pour l'autre police utilisée, "Open Sans".
Les quatre lignes suivantes traitent des différents points de rupture réactifs que j'ai choisis. Nous allons adopter un premier mobile approche ici, donc nos points de rupture reflètent cela. Les valeurs de pixels réellement utilisées étaient plus des essais et des erreurs qu’autre chose, mais j’ai fait le travail difficile pour que vous n’ayez pas à!
$ break-four: 1050px; $ break-three: 760px; $ pause-deux: 520px; $ break-one: 360px;
Enfin, avec les importations de polices de Google, nous avons un autre @importation pour importer le fichier normalize.css que nous avons téléchargé plus tôt.
Accentsconagua
@import url ("http://fonts.googleapis.com/css?family=Open+Sans:300italic400, 400italicals, 700, 400italic, 400 600, 700, 300"); @import url ("http://fonts.googleapis.com/css?family=Josefin+Slab:300,400,600,700"); @import url ('normalize.css'); La prochaine étape consiste à ajouter des styles de réinitialisation de notre propre.
* position: relative; -webkit-box-dimensionnement: border-box; -moz-box-dimensionnement: border-box; -ms-box-sizing: border-box; taille de la boîte: boîte-frontière; body margin: 0; rembourrage: 0; famille de polices: $ famille de polices; taille de police: $ taille de police; débordement-y: faire défiler; débordement-x: caché;
J'aime définir la position de tout pour relatif , pour être sûr, lorsque nous utilisons des éléments en position absolue, nous savons qu’ils sont basés sur leur parent. On peut alors réinitialiser cette valeur par élément si on a besoin de.
Nous devrions également définir le taille de la boîte propriété pour tous les éléments à boîte à bordure. Ceci est particulièrement utile lorsque vous travaillez avec des éléments sensibles, car toute largeur basée sur un pourcentage inclura tout jeu de remplissage. Cela signifie que vous pouvez faire flotter deux éléments côte à côte avec 50% de largeur chacun et ajuster le rembourrage des deux en sachant que la disposition ne sera pas altérée. C'est une propriété CSS très utile!
Ensuite, nous devons juste configurer des valeurs par défaut pour le corps. Il n’ya rien d’excitant ici à part notre première utilisation des variables de Sass, yay! Ok, donc si tout est configuré correctement, enregistrez le style.scss fichier générera la feuille de style réelle que nous devons relier à.
De retour dans notre index.html fichier, nous devrions ajouter le lien vers notre CSS et Modernizr. Il peut également être intéressant de donner un titre à cette application…
2013 était génial | Joyeux Noël et bonne année!
Avec cela fait, nous pouvons sauver notre index.html fichier et le voir dans le navigateur. Ne vous inquiétez pas si vous voyez un écran blanc, c'est exactement ce qu'il devrait être pour le moment. La prochaine étape consiste à étoffer le contenu avec du balisage HTML..
Tout d’abord, codons l’en-tête. Pour cela, nous allons utiliser l'élément HTML5 entête. À l'intérieur de index.html trouvez le entête et ajoutez notre image de fond d'en-tête…
Nous ajoutons l'image d'arrière-plan en tant que img élément ici, afin que nous puissions facilement le redimensionner lorsque le navigateur redimensionne. Ceci est possible avec les images de fond CSS (en utilisant taille de fond) mais cette méthode n’a jamais fonctionné de manière fiable sur plusieurs navigateurs et peut être lente en raison du fait que le navigateur doit tout repeindre à tout moment. Donnez à l’image un nom de classe afin que nous puissions la référencer dans notre fichier Sass.
Ensuite, nous allons écrire la section interne de l'en-tête. Cela tiendra les arbres de Noël, le texte et le bouton de connexion Twitter.
Connectez-vous avec Twitter
2013 était génial. Il est temps de dire 'Je vous remercie'
et souhaite à vos amis un
joyeux Noël!
Il se passe pas mal de choses ici. On a…
header-inner Titre élémentsHou la la! Répertorié comme ça donne l’impression d’être beaucoup dans une petite zone. Cependant, c'est notre codage d'en-tête complet! Si vous enregistrez le fichier et le visualisez dans un navigateur, il se présentera comme suit.
Agréable! Cela ne ressemble pas beaucoup, cependant, notre tâche suivante consiste à établir des règles Sass et à donner à l'en-tête l'aspect exact du design. Basculer vers la feuille de style pour commencer.
Le premier groupe de styles à ajouter ressemble à ceci…
en-tête largeur: 100%; hauteur: 390px; couleur: $ blanc; fond: $ gris; Écran @media et (min-width: $ break-four) height: 799px; en-tête .header-image position: absolute; en haut: 0px; gauche: 0px; largeur: 100%; hauteur: auto; hauteur maximale: 799px; hauteur min .: 400px; .header-inner width: 90%; marge: 0 auto; Écran @média et (largeur-min: $ break-four) largeur: 60%; .titles padding-top: 40px;
Ici, nous avons quelques styles par défaut pour notre entête. Nous devons également utiliser notre premier bit de Sass réactif ici, car nous devons nous assurer que la hauteur augmente à mesure que le navigateur s'élargit. Je pense que Sass brille vraiment ici car il nous donne la possibilité d’utiliser des requêtes médiatiques directement imbriquées sous l’élément sur lequel elles sont censées agir. Cela accélère considérablement le temps nécessaire pour ajouter des déclarations réactives. Vous remarquerez que nous utilisons également notre quatrième variable de point d'arrêt, qui spécifie une dimension de la taille du bureau et indique au navigateur de modifier la hauteur lorsque la largeur minimale de la fenêtre correspond à la valeur de $ pause-quatre est.
Ici, nous devons faire l'image d'en-tête absolument positionné en haut à gauche. Nous devons ensuite nous assurer que cette image s'agrandit et diminue avec le navigateur. Par conséquent, définir la largeur à 100% couvre tout cela. Les trois propriétés suivantes déterminent comment la hauteur doit être traitée. Une hauteur de auto permet à l’image de conserver son rapport de format lorsque sa largeur change. Nous ne voulons pas qu’elle dépasse au-delà de sa hauteur réelle de sorte que le hauteur maximum la propriété fait en sorte que. De même le hauteur min la propriété empêchera l'image de devenir plus petite que 400px.
Notre header-inner div est responsable de la conservation de tous nos titres et images d’arbres de Noël. Cela signifie qu'il doit être centré à tout moment dans la fenêtre. Notre style de base ici est 90% largeur, ce qui fonctionnera à merveille pour les tablettes et les mobiles. La requête multimédia indique au navigateur d'utiliser une largeur de 60% pour les tailles de bureau..
Alors jetons un coup d'oeil dans le navigateur…
C'est le bureau à gauche et le mobile à droite. Ils se ressemblent tous les deux, mais lorsque vous modifiez la taille du navigateur, en-tête interne change définitivement de largeur. Génial! Continuons. La dernière étape du code ci-dessus consiste simplement à ajouter du rembourrage au .titres div. Cela le fera tomber du haut de la fenêtre légèrement.
Notre prochain défi est le meilleur arbre de Noël. Nous allons utiliser le :avant et :après pseudo-éléments pour créer la forme hexagonale. Vous pouvez en savoir plus sur les pseudo-éléments dans Icônes de construction avec un seul élément HTML.
.header-inner .titles .xmas-tree-top position: absolu; fond: $ blanc; à gauche: 50%; marge gauche: -37,5px; en haut: 30px; rembourrage: $ padding / 2 $ padding * 2; largeur: 75px; Écran @média et (largeur-min: $ break-four) marge-gauche: -58px; en haut: 80px; rembourrage: $ padding $ padding * 3.5; largeur: auto; &: before content: ""; position: absolue; gauche: 0px; bordure: 38px plein transparent; fond de bordure: 20px solide $ blanc; en haut: -58px; écran @media et (largeur-min: $ break-four) bordure: 63px plein transparent; fond de la bordure: 30px solide $ blanc; en haut: -93px; &: after content: ""; bordure: 38px plein transparent; border-top: 20px solide $ blanc; position: absolue; en bas: -58px; gauche: 0px; écran @media et (largeur-min: $ break-four) bordure: 63px plein transparent; border-top: 30px solide $ blanc; en bas: -93px; img display: block; largeur: 100%; largeur maximale: 56px; hauteur: auto;
Cela semble assez compliqué, mais c'est vraiment très simple. Sass utilise un peu ici avec beaucoup de nos variables qui entrent en jeu. le top-tree-noël L'élément lui-même est absolument placé pour être au centre à tout moment. Ceci est réalisé avec…
à gauche: 50%; marge gauche: -37,5px; largeur: 75px;
le marge gauche correspond à la moitié de la largeur de l’élément, de sorte que l’élément est exactement centré. Nous utilisons également à nouveau une requête multimédia simple pour les tailles de bureau qui ajuste la rembourrage et le première position.
Les deux prochaines parties sont les bits intéressants! Le premier est le :avant élément. Ce que nous voulons créer avec cet élément est un triangle placé au sommet de la boîte d’arbre de Noël. Nous allons tirer parti d'une technique décrite dans Astuce: Dessiner et utiliser des triangles CSS. Sur un plan simple, il suffit de créer un élément avec une bordure de la largeur requise. Maintenant, en toute honnêteté, il a fallu un peu d’essais et d’erreurs pour bien faire les choses, et c’est probablement le cas chaque fois que vous utiliserez cette technique, sauf si vous créez un triangle équilatéral. Les valeurs dans le code créent le triangle dont nous avons besoin, qui est légèrement écrasé. le Haut la position est calculée en additionnant les deux valeurs de bordure, car c’est la hauteur réelle de notre pseudo élément.
le :après L'élément suit à peu près le même motif pour créer le triangle inférieur. La seule différence étant bordure supérieure plutôt que bas de la bordure. Nous devons enfin spécifier quelques styles pour l’image de sapin de Noël. Nous devons nous assurer qu'il est 100% de l'élément parent jusqu'à sa largeur réelle. Dans ce cas, c'est 56px. La hauteur sera automatique en fonction de la largeur actuelle.
Phew! C’était beaucoup à prendre. Enregistrez tous les fichiers et affichez les fruits de votre travail dans le navigateur…
Excellent. La boîte de sapin de Noël a l’air incroyable et elle s’agrandit avec le navigateur. Maintenant, prenons soin de ces titres…
.titre, .title-small, h1 text-align: center; taille de police: 36px; marge: 0; famille de polices: $ title-font; poids de la police: 300; espacement des lettres: -0,03em; .title margin-top: 60px; taille de police: 200%; span display: block; Écran @média et (largeur-min: $ break-four) margin-top: 200px; taille de police: 300%; .titles .title-small margin: $ margin * 2 auto 0; largeur: 100%; taille de police: 155%; &: before, &: after contenu: url (… /images/xmas-tree-white.png); position: absolue; en haut: 2px; &: before left: 0px; &: after right: 0px; Écran @média et (largeur-min: $ break-one) taille de la police: 200%; largeur: 12em; .titles h1 text-transform: uppercase; taille de police: 222%; bord inférieur: blanc solide 2px; largeur: 9em; marge: auto 20px; span display: block; marge inférieure: 3px; bord inférieur: blanc solide 2px; Écran @média et (largeur-min: $ pause-deux) taille-de-police: 300%;
Il n'y a pas trop de choses ici. La requête des médias pour .Titre s'assure que la taille de la police est plus grande et que l'espacement à partir du haut est plus grand lorsque la taille des fenêtres du bureau est élevée. Nous utilisons :avant et :après pseudo éléments à nouveau pour afficher les deux arbres de Noël blancs sur le titre plus petit.
Une autre chose à noter est l'utilisation de largeur: 12em dans notre requête média pour .titre-petit et aussi pour le h1. Cela signifie que la largeur est basée sur la taille de police de cet élément au lieu de la largeur de l'élément parent, comme le sont les valeurs basées sur le pourcentage. Pour plus d’informations à ce sujet, veuillez consulter Taking the "Erm…" Out of Ems.
Sauvegardons notre fichier Sass à nouveau et vérifions ce que nous avons dans le navigateur…
Cela commence à être beaucoup mieux! Les titres s’échelonnent bien et changent de position au besoin. Il nous reste deux éléments à styliser avant que notre en-tête ne soit complet. En avant et en haut!
.header-inner .connect display: block; largeur: 195px; hauteur: 50px; hauteur de ligne: 45px; text-align: center; border-radius: 30px; bordure: solide 2px # c52f30; couleur: $ rouge; marge: 30px auto 0; texte-décoration: aucun; -webkit-transition: facilité de l'arrière-plan 0.4s, facilité de la couleur 0.4s; -moz-transition: facilité de l'arrière-plan 0.4s, facilité de la couleur 0.4s; -o-transition: facilité de l'arrière-plan 0.4s, facilité de la couleur 0.4s; -ms-transition: facilité de l'arrière-plan 0.4s, facilité de la couleur 0.4s; transition: fond 0.4s facilité, couleur 0.4s facilité; &: hover background: $ red; couleur: $ blanc; -webkit-transition: facilité de l'arrière-plan 0.4s, facilité de la couleur 0.4s; -moz-transition: facilité de l'arrière-plan 0.4s, facilité de la couleur 0.4s; -o-transition: facilité de l'arrière-plan 0.4s, facilité de la couleur 0.4s; -ms-transition: facilité de l'arrière-plan 0.4s, facilité de la couleur 0.4s; transition: fond 0.4s facilité, couleur 0.4s facilité; .xmas-tree-bottom display: none; marge: 30px auto 0; Écran @média et (largeur-min: $ break-four) display: block;
La première chose que vous remarquerez ici est l’utilisation des transitions CSS3. Cela nous donnera un fondu agréable lorsque nous survolerons le bouton de connexion Twitter. Vous devez spécifier la transition entre l'état normal et l'état de survol pour que le fondu apparaisse et disparaisse. Les autres styles de bouton sont assez simples et nous n’avons besoin d’aucune requête multimédia, car il est suffisamment petit pour rester identique dans toutes les tailles de navigateur..
Le dernier, mais non le moindre, est le dernier arbre de Noël. Très simplement, centrez-le sur l'écran et affichez-le uniquement aux formats basés sur le bureau. C’est juste un choix que j’ai fait pour garder l’arbre aux tailles mobiles ou le cacher. Après avoir joué avec différentes positions, j'ai décidé qu'il n'y avait rien à ajouter à l'expérience utilisateur sur un petit écran. Il est donc préférable de la masquer..
Cela termine notre tête! Sauvegardez tous les fichiers et regardons où nous en sommes maintenant…
Ah oui, c'est beaucoup plus comme ça! C'est un sentiment formidable de constater que le travail acharné porte ses fruits, n'est-ce pas? Notre en-tête est superbe et tout fonctionne comme il se doit. La section suivante commence à travailler sur le contenu principal.
Ok, notre première étape dans la construction du contenu principal est le HTML pour les zones de tweet. C'est un peu comme ça:
22h13 - 28 novembre 2013
Jonny Livingston
@jonnylvng
Joyeux Action de Graces! Je suis tellement reconnaissant pour vous tous. Merci pour l'amour et le soutien que vous me donnez.
Ce code devrait aller à l'intérieur div.content et, comme vous pouvez le constater, il est composé de quelques sections. Nous avons le .date-heure paragraphe en dehors de la .message div. Cet élément contient l'image et le contenu du message lui-même. le .contenu du message div contient les trois parties d'informations dans différents éléments HTML, ce qui signifie que nous n'aurons pas besoin de classes pour les styler individuellement. Si vous enregistrez le fichier et regardez dans le navigateur, vous verrez:
Nous avons certainement besoin de quelques styles ici pour que cela ressemble à ce qu’il devrait être. Jetons un coup d'oeil à ceux maintenant.
.main background: $ grey; .content width: 100%; marge: 0 auto; écran @media et (min-width: $ break-four) width: $ main-width; .message-box width: 100%; rembourrage: $ padding * 3 $ padding * 1.5; Écran @média et (largeur-min: $ break-four) float: left; largeur: 50%;
Pour commencer, nous avons besoin de styles de base pour notre principale section et notre contenu div. Faites simplement le fond de principale la couleur grise de notre variable et définir la largeur de contenu à 100%. Vous verrez le marge style utilisé ici pour centrer l'élément qui n'entrera en jeu que lorsque la largeur n'est pas de 100%, mais j'aime l'inclure ici pour que nos points de rupture réactifs l'héritent.
le messagerie elle-même est également très simple pour les dispositions de tablette et de mobile avec seulement 100% de largeur et un peu de rembourrage. Nos requêtes médiatiques s’engageront dans les tailles de bureau, définissant ainsi la contenu au $ largeur principale variable et la messagerie flotter à gauche et couvrir 50% de la contenu div, plutôt que 100%. Cela fera que les boîtes s’assoient côte à côte comme dans le dessin. Si nous économisons et jetons un coup d'œil, nous devrions voir:
Cela prend définitivement forme et change aux bonnes tailles de fenêtre, donc c'est bien!
Un style d'utilitaire important à ajouter à la fin du fichier Sass est le suivant:
// Utilitaires .group: after content: ""; affichage: table; clarifier les deux;
Cela garantit que tous les éléments portant ce nom de classe contiendront leurs éléments enfants s'ils sont flottants. Vous trouverez plus d'informations sur les raisons pour lesquelles cela fonctionne sur le blog de Nicolas Gallagher..
.date-time font-weight: 400; couleur: plus foncé ($ gris, 30%);
Une déclaration très rapide ici pour le date-heure élément. Il devrait être niché dans notre messagerie modes. Je pense que c’est la première utilisation d’une fonction de couleur Sass qui, dans l’ensemble, est très utile. Celui-là assombrit la $ gris couleur de 30%. C'est génial quand vous avez déjà une couleur et que vous voulez juste en utiliser rapidement une autre couleur.
Passons maintenant à la boîte de message.
.message padding: $ padding * 2; hauteur: auto; border-radius: 3px; fond: $ blanc; text-align: center; Écran @media et (min-width: $ break-two) text-align: left; Écran @média et (largeur-min: $ break-four) hauteur: 175px; &: before content: ""; position: absolue; à gauche: 20px; en haut: -20px; bordure: 10px plein transparent; fond de bordure: 10px solide $ blanc; .message-image border-radius: 50%; largeur: auto; largeur maximale: 99px; hauteur: auto; float: aucun; Écran @media et (min-width: $ break-two) float: left;
Ok, il y a pas mal de code ici. Sur les mobiles et les tablettes, il est agréable d’avoir un contenu comme celui-ci centré car il n’ya pas beaucoup de place. Nos styles de base pour message couvrir que par le réglage aligner le texte propriété au centre. Assurez-vous également de donner à cette case un fond blanc et un petit rayon de la frontière pour correspondre à la conception. Nous avons défini deux points de rupture pour cet élément afin de pouvoir être certains que tout ce qui se trouve au-dessus de mobile réinitialisera le aligner le texte sur justifié à gauche et, plus loin dans l'échelle de la taille de la fenêtre, définissez la hauteur de la boîte de sorte que, lorsqu'elles flottent les unes à côté des autres, tout s'aligne bien.
Oh regarde! Un autre :avant pseudo élément. C’est à peu près la même chose que le sapin de Noël supérieur en ce que nous créons un triangle pour s’asseoir au-dessus de la boîte et juste en dessous de la date-heure élément.
Il est maintenant temps de styliser l'image. Pour cette conception, il n'est probablement pas nécessaire de redimensionner l'image, mais chaque fois que je travaille avec une mise en page réactive, j'aime toujours faire en sorte que les images se comportent de cette manière, en particulier lorsqu'elles sont contenues dans un élément qui change tailles. Donc, pour couvrir la plupart des scénarios, nous définissons simplement la largeur et la taille à auto et assurez-vous qu'il y a un largeur maximale propriété permettant d'arrêter la mise à l'échelle de l'image au-delà de la taille de son parent.
Sur toute taille de fenêtre supérieure au mobile, nous devons flotte l'image la gauche s'asseoir à côté du contenu du message. Il est temps de sauvegarder notre travail et de revenir au navigateur:
Eh bien ça a l'air beaucoup mieux! Juste le contenu du message à faire.
Nous allons continuer à construire cette application festive dans la deuxième partie, qui arrive très bientôt. Merci d’avoir lu jusqu’à présent, j’espère que mes explications auront un sens et que vous avez bien suivi. J'ai hâte de vous guider vers le site terminé la prochaine fois!
