Au cours de ce tutoriel, nous allons construire le fantastique portefeuille de la timeline, comme indiqué dans un précédent tutoriel de Tomas Laurinavicius. Nous allons utiliser des techniques réactives ainsi que des animations CSS3, Sass et un peu de jQuery.
Structure des fichiers et répertoires
OK, la première étape consiste à créer les fichiers et les dossiers dont nous avons besoin. L'image ci-dessous montre notre structure racine.
Comme vous pouvez le constater, notre configuration est très simple. Dans le répertoire "css", continuez et créez un styles.scss fichier et prenez également une copie de normalize.css. Pour utiliser Sass dans ce projet, Sass doit être installé sur votre ordinateur ou vous aurez besoin d'une application pour regarder et compiler. J'utilise actuellement CodeKit pour Mac, mais il existe de nombreuses alternatives telles que Prepos, Scout et Koala, pour n'en nommer que quelques-unes. Ils ne sont pas tous gratuits, mais celui que vous choisirez vous fera gagner beaucoup de temps.!
Dans le dossier "js", créez un fichier appelé app.js et télécharger une copie de modernizr.js à placer ici aussi. La version Modernizr que j'ai utilisée inclut tous les tests CSS3 et HTML5, car nous n'aurions pas besoin de plus que cela. Oui, cela couvre nos fichiers et dossiers initiaux. La prochaine étape consiste à vérifier la conception de notre PSD pour voir quels bits doivent être découpés..
Trancher le PSD
La conception de cette page est simple, ce qui nous permet de décider plus facilement si vous avez besoin de tranches. Tomas a en fait fourni tous ces éléments avec le PSD, de sorte qu'il serait possible de ne pas avoir de tranche du tout de cette conception. Cependant, j'ai décidé pour ce tutoriel que nous devrions découper les trois images de portefeuille et l'icône de chargement en bas de la page. C’est pour plus de facilité que tout autre chose, nous n’avons donc pas besoin de redimensionner dans Photoshop.
Dans Photoshop, saisissez l'outil Tranche et tracez délicatement les tranches. Vous pouvez nommer chaque tranche en double-cliquant dessus. Puis utilisez le Enregistrer pour le Web… (ou un élément de menu similaire selon votre version de Photoshop) pour exporter les tranches dans notre répertoire d'images.
J'ai ensuite créé un nouveau dossier dans "images" appelé "portfolio" qui contiendra les images relatives aux éléments du portefeuille. Déplacez les trois images du portefeuille dans ce dossier et cela termine notre processus de découpage!
Image d'avatar
Allez maintenant sur uifaces.com et choisissez l’une des images à utiliser comme image de profil. J'ai réussi à trouver le même que le design mais peu importe qui vous choisissez. Prenez la version 128x128 et insérez-la dans le dossier "images".
Nous en avons presque fini avec nos images avec uniquement les médias sociaux et les icônes de navigation à trier. Nous ferons ça ensuite.
Sprites
Lorsque vous avez des groupes d'images telles que des icônes, il est conseillé de créer une image contenant toutes les images dans un motif en grille. Ceux-ci s'appellent les Sprites. Vous pouvez prendre cela à l'extrême et créer un grand fichier de chaque image unique sur votre site Web, mais pour ce tutoriel, nous allons créer deux sprites et une version de rétine correspondante pour chaque.
Ainsi, en utilisant les liens d'actifs fournis par Tomas, nous pouvons télécharger chacune des icônes de médias sociaux. Saisissez la version 128x128 pixels de chacun afin de pouvoir réduire la taille dont vous avez besoin. Ensuite, dans Photoshop, nous devons créer un fichier qui est 101px par 51px. Faites glisser chacune des icônes de médias sociaux dans ce fichier et redimensionnez 24px par 24px. Les icônes sont noires, mais nous avons besoin qu’elles soient blanches. Appliquez donc un style de calque à chaque calque qui donne une superposition de couleur blanche. Changez la couleur de votre fond en quelque chose de sombre pour que nous puissions les voir, puis arrangez-les comme suit…
Chaque icône est exactement 1 pixel des bords et les uns des autres. J'ai également changé l'opacité de chaque icône à 80%. Maintenant, dupliquez cette rangée d’icônes et placez-la directement en dessous en vous assurant de la conserver. 1 pixel des bords. Modifiez l'opacité de la deuxième rangée d'icônes sur 100%. Ça devrait ressembler a quelque chose comme ca…
Maintenant, masquez le calque d'arrière-plan dans Photoshop pour créer un arrière-plan transparent. Enregistrer pour le Web comme un PNGtitré social-sprite.png dans le dossier "images". L'étape suivante consiste à créer la version Retina de ce sprite. Vous obtenez ainsi des icônes nettes sur des écrans à haute densité de pixels. Cela devrait être assez simple et implique simplement de doubler la taille de ce que nous avons déjà. Donc, la version de la rétine sera 202px par 102px. Rappelles toi, tout doit être doublé, ce qui inclut l'espacement autour de chaque icône, donc pour ce sprite nous aurons besoin de 2 pixels entre chaque icône et sur les bords. La version finale de la rétine devrait ressembler à ceci…
Génial! Maintenant, il suffit de masquer la couche d’arrière-plan comme avant et d’exporter en tant que PNG mais cette fois l'appelle [email protected]. Ceci est une convention de nommage standard pour la version de la rétine d'un fichier image..
Nous devons maintenant faire de même avec les icônes de navigation. Ces icônes sont des objets vectoriels à l'intérieur du fichier PSD, ce qui signifie que nous pouvons simplement les dupliquer dans un nouveau fichier et les redimensionner si nécessaire. La taille nécessaire pour la version normale est 49px par 18px et la version de la rétine au double de la taille est 98px par 36px. Les images finies devraient ressembler à ceci:
Excellent! Enregistrez-les sous nav-sprite.png et [email protected]. Je pense que cela résume tout ce que nous devons faire pour les images, passons donc à l'écriture de code!
La base HTML et Sass
Commençons par les éléments de base de notre page. Dans notre index.html, copiez le balisage suivant pour commencer:
Mon portfolio
C'est une mise en page simple avec le principale élément d'habillage contenant une barre latérale de côté et un contenu div. Dans la barre latérale, nous avons deux sections, mes infoset un nav avec une classe de des menus. Nos dépendances sont également toutes incluses, notamment la dernière version de jQuery 1.x. Commençons maintenant à remplir notre fichier Sass avec certaines variables.
C'est un bon morceau de code pour commencer! En réalité, il s’agit simplement de définir des valeurs par défaut et des variables à utiliser dans notre fichier Sass. La section la plus importante ici est celle qui contient les quatre variables de point de rupture. Ceux-ci définissent les points auxquels notre mise en page doit changer. Sass est très utile ici car nous pouvons simplement référencer ces variables lors de l'écriture de nos requêtes média et si un point de rupture doit changer, il n'y a qu'un seul endroit pour le changer..
Comme vous pouvez le voir par le @importation déclaration, nous importons également la police Google utilisée dans la conception et la copie de Normalize.css nous avons téléchargé plus tôt. La seule déclaration à ce jour est la groupe classe qui est un clearfix pour les éléments contenant des éléments flottants. Consultez nicolasgallagher.com pour plus d'informations à ce sujet..
Si tout est configuré correctement, enregistrez styles.scssva générer le fichier CSS simple que nous avons inclus dans notre page. En regardant la page à présent, vous verrez un écran blanc plutôt ennuyeux. Rendons-le donc plus amusant en ajoutant des styles supplémentaires et en agrandissant la barre latérale..
La barre latérale; Mes infos
Tout d’abord, ajoutons ce qui suit à notre fichier Sass:
// styles principaux * 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; html, body, .wrap hauteur minimale: 100%; corps color: $ grey; taille de police: $ taille de police; famille de polices: $ famille de polices; line-height: $ line-height; fond: $ bleu foncé;
Chaque élément doit maintenant être positionné relatif et aussi avoir le taille de la boîte propriété définie sur boîte à bordure, permettant aux éléments d'avoir des largeurs en pourcentage comprisde leur rembourrage. Cela signifie que nous pouvons définir deux éléments côte à côte de 50% de largeur, puis ajuster le remplissage de chacun autant de fois que nous le souhaitons sans casser la mise en page. Une règle CSS très, très utile! La plupart des navigateurs sont pris en charge via les déclarations préfixées par le fournisseur..
Les styles restants ici agissent par défaut pour notre page. Nous devons nous assurer que les éléments d'habillage principaux restent à 100% de la hauteur en permanence, car notre barre latérale doit remplir l'écran verticalement. Nous définissons le fond du corps à $ bleu foncé ici, qui est en fait notre couleur de barre latérale. C'est ce qui donne à notre barre latérale l'apparence d'une hauteur de 100%. En réalité, l’élément de la barre latérale lui-même n’aura que la hauteur de son contenu, mais aura un fond transparent, montrant ainsi la couleur derrière lui..
Commençons à dessiner la barre latérale…
Chris Johnson
Expérimenté UX / UI Designer basé à Londres, Royaume-Uni
Dribbble Twitter Facebook Google+
Ajouter ce code dans le .mes infos div. Vous devrez peut-être renommer le portfolio-imageen fonction de comment vous l'avez appelé. Il ne se passe pas beaucoup de choses ici, mais sauvegardez le fichier et jetez un coup d'œil dans le navigateur..
Charmant. Maintenant ouvrir style.scss et entrez le code suivant:
.barre latérale largeur: 100%; hauteur: 100%; Écran @média et (largeur-min: $ break-trois) float: left; largeur: 20%; .my-info text-align: center; remplissage: $ padding * 3 0; bas de la bordure: 1px solide $ gris foncé; .portfolio-image border-radius: 50%; h1, h2 font-weight: normal; h1 taille de la police: 120%; h2 taille de la police: 100%;
Comme nous suivons une stratégie axée sur le mobile, nous avons besoin que notre barre latérale soit pleine largeur et pleine hauteur pour les résolutions mobiles. Une interrogation rapide des médias pour notre $ pause troisle point de rupture fait flotter la barre latérale à gauche et limite la largeur à 20%.
Les styles pour .mes infos sont assez simples. Nous voulons juste tout centrer et laisser un peu d’espace sur les bords. Pour séparer notre prochaine section du menu, nous utilisons simplement une bordure de 1 px sur le bord inférieur. Pour faire le portfolio-image circulaire, donnez-lui 50% rayon de la frontière et, enfin, nous devons remplacer certains styles de police pour tous les éléments h1 ou h2 de cette section.
Liens de médias sociaux
Maintenant, nous devons nous attaquer à ces liens de médias sociaux, en utilisant l’un des sprites que nous avons créé plus tôt. Placez le code suivant directement après le h2déclarations dans le dernier bloc de code.
.social largeur: 120px; marge: 0 auto; a float: left; largeur: 25px; hauteur: 25px; marge: 0 $ marge / 5; fond: url (… /images/social-sprite.png) no-repeat; retrait du texte: -9999px; @media screen et (-webkit-min-device-pixel-ratio: 2), écran et (min-device-pixel-ratio: 2) arrière-plan: url (… /images/[email protected]) non -répéter; taille de l'arrière-plan: 101px 51px; & .dribbble background-position: 0px 0px; &: survol position de fond: 0px -25px; & .twitter background-position: -25px 0px; &: survol position de fond: -25px -25px; & .facebook background-position: -50px 0px; &: survol position de fond: -50px -25px; & .googleplus background-position: -75px 0px; &: survol position de fond: -75px -25px;
Cela a l'air assez compliqué mais ce n'est pas vraiment. La majeure partie de ce code traite de la façon dont les icônes et leurs états de survol apparaissent. Tout d'abord, nous devons faire flotter chacun des éléments, donnez-leur une largeur et une hauteur ainsi qu’une marge pour les espacer. La prochaine chose que nous faisons est de spécifier l’image d’arrière-plan. Cela devrait être réglé sur le sprite social que nous avons créé plus tôt. Enfin, nous devons nous assurer que le texte utilisé dans chaque élément n'apparaît pas sur la page. le retrait du textela propriété prend soin de cela bien.
La section suivante est l'intéressant. Ici, nous spécifions quel fond utiliser pour les affichages à haute densité de pixels. L'idée ici est d'utiliser la version "doublée" du sprite social si le rapport de pixels de l'appareil est 2. Le taille de fondpropriété est nécessaire pour redimensionner le fichier à la taille originale, de sorte que tout notre code de positionnement fonctionne juste sans rien dupliquer.
Les quatre prochaines sections sont toutes le même concept. Nous ne faisons que définir la position de l’arrière-plan pour chaque icône et les flotter Etat. Jetons un coup d'oeil dans le navigateur:
Impressionnant! Cela semble vraiment bien. Si tout est correct, les états de survol devraient tous fonctionner et ils devraient tous être nets sur un iPhone / iPad, etc. Commençons par aborder le menu de la barre latérale..
Les menus de la barre latérale
Commencez par entrer ce qui suit dans index.html dans le des menusrécipient.
Travail
Dernier
Création de sites web
l'image de marque
La photographie
Impression
Conception mobile
Sur
Compétences
Expérience
Éducation
Les clients
Témoignages
Blog
Contact
Adresse
Téléphone
Réseaux sociaux
Email
Assez explicite, je pense, alors continuons en entrant les styles suivants après les mes infos section, mais toujours à l'intérieur de l'ensemble barre latéraleélément.
.menus text-align: center; Écran @média et (largeur-min: $ pause-trois) padding: $ padding * 2 $ padding * 3; h3 text-transform: majuscule; taille de police: 120%; poids de police: normal; padding-left: $ padding * 2.5; curseur: pointeur; largeur: 20%; marge: marge * * marge de 2 $ * marge de 11 $; Écran @média et (largeur-min: $ break-one) marge: $ margin * 2 auto $ margin * 2; Écran @média et (largeur-min: $ break-trois) marge: $ marge * 2 0 $ marge 0; &: before content: ""; position: absolue; en haut: 0px; gauche: 0px; hauteur: 18px; bloc de visualisation; fond: url (… /images/nav-sprite.png) no-repeat; @media screen et (-webkit-min-device-pixel-ratio: 2), écran et (min-device-pixel-ratio: 2) arrière-plan: url (… /images/[email protected]) non -répéter; taille de l'arrière-plan: 49px 18px; & .work color: $ red; &: before width: 15px; position d'arrière-plan: 0px 0px; & .about color: $ green; &: before width: 17px; position d'arrière-plan: -15px 0px; & .contact color: $ blue; &: before width: 17px; position d'arrière-plan: -32px 0px;
C'est en fait très similaire aux icônes sociales en ce qui concerne le concept et la mise en œuvre du concept. Pour le des menus article lui-même, nous voulons juste que tout soit centré. Une fois que nous sommes au-dessus de notre $ pause trois point de rupture, nous aurons besoin d'un peu de rembourrage pour positionner les menus loin des bords légèrement.
Chacun de h3 les éléments doivent avoir différentes couleurs et différentes icônes. Nous utilisons une combinaison de :avantpseudo élément, sprites et requêtes de médias pour y parvenir. En dehors de cela, nous avons quelques requêtes de médias pour contrôler les marges de la h3éléments à des tailles d'écran plus grandes. C’est pour qu’ils soient toujours correctement positionnés par rapport à leurs menus.
En parlant des menus, nous allons ajouter le CSS pour eux dans un instant. D'abord, jetons un coup d'oeil dans le navigateur:
Les titres sont vraiment beaux! Les menus pas tellement. Occupons-nous vite de cela avant que les défauts bleus ne nous causent plus de douleur…
Pour les résolutions mobiles, nous voulons que nos menus soient masqués, afin que l'utilisateur puisse choisir de les masquer ou de les afficher lorsqu'ils ont besoin d'y accéder. Une fois que nous avons frappé notre $ pause troispointer les menus doivent être visibles tout le temps.
le .ouvrirLa classe gère l’affichage des menus lorsqu’ils sont ouverts. La conception les a placés assez précisément, nous faisons donc la même chose ici en utilisant des marges. Encore une fois, le $ pause troisCe point entre en jeu et remplace les marges pour ces résolutions et au-dessus. Les styles pour li les éléments sont assez simples. La principale chose à noter est l’utilisation des transitions CSS3. Je les ai utilisées ici pour donner une belle apparence de fondu lorsque je survole l'élément. Je vous encourage à jouer avec les transitions pour voir quels effets intéressants vous pouvez obtenir!
Sauvegardons le fichier et visualisons les résultats dans le navigateur.
Très agréable! Les menus se comportent exactement comme ils le devraient. Nous allons maintenant effectuer notre première partie de JavaScript / jQuery, pour contrôler l'ouverture et la fermeture des menus..
Nous commençons ce fichier avec le fonction prêt de document jQuery qui attend essentiellement que le document soit entièrement prêt avant d’exécuter le code. En savoir plus sur l'événement ready sur api.jquery.com.
Nous attachons ensuite un événement de clic à un h3à l'intérieur de notre des menusélément. Lorsque cet événement se produit (lorsque l'utilisateur clique sur le bouton h3) nous utilisons jQuery pour trouver le "prochain" ul élément et bascule la classe de ouvrir dessus. Donc, si l'élément a déjà la classe, il la supprimera et inversement, si ce n'est pas le cas. La dernière ligne est là pour arrêter toute action par défaut pour l'élément. Cela ne s'applique probablement pas ici parce que h3 les éléments n'ont pas d'action par défaut, contrairement à une balise d'ancrage, par exemple. Néanmoins, il est bon de prendre l'habitude de l'inclure lorsque vous utilisez des gestionnaires d'événements de clic..
Enregistrez ce fichier et revenez au navigateur. Lorsque vous êtes sur des résolutions mobiles, si vous cliquez sur les titres du menu, le menu devrait s’ouvrir en dessous. Si cela ne se produit pas, recherchez des erreurs dans le JavaScript ou actualisez votre navigateur et réessayez..
Cela enveloppe la zone de la barre latérale! Avançons et mettons du contenu sur la page.
Contenu principal
La première étape consiste à ajouter le code HTML nécessaire à la page..
7 nov 2013
Modèle PSD gratuit pour les startups, les petites entreprises et, fondamentalement, pour tous ceux qui aiment un bon design.
Client: Despreneur
Mots clés: Création de sites web
7 nov 2013
Modèle PSD gratuit pour les startups, les petites entreprises et, fondamentalement, pour tous ceux qui aiment un bon design.
Client: Despreneur
Mots clés: Création de sites web
7 nov 2013
Modèle PSD gratuit pour les startups, les petites entreprises et, fondamentalement, pour tous ceux qui aiment un bon design.
Client: Despreneur
Mots clés: Création de sites web
Chargement…
Placez ce code à l'intérieur du .contenu div. Nous avons les trois articles qui figurent dans la conception et aussi un article "Chargement". J'ai placé l'icône de chargement dans son propre élément de portefeuille afin que nous puissions garder la structure de la page. Je peux ensuite positionner simplement l'icône de chargement à l'intérieur du portfolio-image élément. Vous verrez ici aussi que le premier élément de portefeuille a une classe de premier. Ce sera important dans notre CSS sur lequel nous verrons après un autre coup d’œil rapide dans le navigateur:
Bien, mais pas tout à fait ce que nous voulons, alors passons directement au style.
.contenu largeur: 100%; hauteur minimale: 100%; fond: $ blanc; Écran @média et (largeur-min: $ break-trois) float: left; largeur: 80%; .portfolio-item background: $ grey; &: before content: ""; position: absolue; largeur: 3px; arrière-plan: plus foncé ($ gris, 5%); en haut: 0px; à gauche: 17px; en bas: 0px; & .first &: before top: 30px; .portfolio-info min-height: 100%; couleur: $ gris foncé; rembourrage: $ padding * 2 $ padding * 2 $ padding * 2 $ padding * 4; -webkit-box-dimensionnement: border-box; -moz-box-dimensionnement: border-box; -ms-box-sizing: border-box; taille de la boîte: boîte-frontière; Écran @média et (largeur-min: $ break-trois) float: left; largeur: 30%; .date taille de la police: 110%; couleur: noir; marge-bas: marge; &: before content: ""; position: absolue; largeur: 11px; hauteur: 11px; rayon de bordure: 50%; bordure: 2px solide $ gris; fond: $ rouge; à gauche: -29px; en haut: 3px; .meta color: $ black; marge supérieure: $ marge; p marge: 0;
Un autre gros morceau de code là-bas! Décomposons cela pièce par pièce. le .contenu Les styles sont similaires aux styles de la barre latérale, en ce sens que, pour les résolutions mobiles, nous en avons simplement besoin de la totalité de la largeur. $ pause troispoint nous devrions le flotter et tirer la largeur à 80%. Nous devons également donner la contenu div un fond blanc pour le séparer de la barre latérale.
le élément de portefeuille les éléments doivent avoir un fond gris. Pour créer la chronologie sur le bord gauche de la zone de contenu, nous allons donner à chaque élément de portefeuille une :avantélément. Ici, nous positionnons simplement à 17px du bord gauche et utilisons l’astuce haut / bas pour le forcer à avoir une hauteur de 100%. Cela implique de définir les deux Hautet baspropriété à 0, ce qui signifie en fait que l'élément se trouve aux deux emplacements, ce qui donne un élément de hauteur complète. Cela fonctionne également pour les propriétés left et right afin de créer un élément de largeur totale. Nous devons positionner notre premierélément de portefeuille loin du bord supérieur de la fenêtre que nous réalisons ici en définissant la propriété supérieure à 30px.
le informations de portefeuille les articles devraient, encore une fois, avoir 100% de largeur, sauf si $ pause trois ou au-dessus. Pour créer le petit cercle rouge vu sur le dessin, j’ai décidé d’utiliser le rendez-vous amoureux éléments, car les deux semblent liés. Dans le CSS, le meilleur moyen d'y parvenir est d'utiliser un :avant pseudoélément. Pour en faire un cercle, il doit avoir une hauteur et une largeur et un rayon de la frontière de 50%. Nous le positionnons alors absolument à gauche de la date. Pour obtenir le petit espace autour, appliquez simplement une bordure de la même couleur que le élément de portefeuille éléments.
le méta l'information est très simple. Il suffit de définir le texte en noir et de lui donner une marge supérieure. Tout les balises à l'intérieur ne devraient pas avoir de marges. Enregistrez le fichier et examinez les résultats obtenus par cette section de code relativement courte..
Cela devient très proche maintenant! Continuons avec notre contenumodes…
Placez ceci directement après le informations de portefeuille modes. Ce court bloc de code rendra les images dans les éléments de portefeuille sensibles. L'idée est de réduire les images au minimum, mais uniquement à leur largeur réelle. Cela signifie que vous devez avoir des images de largeur fixe, mais c'est tout à fait réalisable dans un modèle / modèle comme celui-ci, car les images seraient probablement générées de manière dynamique et rognées à une certaine taille..
Nous utilisons également le portfolio-image éléments pour ajouter un autre détail de conception, qui est la frontière mince entre les images et les informations. Si vous examinez de nouveau le navigateur, vous devriez voir les images bien redimensionnées avec le navigateur et avoir simplement un aspect génial.!
Prochain up
C'est l'heure de la pause café! Dans la partie suivante et finale de cette série, nous allons ajouter quelques reflets à la mise en page. Nous construirons l'icône de chargement au bas de notre zone de contenu, en l'animant avec CSS3, puis en imitant le défilement infini à mesure que d'autres éléments de portefeuille seront chargés..
Accentsconagua
Share
Ce que vous allez créer
Chargement…
Chargement…