Share
Aujourd'hui, nous allons utiliser une présentation de portefeuille PSD de ThemeForest et la reproduire entièrement en HTML et CSS tout en la rendant adaptative. Nous irons ensuite plus loin et intégrerons le plugin Isotope jQuery pour en faire un portefeuille filtrable entièrement fonctionnel..
Nous allons commencer par créer une structure de projet simple pour que tout reste organisé. Nous allons créer trois dossiers:
Avant de nous en tenir à notre codage, nous allons créer le fichier index.html qui peut être placé à la racine de votre projet. Nous allons jeter dans un modèle HTML5 de base, un lien vers notre fichier CSS dans le tête. De plus, nous devrons créer des liens vers d'autres fichiers:
Tutoriel Hipstar
Nous allons maintenant avoir besoin de quelques styles généraux dans notre fichier CSS. Cela impliquera juste une simple réinitialisation que vous pourrez ajouter en haut de votre fichier CSS.
html, corps, div, span, applet, objet, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr et adresse, citer, code, del, dfn, em, img, ins, kbd, q, s, samp, petit, grève, fort, sous, sup, tt, var, b, u, i, dl, dt, dd, dd, ol, ul, li, champs, forme, étiquette, légende, tableau, légende, tbody, tfoot, thead, tr, th, td, article, à part, toile, détails, intégrer, figure, figcaption, pied de page, en-tête, menu, navigation, sortie, rubis, section, résumé, heure, marque, audio, vidéo, entrée, zone de texte, sélectionnez arrière-plan: transparent; bordure: 0; taille de la police: 100%; marge: 0; contour: 0; remplissage: 0; alignement vertical: ligne de base , details, figcaption, figure, pied de page, en-tête, hgroup, menu, navigation, section display: block body hauteur de ligne: 1 abbr [titre], dfn [titre] bordure-bas: 1px en pointillé; curseur: help blockquote, q quotes: none blockquote: before, blockquote: after, q: before, q: after contenu: none del text-decoration: ligne-finale hr background: transparent; border: 0; clear: both; color: transparent; height: 1px; margin: 0; padding: 0 mark color-background: # ffffb3; police-style: italic entrée, sélectionnez vertical-align: middle ins backgro und-color: red; couleur: white; décoration de texte: none ol, ul style de liste: none table border-collapse: collapse; border-spacing: 0 a text-decoration: none;. clear clear: les deux; affichage: bloc; hauteur: 0; débordement: masqué; visibilité: masqué; largeur: 0 .clearfix: après clear: les deux: contenu: "; affichage: bloc; taille de police: 0; hauteur : 0; line-height: 0; visibilité: caché; largeur: 0 * html .clearfix,: premier-enfant + html .clearfix zoom: 1
Nous allons maintenant commencer à construire la structure du site! Nous allons commencer avec l'en-tête et le faire en utilisant l'élément HTML5 Header.
Ensuite, nous allons ajouter des CSS pour notre en-tête. Nous appliquerons ici quelques styles de base, mais le principal aspect à prendre en compte est le positionnement. Ici, nous utilisons une position fixe, puis 0 en haut, à gauche et à droite. Cela garantira que notre en-tête reste en haut de la fenêtre lors du défilement - et qu'il remplit toute la hauteur du navigateur..
.en-tête hauteur: 69px; fond: url (… /images/header.png) répéter; border-bottom: 1px solid #fff; -webkit-box-shadow: 0 0 7px rgba (0,0,0, .25); -moz-box-shadow: 0 0 7px rgba (0,0,0, 0,25); boîte-ombre: 0 0 7px rgba (0,0,0, 0,25); position: fixe; en haut: 0; gauche: 0; à droite: 0; z-index: 101;
Par souci de simplicité, ces deux parties seront réalisées à l'aide d'images, mais nous les insérerons également dans des balises d'ancrage et leur attribuerons une classe afin que nous puissions définir des styles de positionnement..
Les deux utilisent un style similaire, les deux positionnés de manière absolue (l'en-tête étant le parent) avec un top 0. Le logo a laissé 0 pour le garder à gauche et l'insigne de location-moi un droit de 20px pour l'écarter légèrement du côté droit.
.logo position: absolute; en haut: 0; gauche: 0; .hire-me position: absolute; en haut: 0; à droite: 20px;
Vous devriez avoir quelque chose qui ressemble à ceci:
Une fois encore, nous allons tirer parti du balisage HTML5 et créer notre barre latérale à l'aide du de côté élément.
Sur le CSS de la barre latérale, vous remarquerez que nous avons utilisé la position fixée à nouveau. Techniquement, cela ne s'applique pas vraiment ici, car le curseur remplit la hauteur de la page..
.sidebar width: 149px; position: fixe; en haut: 70 px; gauche: 0; en bas: 0; à droite: 0; z-index: 1; float: gauche; border-right: 1px solide # a13d36; margin-right: -1px; -webkit-box-shadow: encart -1px 0 0 # ff786b; -moz-box-shadow: insert -1px 0 0 # ff786b; box-shadow: insert -1px 0 0 # ff786b;
Vous remarquerez que nous n'avons pas réussi à définir un arrière-plan… Nous appliquerons l'arrière-plan de la barre latérale, mais pas à la barre latérale. nous l'appliquerons au corps et le répéterons sur l'axe des ordonnées pour qu'il coule de haut en bas. Une position de la gauche sera également utilisé pour s'assurer que l'arrière-plan est placé à gauche de la page pour la barre latérale.
Comme il s’agit d’un style de corps, il peut être judicieux de faire défiler votre fichier CSS et de le placer plus près du haut. J'ai également ajouté une propriété de lissage des polices aux navigateurs Webkit..
body background: # f8faf4 url (… /images/sidebar_body.png) fixe left repeat-y; -webkit-font-lissage: antialiasé;
Nous aurons maintenant terminé la base de notre barre latérale!
Maintenant que la barre latérale est faite, nous pouvons y ajouter la navigation. Nous allons créer une liste non ordonnée et l'envelopper avec l'élément HTML5 Nav.
Maintenant, quelques styles de base pour la navigation, l'ajout d'un arrière-plan, de styles de polices et de la famille de polices de Google Web Fonts - PT Sans.
nav.primary ul li a background: url (… /images/nav.png) repeat-x center top; hauteur: 39px; largeur: 149px; bloc de visualisation; bord inférieur: 1px solide # ba4b42; famille de polices: 'PT Sans Narrow', Helvetica, Arial, sans serif; taille de police: 18px; couleur: #fff; retrait du texte: 20px; ombre du texte: 0 -1px 0 # BA1E1A; texte-décoration: aucun; hauteur de ligne: 39px; nav.primary ul li a: hover color: # E9EBE5; position de fond: centre en bas;
Nous allons maintenant avoir besoin de créer un conteneur d'emballage qui contiendra les entrées du portefeuille. En outre, nous devrons ajouter des marges et des rembourrages pour que les entrées s'affichent au bon endroit. Cela peut être fait en écartant d’abord tout l’élément de l’en-tête et de la barre latérale..
Si l’en-tête a une hauteur de 70px, nous aurons besoin d’une marge supérieure de 70px. La barre latérale a une largeur de 150 pixels, nous allons donc appliquer une marge de gauche de 150 pixels. La dernière chose à faire est un padding de 20px en haut et à gauche pour écarter les entrées de l'en-tête et de la barre latérale.
.main padding: 20px 20px 0; marge: 70px 0 0 150px;
Il est temps de commencer avec les entrées du portefeuille. Allez-y et créez une div avec une classe de portefeuille à l'intérieur de notre domaine principal, cela maintiendra les éléments de notre portefeuille ensemble. Notre entrée de portefeuille est composée d'un chiffre (encore un élément HTML5) utilisé pour désigner un conteneur de média..
Nous aurons alors une image avec deux étendues; un pour le ruban et un pour le vol stationnaire. Vous pouvez également utiliser des pseudo-éléments pour ceux-ci, ce qui allégerait le balisage tout en réduisant la compatibilité de la page avec le navigateur..
Le style du portefeuille est fondamental. Nous allons flotter à gauche et ajouter 20px de marge à droite et en bas. Pour créer la bordure blanche, nous allons simplement ajouter un peu de remplissage, puis un arrière-plan, ceux-ci seront arrondis à l'aide d'un simple rayon de 5px (tout en gardant en mémoire les préfixes). Enfin, une boîte-ombre sera appliquée.
.entry position: relative; float: gauche; marge droite: 20px; marge inférieure: 20 px; curseur: pointeur; background: #fff; rembourrage: 10px; largeur: 440px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 7px rgba (0,0,0, .1); -moz-box-shadow: 0 0 7px rgba (0,0,0, .1); box-shadow: 0 0 7px rgba (0,0,0, .1);
Comme nous appliquons 20px de marge à droite des entrées, nous devons soustraire cela du conteneur parent (la div de portefeuille)..
.portfolio margin-right: -20px;
Nous avons créé le balisage du ruban lors de l'ajout de l'élément de portefeuille (mais, encore une fois, vous avez peut-être utilisé un pseudo-élément), nous devons maintenant le styler à l'aide de CSS.
.ribbon background: url (… /images/camera_ribbon.png) no-repeat; largeur: 31px; hauteur: 47px; position: absolue; en haut: -4px; à droite: 11px; z-index: 9999;
La dernière chose à faire pour le portefeuille est d'ajouter l'état de survol. Cela sera réalisé avec la durée que nous avons créée précédemment, tout ce dont nous avons besoin maintenant, c'est du style. Nous allons utiliser une image et un fond noir avec une opacité alpha de 70%. Nous avons également ajouté des transitions CSS3 pour permettre un effet de survol en douceur. La dernière chose à ajouter opacité: 1; pour survoler l'entrée, ce qui s'estompe dans la partie stationnaire.
.hover background: rgba (0,0,0, .7) url (… /images/hover.png) centre non répété; position: absolue; en haut: 10 px; à gauche: 10px; en bas: 13px; à droite: 10px; opacité: 0; -webkit-transition: tous les fichiers .3 sont faciles à installer; -moz-transition: tous les fichiers .3s sont faciles à installer; -ms-transition: tous les fichiers .3s sont faciles à installer; -o-transition: tous les fichiers .3 sont faciles à installer; transition: tous les fichiers .3 sont faciles à installer; .entry: survol. hover opacité: 1;
Maintenant que notre portfolio est complet, vous êtes libre d'ajouter votre propre propriété et de changer les images.!
Maintenant que nous avons répliqué le PSD dans un concept fonctionnel, nous allons le rendre adaptatif. Nous n'utilisons pas une grille purement flexible, ce qui explique pourquoi ce que nous pratiquons n'est pas techniquement sensible. Nous utiliserons les requêtes de média CSS3 pour modifier et éditer la mise en page dans différents modes d'affichage. Nous utiliserons des dimensions approximatives, ce qui nous donnera ce qui peut plus ou moins être perçu comme une orientation portrait sur tablette, une orientation paysage sur tablette, une orientation portrait sur mobile et, enfin, une orientation paysage sur mobile..
Avant de commencer à éditer la mise en page, nous devons faire deux choses. Premièrement, nous devrons ajouter la balise méta viewport qui permettra à notre site d’être correctement visualisé sur les mobiles et les tablettes. Si vous souhaitez en savoir plus à ce sujet, assurez-vous de consulter cet article de Ian Yates. La dernière consiste à ajouter un peu de CSS pour permettre à nos images d’être fluides:
img max-width: 100%;
Nous commencerons par cibler les tablettes orientées portrait. Seule une petite quantité d’édition est nécessaire pour ajuster notre mise en page. Le principal à prendre en compte est l'entrée; il sera réduit pour accueillir plus d'entrées sur chaque ligne.
Écran @média uniquement et (largeur minimale: 768px) et (largeur maximale: 959px) .content padding: 20px 0 0 20px; .entry width: 258px;
Habituellement, vous ne ciblerez pas l'orientation de la tablette en fonction de l'environnement, à moins que vous n'y soyez obligé, mais en raison de la conception de cette page, cela nous aidera certainement. Nous n'utiliserons pas les largeurs min et max pour déterminer la taille de la fenêtre. Nous la ciblerons en fonction de l'orientation. Cette fois, nous utilisons encore moins de code en modifiant simplement la largeur de l'entrée de portefeuille..
@media only screen et (max-device-width: 1024px) et (orientation: landscape) .entry width: 386px;
Nous allons maintenant passer aux téléphones portables, en commençant par l'orientation portrait. Cette fois, nous devrons faire un peu plus de montage. Nous allons ajuster la disposition maintenant, car l'écran devenant plus petit, nous ne sommes plus en mesure d'adapter la barre latérale à gauche avec les entrées à droite. Nous allons déplacer la barre latérale avant les entrées et la faire remplir toute la largeur de l'écran.
En outre, l'en-tête étant de grande taille avec la barre latérale / navigation en dessous, il se peut que vous ne puissiez pas voir autant d'entrées. Nous allons enlever le position: fixe et le changer en absolu donc l'en-tête va maintenant défiler au lieu de rester en haut de la page.
Écran @média uniquement et (largeur maximale: 767px) corps image-fond: aucune; .header position: absolute; float: gauche; largeur: 100%; .logo float: left; .hire-me float: right; #wrapper float: left; largeur: 100%; .sidebar width: 100%; position: relative; z-index: 1; float: gauche; border-right: 1px solide # a13d36; margin-right: -1px; -webkit-box-shadow: aucun; -moz-box-shadow: aucun; boîte-ombre: aucune; nav.primary li float: left; largeur: 100%; fond: url (… /images/sidebar.png); nav.primary ul li a width: 100%; nav.primary ul li a: actif, nav.primary ul li a.selected background: url (… /images/mobile_nav_active.png); .page float: left; largeur: 100%; .main float: left; remplissage: 20px 20px 0; marge: 70px 0 0 0; .entry width: 260px;
Ok, maintenant nous avons eu quelques problèmes. La barre latérale s’est bien adaptée à la disposition de l’écran, mais les entrées de portefeuille ne sont pas correctement positionnées. Nous aurons besoin de revenir à notre balisage et d'ajouter deux divs supplémentaires, l'un avec un id de wrapper qui encapsulera tout sauf l'en-tête et l'autre avec une classe de page qui encapsulera notre zone de contenu principale..
Après avoir ajouté le balisage nécessaire, nous devrons ajouter des styles. Revenez en haut de votre fichier CSS et ajoutez ce qui suit:
#wrapper height: auto; marge: 0; débordement caché; rembourrage: 0; .page position: relative; débordement caché; en haut: 0px; marge: 0px; remplissage: 0px; border-left: 1px solid # a13d36;
Ok, enfin l'orientation paysage pour mobile. Si vous placez ceci après le CSS de portrait mobile que nous venons de créer, il héritera de ces styles, par exemple la barre latérale pleine largeur, etc. Il ne nous reste plus qu'à modifier la largeur de l'entrée..
Écran @média uniquement et (largeur minimale: 480px) et (largeur maximale: 767px) .entry width: 190px;
Maintenant que nous avons couvert la création du design, nous pouvons commencer à lui donner des fonctionnalités! Nous utiliserons le brillant plugin isotope de David DeSandro. Isotope est utilisé pour créer des mises en page, filtrer et trier. Il est couramment utilisé dans les portefeuilles pour filtrer des travaux en différentes catégories - par exemple, Web Design, Photographie et Illustration. Sur cette note, installons-le!
Avant de pouvoir l'ajouter à notre conception, nous devrons le télécharger. Rendez-vous sur http://isotope.metafizzy.co/jquery.isotope.min.js. Vous verrez maintenant le fichier JavaScript Isotope. Il suffit d'aller dans Fichier> Enregistrer et de l'enregistrer dans le dossier js que nous avons créé au début. Nous devrons ensuite créer un lien vers le script dans votre fichier HTML.
Pour permettre le filtrage des éléments de notre portefeuille, nous devons modifier à nouveau notre marge. Nous allons commencer par la navigation qui filtrera pour nous. Isotope utilise les attributs de données personnalisées HTML5, en particulier data-filter = "". Nous définissons une valeur en fonction de la catégorie; Utilisations Web Design .le web (notez qu'il faut ajouter une période avant la valeur de la catégorie). La balise d'ancrage pour toutes les catégories n'utilise pas .tout cependant, il utilise un astérisque.
La dernière partie du processus de filtrage consiste à modifier les éléments du portefeuille. Après avoir ajouté filtre de données vous aurez besoin d’ajouter les valeurs correspondantes à chaque entrée. Si l'entrée de travail appartient à la catégorie vidéo, vous devez ajouter une classe de vidéo. Notez que si votre filtre de données les valeurs sont en minuscules, vous devez utiliser des minuscules pour les classes d'entrée.
Il est temps d'activer Isotope, ce que nous allons faire en deux parties. Nous devons d’abord accrocher la partie qui triera les entrées de notre portefeuille. Commencez par créer un nouveau fichier appelé "custom.js" et placez-le dans votre dossier js.
Accentsconagua
$ (window) .load (function () var $ conteneur = $ ('. portfolio'); $ conteneur.isotope (filtre: '*', animationOptions: durée: 750, easing: 'linéaire', file d'attente: faux, ); ); La deuxième partie accrochera la navigation pour permettre le filtrage.
$ (window) .load (function () var $ conteneur = $ ('. portfolio'); $ conteneur.isotope (filtre: '*', animationOptions: durée: 750, easing: 'linéaire', file d'attente: false); $ ('nav.primary ul a'). click (function () var sélecteur = $ (this) .attr ('data-filter'); $ conteneur.isotope (filter: sélecteur, animationOptions: duration: 750, easing: 'linear', file d'attente: false,); return false;);); La PSD indique un état actif pour l'ancre de navigation actuellement sélectionnée. Nous devrons ajouter un peu plus de balisage, un peu plus de CSS et enfin un peu plus de jQuery. Commencez par revenir à votre fichier HTML et ajoutez class = "sélectionné" à la première balise d'ancrage.
Ensuite, vous aurez besoin d'ajouter un peu plus de CSS, donc ajoutez ceci juste en dessous des styles de navigation.
nav.primary ul li a: actif, nav.primary ul li a.selected background: url (… /images/nav_active.png); border-bottom: 1px solide # 9e3f38;
La dernière partie est un peu de jQuery, cela va ajouter des classes quand on clique dessus pour afficher le bouton / la catégorie active.
var $ optionSets = $ ('nav.primary ul'), $ optionLinks = $ optionSets.find ('a'); $ optionLinks.click (function () var $ this = $ (this); // ne continue pas si déjà sélectionné if ($ this.hasClass ('selected')) return false; var $ optionSet = $ this .parents ('nav.primary ul'); $ optionSet.find ('. sélectionné'). removeClass ('sélectionné'); $ this.addClass ('sélectionné');); Si vous continuez et cliquez sur les boutons de navigation, vous verrez que le filtre fonctionne! Mais attendez, ce n'est pas une transition en douceur! Eh bien c'est parce qu'il faut encore ajouter des transitions CSS.
.élément isotopique index z: 2; .isotope-hidden.isotope-item événements de pointeur: aucun; z-index: 1; .isotope, .isotope .isotope-item -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; durée de transition: 0.8s; .isotope -webkit-transition-property: height, width; -moz-transition-property: hauteur, largeur; propriété de transition: hauteur, largeur; .isotope .isotope-item -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacité; propriété de transition: transformation, opacité;
Et voilà, un autre tutoriel utile complet! Vous êtes libre d'utiliser cette méthode dans vos conceptions. Allez vous amuser avec.
J'espère que vous avez apprécié ce tutoriel, merci d'avoir lu!
