Share
Ce que vous allez créerDans le précédent tutoriel, nous avons expliqué comment préparer une conception dans Photoshop, prête à être convertie en code pur CSS3 et Base64. Dans ce tutoriel, nous allons gérer la génération du code, à l'aide des plugins Photoshop CSSHat et PNGHat créés par Source, ainsi que de FontAwesome et du préprocesseur CSS LESS.
Let's plonger directement dans!
Pour commencer, vous devez créer un nouveau dossier sur votre ordinateur pour héberger votre site Web statique. Dans ce cas je nomme mon dossier codedup.
Dans ce dossier, créez un nouveau fichier nommé index.html et ajoutez-y le code suivant:
Photoshop en code pur avec CSSHat et PNGHat
Ici, nous configurons le shell HTML de base du site et relions dans Roboto, la police Google utilisée dans notre fichier PSD, ainsi que notre future feuille de style CSS..
Ensuite, créez deux sous-dossiers dans votre codedup dossier, un nommé css et l'autre nommé MOINS. À l'intérieur de MOINS dossier créer un fichier nommé style.less. Tous les styles de votre site seront écrits dans ce fichier, puis compilés dans css> style.css.
Au fur et à mesure que votre style.less Le fichier doit avoir son code organisé dans cet ordre:
Je recommande d’ajouter un commentaire en haut de chaque section de votre style.less fichier pour vous aider à garder une trace de l'endroit où différents types de code doivent être placés.
Si vous préférez, vous pouvez créer des fichiers séparés (partiels) pour héberger chacun de ces types de code, en les important chacun dans votre fichier LESS principal. Cependant, pour que les choses restent simples, nous n'utiliserons que le fichier.
Prepros est une application qui prend en charge toutes sortes de tâches frontales pour les concepteurs et les développeurs Web. Il compilera notre MOINS, actualisera automatiquement le navigateur chaque fois que des modifications seront apportées à nos fichiers, et synchronisera même plusieurs appareils si nous le souhaitons. Téléchargez et installez Prepros, gratuitement sur: http://alphapixels.com/prepros/
Exécutez l'application, puis faites glisser le codedup dossier sur l'interface principale pour l'ajouter en tant que nouveau projet.
Prepros détectera automatiquement le style.less fichier dans votre dossier de projet et par défaut aura "Auto Compile" activé. Chaque fois que vous enregistrez une modification dans style.less Prepros va le détecter puis le compiler en css> style.css.
Vous pouvez aussi cliquer style.less dans l'interface pour voir les paramètres supplémentaires disponibles, tels que l'option de compression du CSS lors de la compilation.
Maintenant, allez-y et récupérez les fichiers de LESSHat, une bibliothèque de mixages parfaitement liée à CSSHat, ainsi que Normalize.less, une version de "Normalize.css" écrite en syntaxe conviviale LESS.
Après avoir téléchargé les deux fichiers et les avoir placés dans votre projet, revenez dans Prepros et vous verrez qu'il les a automatiquement détectés. Nous allons importer ces deux dans notre principale style.less et nous ne voulons pas qu'ils compilent dans des fichiers CSS individuels, alors cliquez sur chacun d'eux et décochez "Compiler automatiquement".
Maintenant, ouvrez votre style.less fichier dans votre éditeur de code préféré et ajoutez ces deux lignes en haut:
@import "lesshat.less"; @import "normalize.less";
Enregistrez votre fichier et Prepros le compilera automatiquement pour vous, après quoi vous devriez voir apparaître la fenêtre contextuelle suivante dans le coin inférieur droit de votre écran:
Vous devriez maintenant voir aussi le fichier style.css dans votre projet css dossier.
Nous allons maintenant incorporer FontAwesome au projet en ajoutant les fichiers de polices eux-mêmes, ainsi que "FontAwesome.less", une bibliothèque LESS prédéfinie qui simplifie incroyablement le placement des icônes FontAwesome dans vos conceptions. Tout ce que nous avons à faire est d'importer le fichier, puis les classes FontAwesome deviennent instantanément accessibles..
Vous verrez comment cela fonctionne concrètement plus tard dans le didacticiel en ajoutant notre élément "grosse flèche vers le bas"..
Commencez par créer un sous-dossier nommé font-génial à l'intérieur de votre MOINS dossier. Il y a pas mal de fichiers dans la bibliothèque de FontAwesome, donc nous les garderons ici pour rester organisés
Téléchargez FontAwesome sous forme de zip à partir de: https://github.com/FortAwesome/Font-Awesome
Extrayez le dossier et copiez tous les fichiers de son répertoire. Moins dossier, puis collez-les dans le font-awesome dossier que vous venez de créer dans votre projet. Puis copier l'intégralité les polices dossier de votre téléchargement décompressé de FontAwesome et collez-le en tant que sous-dossier dans votre projet.
La structure de votre fichier de projet complet et de votre dossier devrait maintenant ressembler à ceci:
Prepros détectera à nouveau les nouveaux fichiers LESS, alors décochez la case "Compilation automatique" pour tous les fichiers qui apparaissent maintenant dans l'interface..
Ajoutez la ligne suivante à votre style.less fichier, sous les lignes que vous avez ajoutées précédemment:
@import "font-awesome / font-awesome.less";
Votre projet contient maintenant tous les fichiers et polices LESS importés et les fichiers de polices dont vous avez besoin, et la compilation automatique est activée. Nous sommes donc prêts à traduire votre fichier PSD en code..
Dans le didacticiel précédent, nous avons choisi le motif "Satin Weave" pour notre fond en raison de sa petite taille et de son faible nombre de couleurs. Nous allons maintenant utiliser le plugin PNGHat pour le convertir en une chaîne de code Base64.
Ouvrez le PSD dans Photoshop. Nous savons que les dimensions du motif sont 24px large par 12px haut, alors n'hésitez plus et utilisez votre chapiteau pour créer une sélection de cette taille n'importe où dans votre design.
Maintenant, en vous assurant que le calque d'arrière-plan auquel le motif est appliqué est sélectionné, ouvrez votre fenêtre PNGHat. Tout ce que vous avez à faire est de cliquer sur l'option "Base 64" dans la rangée supérieure de la fenêtre, puis de cliquer sur "Exporter les calques sélectionnés"..
Vous verrez apparaître une boîte de dialogue vous demandant de confirmer que vous souhaitez "Recadrer une image par sélection?". Cliquez sur Oui et vous verrez votre sortie de chaîne Base64 dans l'espace inférieur de la fenêtre PNGHat. Clique le Copie bouton.
Retournez à votre style.less Fichier et collez le code que vous venez de copier de PNGHat dans votre section "Variables". Supprimer tout du code collé dans sauf le code URL (données…); puis ajouter @satinweave: au début de la ligne. Vous devriez vous retrouver avec:
@satinweave: url (data: image / jpeg; base64, iVBORw0KGgoAAAANSUhEUgAAABgAAAAMAgMAAAAFXpXmAAAABGdBTUEAALGPC / xhBQAAAAlQTFRF8vLy7 + / + v8fHxxV2ZvQAAADRJREFUCNdVysENADAIQlGWkRj3rodOWeDW0w8 0axlg5wlFW / FGyEdTUpeESKOqXBN8 + cB4yUS37 / ediwAAAAASUVORK5CYII =);
Nous sommes maintenant prêts à placer notre nouveau, facile à utiliser @satinweave variable dans un style de sorte qu'il apparaîtra dans notre conception. Pendant que nous y sommes, nous ajouterons également quelques règles de base pour le site entier. taille de la boîte et paramètres de lien.
Ajoutez le code suivant à la section "Styles" de votre styles.less fichier:
* .box-sizing (border-box); body background-image: @satinweave; débordement-x: caché; a, a: lien, a: visité, a: survol, a: actif text-decoration: none;
Enregistrez votre fichier afin que Prepros compile vos modifications dans votre style.css fichier.
Allez dans Prepros, cliquez sur le bouton Plus d'options bouton et choisissez Copier l'aperçu en direct de l'URL, (qui sera probablement http: // localhost: 8000), puis collez-le dans votre navigateur.
Cela vous donnera un aperçu de votre site statique qui se recharge automatiquement à chaque fois que Prepros compile votre code..
Vous devriez maintenant voir votre motif Base64 en mosaïque sur l’arrière-plan de la page..
Il ne pourrait pas être plus simple d'avoir CSSHat sortie CSS3 pour chaque élément de conception. Il suffit de sélectionner le calque en question avec la fenêtre CSSHat ouverte et il générera automatiquement le code dont vous avez besoin.
Vous pouvez choisir parmi quelques options dans les paramètres de la fenêtre CSSHat. Dans notre cas, nous voulons que notre code soit affiché en tant que LESS et nous voulons que tous les petits boutons au bas de la fenêtre CSSHat (commentaires, dimensions, préfixes, règles) soient désactivés. Votre fenêtre CSSHat devrait ressembler à ceci:
Notez que CSSHat peut générer le code de hauteur et de largeur pour vous dans px valeurs en cliquant sur le quatrième bouton (qui ressemble à un petit carré avec des carrés plus petits sur ses coins). Cependant, je préfère écrire le mien afin de pouvoir utiliser plus facilement rem / em / % valeurs où j'en ai besoin.
Lorsque le code de votre couche sélectionnée a été généré, cliquez simplement sur le bouton Copie bouton en bas de la fenêtre, prêt à être collé dans votre style.less fichier.
Nous allons maintenant procéder pour ajouter le reste de vos éléments de conception via CSS.
Parce que CSSHat rend les choses si faciles, nous pouvons utiliser un processus standard de stock qui est simplement répété jusqu'à ce que votre conception soit entièrement codée..
Pour chaque élément, commençons par ajouter le code HTML correspondant au index.html fichier.
Après cela, chaque nouvel élément impliquera l'ajout d'un ou plusieurs mixins LESS, que nous utiliserons pour contenir le CSS3 généré par CSSHat. Il est utile de séparer le code généré par CSSHat du reste de votre code de style afin de pouvoir le mettre à jour facilement si vous modifiez votre conception. Vous devez ajouter de nouveaux mixins à la section "Mixins" de votre style.less fichier, comme décrit ci-dessus.
Enfin, vous allez ajouter les styles CSS réels qui seront générés dans votre feuille de style. Ces styles incorporeront vos mixins ainsi que du code supplémentaire que je fournirai pour contrôler la mise en page, les dimensions et les aspects que Photoshop ne peut pas gérer, tels que l'épaisseur de police numérique et les bordures "un côté à la fois". Vos styles doivent être ajoutés à la section "Styles" de votre style.less fichier.
Nous allons créer chaque élément de conception dans le même ordre que dans la partie précédente de ce didacticiel afin de faciliter le renvoi en cas de besoin..
Ajoutez ce qui suit entre vos balises d'ouverture et de fermeture.
Sélectionnez le calque "top trim" de votre PSD et copiez le code généré par CSSHat:
opacité: 0,5; couleur de fond: #ddd; .box-shadow (~ "0 2px 1px #fff, encadré 0 -2px 4px # c8c8c8");
Dans ton style.less fichier créer un nouveau mixin nommé TopTrim et collez dans votre code CSSHat comme suit:
.TopTrim () opacité: .5; couleur de fond: #ddd; .box-shadow (~ "0 2px 1px #fff, encadré 0 -2px 4px # c8c8c8");
Nous allons maintenant incorporer votre nouveau mixin dans la section "Styles" de votre style.less fichier. Ajoutez le nouveau code de style suivant:
// Top trim .toptrim height: 8px; marge inférieure: 62 px; .TopTrim ();
Dans le code ci-dessus, nous extrayons nos styles générés par CSSHat via le mixin TopTrim, ainsi que la définition des dimensions de présentation dont nous avons besoin.
Vous devriez maintenant voir votre "top trim" en haut de votre site.
Ajoutez ce qui suit sous le dernier HTML que vous avez ajouté:
Sélectionnez le calque "menuwrap" de votre PSD, copiez le code généré par CSSHat et collez-le dans un nouveau mixin nommé MenuWrapBG:
.MenuWrapBG () .border-radius (12px); couleur de fond: # f9f9f9; .box-shadow (~ "0 1px 2px #fff, encadré 0 1px 10px rgba (0,0,0, 0,15)"); .background-image (~ "linear-gradient (en bas, #fff 0%, # f3f3f3 100%)");
Ajoutez le nouveau code de style suivant:
// Menu .menuwrap min-height: 61px; largeur maximale: 1200px; largeur: 100%; marge: 0 auto; rembourrage: 5px; .MenuWrapBG;
Vous devriez maintenant voir:
Mettez à jour votre code de menu existant comme suit:
Sélectionnez vos PSD menubg superposer et copier le code généré par CSSHat dans un nouveau mixin nommé MainMenuBG:
.MainMenuBG () border: 1px solid # e4e4e4; .border-radius (11px); couleur d'arrière-plan: #fff; .box-shadow (~ "0 3px 4px rgba (193, 193, 193, 0,75)"); .background-image (~ "linear-gradient (en bas, # e5e5e5 0%, #fff 100%)");
Ajoutez le nouveau code de style suivant:
ul.mainmenu padding: 0 15px; marge: 0; type de style de liste: aucun; hauteur minimale: 50 px; .MainMenuBG ();
Vous devriez maintenant voir:
Mettez à jour votre code de menu existant comme suit:
Dans votre PSD, sélectionnez l’un de vos rectangles d’élément de menu et copiez le code généré par CSSHat dans un nouveau mixin nommé MenuItemBG:
.MenuItemBG () .background-image (~ "gradient-linéaire (en bas, #eee 0%, # e4e4e4 25,49%, #fbfbfb 100%)");
Dans votre PSD, sélectionnez le texte d’un de vos éléments de menu et copiez le code généré par CSSHat dans un nouveau mixin nommé MenuItemText:
.MenuItemText () color: # 5b5b5b; famille de polices: "Roboto"; taille de police: 18px; text-shadow: 0 1px 0 #fff;
Mettre à jour l'existant ul.mainmenu style comme suit.
ul.mainmenu padding: 0 15px; marge: 0; type de style de liste: aucun; hauteur minimale: 50 px; .MainMenuBG (); li display: block; float: gauche; rembourrage: 0; border-top: 1px solide rgba (0,0,0,0); border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd; border-left: 1px solid rgba (0,0,0,0); &: premier-de-type border-left: 1px solid #dddddd; .MenuItemBG (); a, a: lien, a: visité display: block; hauteur: 47px; hauteur de ligne: 47px; rembourrage: 0 30px; // poids de la police ajouté font-weight: 400; .MenuItemText ();
Nous utilisons moins d'imbrication de règles afin que tous li enfants de ul.mainmenu sera affecté.
Vous vous souviendrez également que dans le didacticiel précédent, nous devions utiliser manuellement l'outil de ligne pour faciliter la sélection des couleurs des bordures de nos éléments de menu, compte tenu de l'incapacité de Photoshop de définir chaque côté de la bordure individuellement. Dans ce qui précède, vous verrez que nous incorporons ces styles de bordure à l'aide du code de couleur. #dddddd nous avons sélectionné pendant cette étape.
Nous avons également ajouté des bordures transparentes en haut et à gauche des éléments de menu. La raison en est que notre élément / effet de survol actuel utilise des bordures sur les quatre côtés. Nous devons donc veiller à ce que la largeur corresponde aux éléments de menu par défaut et aux états de survol..
Et enfin, nous avons ajouté manuellement le bon poids de la police de 400 au texte de l'élément de menu, car Photoshop ne peut fonctionner qu'avec des valeurs telles que "normal" ou "gras".
Vous devriez maintenant voir:
Dans ce cas, nous n'avons pas besoin de HTML supplémentaire car nous avons déjà ajouté un élément de menu auquel la classe "current" lui a été appliquée à la dernière étape..
Dans votre PSD, sélectionnez le rectangle de votre élément de menu "actuel" et copiez le code généré par CSSHat dans un nouveau mixin nommé CurrentMenuItemBG:
.CurrentMenuItemBG () border: 1px solid # e62d4e; couleur de fond: # ef3d5d; .box-shadow (~ "0 1px 0 # cc2241, encadré 0 2px 5px rgba (250,171,185, .6)"); .background-image (~ "linear-gradient (en bas, # ef3d5d 0%, # dc2344 25,49%, # fc6b85 100%)");
Maintenant, sélectionnez le texte de votre élément de menu "actuel" et copiez le code généré par CSSHat dans un nouveau mixin nommé CurrentMenuItemText:
.CurrentMenuItemText () color: #fff; famille de polices: "Roboto"; taille de police: 18px; ombre du texte: 0 -1px 0 # b50020;
Mettre à jour l'existant ul.mainmenu style comme suit.
ul.mainmenu padding: 0 15px; marge: 0; type de style de liste: aucun; hauteur minimale: 50 px; .MainMenuBG (); li display: block; float: gauche; rembourrage: 0; border-top: 1px solide rgba (0,0,0,0); bordure inférieure: rgba solide 1px (0,0,0,0,05); bordure droite: 1px solid rgba (0,0,0,0,05); border-left: 1px solid rgba (0,0,0,0); &: premier de type border-left: 1px solid rgba (0,0,0,0,05); .MenuItemBG (); a, a: lien, a: visité display: block; hauteur: 47px; hauteur de ligne: 47px; rembourrage: 0 30px; // poids de la police ajouté font-weight: 400; .MenuItemText (); &: hover .CurrentMenuItemBG (); a, a: lien, a: visité .CurrentMenuItemText () li.current .CurrentMenuItemBG (); a, a: lien, a: visité .CurrentMenuItemText ()
Et pour permettre aux éléments de menu d'être poussés sur plusieurs lignes s'il y en a deux de la largeur disponible, ajoutez le code de correction suivant sous la classe de menu existante..
ul.mainmenu: before, ul.mainmenu: after content: ""; affichage: table; ul.mainmenu: after clear: both;
Vous devriez maintenant voir le style "actuel" appliqué à la fois à l'élément de menu actuel et à l'effet de survol:
Ajoutez le code suivant sous votre menu HTML:
Saviez-vous que vous pouvez
Avoir votre Photoshop
ET TON
Code pur aussi?
Dans votre PSD, sélectionnez la première ou la troisième ligne de texte principale (texte fin et gris) et copiez le code généré par CSSHat dans un nouveau mixin nommé ThinText:
.ThinText () color: # 6b6b6b; famille de polices: "Roboto"; taille de police: 48px;
Dans votre PSD, sélectionnez la deuxième ou la quatrième ligne de texte principale (texte épais) et copiez le code généré par CSSHat dans un nouveau mixin nommé ThickText:
.ThickText () color: # ef3d5d; famille de polices: "Roboto"; taille de la police: 80px; poids de police: gras;
Ajoutez le nouveau code de style suivant:
// Lignes de texte principales .maintext padding: 70px 0; text-align: center; .thintext margin: 0.425em 0; // poids de la police ajouté font-weight: 100; .ThinText (); .thicktext margin: 0.425em 0; .ThickText ();
Vous devriez maintenant voir ceci en dessous de votre menu:
Ajoutez le code suivant:
Dans votre PSD, sélectionnez le rectangle d’arrière-plan de votre panneau d’information et copiez le code généré par CSSHat dans un nouveau mixin nommé PanelBG:
// Panel mixins .PanelBG () border: 1px solid # d7d7d7; .border-radius (15px); couleur d'arrière-plan: #fff; .box-shadow (~ "0 3px 4px rgba (193, 193, 193, 0,27)");
Ajoutez le nouveau code de style suivant:
.panneau largeur maximale: 1200px; largeur: 100%; marge: 0 auto; rembourrage en bas: 50px; text-align: center; .PanelBG ();
Vous devriez maintenant voir l’arrière-plan de votre panneau d’information, toujours vide:
Mettez à jour le code HTML de votre panneau d'informations avec les éléments suivants:
Dans ce tutoriel:
Dans votre PSD, sélectionnez la couche d’arrière-plan de l’en-tête de votre panneau et copiez le code généré par CSSHat dans un nouveau mixin nommé PanelHeadBG:
.PanelHeadBG () .border-radius (10px); couleur de fond: # ef3d5d; .box-shadow (~ "0 3px 0 # cc2241, encadré 0 0 5px rgba (222,42,74, .6)"); .background-image (~ "linear-gradient (en bas, # ee2c4f 0%, # dc2344 10,5%, # fc6b85 100%)");
Nous allons maintenant ajouter une deuxième ombre au mixin PanelHeadBG que nous avons déjà créé. Vous vous souviendrez de la première partie de ce didacticiel que nous devions créer des ombres supplémentaires sur les seconds calques, car Photoshop ne pouvait pas gérer plusieurs ombres portées sur un calque..
Dans votre PSD, sélectionnez le deuxième calque d’ombre de votre en-tête de panneau et copiez-le. seulement le code entre les parenthèses sur le boîte ombre ligne, qui devrait être:
0 5px 3px rgba (0,0,0, .27)
dans le PanelHeadBG mixin que vous venez de créer, ajoutez une virgule avant la parenthèse fermante de l’actuel boîte ombre ligne, puis collez le code que vous venez de prendre à CSSHat pour vous donner:
.encadré-ombre (~ "0 3px 0 # cc2241, encadré 0 0 5px rgba (222,42,74, .6), 0 5px 3px rgba (0,0,0, .27)");
Dans votre PSD, sélectionnez le texte de l’en-tête de votre panneau et copiez le code généré par CSSHat dans un nouveau mixin nommé PanelHeadText:
.PanelHeadText () color: #fff; famille de polices: "Roboto"; taille de police: 24px; ombre du texte: 0 -1px 0 # b50020;
Ajoutez le nouveau code de style suivant:
.tête de panneau marge: 60px -15px; rembourrage: 20px; .PanelHeadBG (); // poids de la police ajouté font-weight: 400; .PanelHeadText ();
Notez que nous avons ajouté un poids de la police de 400 manuellement, Photoshop ne peut pas traiter les valeurs numériques du poids des polices.
Vous devriez maintenant voir:
Mettez à jour le code HTML de votre panneau existant, cette fois comme suit:
Dans ce tutoriel:Apprenez à concevoir dans Photoshop et à imprimer
normes prêtes pur code CSS3 + Base64.Cela signifie pas d'images et HTTP minimal
demandes de chargement ultra efficace.CSSHat + PNGHat + MOINS + FontAwesome
Dans votre PSD, sélectionnez le calque de texte plus léger du panneau d’informations et copiez le code généré par CSSHat dans un nouveau mixin nommé PanelText:
.PanelText () color: # 6b6b6b; famille de polices: "Roboto"; taille de police: 36px;
Maintenant, sélectionnez le calque contenant le texte du panneau d’information plus épais et copiez le code généré par CSSHat dans un nouveau mixin nommé UtiliserTheseText:
.UsingTheseText () color: # 6b6b6b; famille de polices: "Roboto"; taille de police: 48px;
Mettre à jour l'existant .panneau style à:
.panneau largeur maximale: 1200px; largeur: 100%; marge: 0 auto; rembourrage en bas: 50px; text-align: center; .PanelBG (); .PanelText (); poids de la police: 100; p marge: 1.2em 0;
Cela ajoute le mélange PanelText ainsi qu'un poids de police numérique et un contrôle de marge pour les paragraphes du panneau d'information..
Ajoutez également le nouveau code de style suivant, sous le .panneau classe:
.en utilisant ceci // poids de police ajouté font-weight: 900; .UtiliserTheseText (); .highlight color: # EF3D5C;
Cela applique le style de police plus gros et plus épais à la dernière ligne du texte, ainsi que l'ajout de rehauts colorés.
Vous devriez maintenant voir:
Ajoutez le code suivant sous votre panneau d’information:
Comme nous avons précédemment intégré FontAwesome.less à notre projet, ce code HTML place automatiquement notre flèche vers le bas simplement via l'application des classes. FA et fa-arrow-down à un je élément (icône).
Au début, il apparaîtra dans son état par défaut petit et noir. Il suffit donc de le styler comme tout autre élément de texte..
Dans votre PSD, sélectionnez votre couche de grande flèche vers le bas et copiez le code généré par CSSHat dans un nouveau mixin nommé Flèche vers le bas:
.DownArrow () opacité: .3; couleur: # 6b6b6b; font-family: "FontAwesome"; taille de police: 200px;
Ajoutez le nouveau code de style suivant:
.downarrow margin: 80px auto; text-align: center; i .DownArrow ();
Vous devriez maintenant voir ceci en dessous de votre panneau d'information:
Ajoutez le code suivant sous la grosse flèche html:
Comme avec notre flèche vers le bas, notre utilisation des classes FontAwesome FA et fa-caret-right place automatiquement l'icône que nous souhaitons utiliser, dans ce cas une flèche pointant vers la droite.
Dans votre PSD, sélectionnez la couche rectangle de votre bouton de démarrage et copiez le code généré par CSSHat dans un nouveau mixin nommé StartButtonBG:
.StartButtonBG () .border-radius (10px); couleur de fond: # ef3d5d; .box-shadow (~ "0 3px 0 # cc2241, encadré 0 0 5px rgba (222,42,74, .6)"); .background-image (~ "linear-gradient (en bas, # ee2c4f 0%, # dc2344 10,5%, # fc6b85 100%)");
Comme nous l'avons fait avec l'en-tête du panneau, nous allons maintenant ajouter une deuxième ombre au mixin que nous venons de créer..
Dans votre PSD, sélectionnez le deuxième calque d’ombre de votre bouton et copiez-le. seulement le code entre les parenthèses sur le boîte ombre ligne:
0 5px 3px rgba (0,0,0, .27)
dans le StartButtonBG mixin ajoute une virgule avant la parenthèse de fermeture de l'existant boîte ombre ligne, puis collez le code que vous venez de prendre à CSSHat pour vous donner:
.encadré-ombre (~ "0 3px 0 # cc2241, encadré 0 0 5px rgba (222,42,74, .6), 0 5px 3px rgba (0,0,0, .27)");
Sélectionnez le calque de texte de votre bouton de démarrage et copiez le code généré par CSSHat dans un nouveau mixin nommé StartButtonText:
.StartButtonText () color: #fff; famille de polices: "Roboto"; taille de police: 36px; ombre du texte: 0 -1px 0 # b50020;
Ajoutez le nouveau code de style suivant:
.buttonrow text-align: center; marge: auto 20px; .start border: 0; rembourrage: 0.75em 1em; affichage: inline-block; .StartButtonBG (); .StartButtonText ();
La première .boutonnière classe agit simplement pour centrer le bouton, tandis que la seconde .début la classe applique à la fois le fond du bouton et le style du texte.
Vous devriez maintenant voir:
Dans ce cas, nous n'avons pas besoin de HTML supplémentaire car nous travaillons avec le bouton HTML ajouté à la dernière étape..
Dans votre PSD, sélectionnez la couche de petit cercle sur
Accentsconagua