Code-il une jolie galerie d'images HTML simple pour la barre latérale
Aujourd'hui, je vais vous montrer comment utiliser HTML et un peu de CSS pour créer une galerie d'images de base pour la barre latérale de votre blog. Ceci est une mise en page souple que vous pouvez utiliser pour la navigation de la barre latérale, Blogrolls, ou tout simplement pour montrer vos images favorites.
Dans ce tutoriel, niveau débutant, je vais vous guider à travers les étapes de création d'une galerie de barre latérale à deux colonnes avec six 100px images carrées. Chaque lien d'image vers une autre page. A la fin du poste, je l'ai inclus quelques options de style CSS pour personnaliser la galerie.
Ce que vous devez utiliser ce tutoriel
Vous n'avez pas besoin d'aucune expérience préalable avec HTML ou CSS pour utiliser ce tutoriel, je vais vous guider à travers elle.
Tous ensemble? Commençons!
Téléchargez vos images
Si vous utilisez Blogger, vous pouvez télécharger vos images à votre album Picasa Web pour votre blog. Si vous êtes sur Wordpress auto-hébergé, télécharger vos images vers votre bibliothèque multimédia. les utilisateurs peuvent télécharger des images Typepad au Gestionnaire de fichiers. Peu importe quelle plate-forme que vous êtes, si vous préférez utiliser Photobucket ou une autre image service d'hébergement, vous pouvez!
Une fois que vous avez téléchargé vos images, vous êtes prêt à commencer à écrire le code HTML de la galerie.
Voici le modèle de squelette pour une 6 galerie d'images:
J'ai créé une version modifiable de ce modèle sur Codepen. Vous pouvez ouvrir l'éditeur dans un nouvel onglet au code ainsi que le tutoriel. Lorsque vous utilisez Codepen pour écrire votre code HTML, vous verrez un aperçu de la façon dont votre galerie regardera avant de l'ajouter à votre blog. Ce qui est bien puisque vous n'avez pas à vous soucier de faire un désordre sur votre blog expérimenter!
Si vous préférez écrire votre code HTML « hors ligne », assurez-vous que vous avez un éditeur de texte approprié - Bloc-notes est intégré sur PC, TextEdit est intégré sur Mac (vous aurez besoin de le configurer pour être utilisé comme éditeur HTML premier). Ne jamais modifier le code HTML avec un programme de traitement de texte.
Permettez-moi de vous guider à travers le code HTML et expliquer ce que signifie chaque partie.
La première ligne est une ouverture
tag avec la classe de « barre latérale-image-galerie ». En HTML et CSS, un div est comme un conteneur pour les éléments à l'intérieur. Dans ce cas, notre galerie div sera « contenir » tous vos éléments d'image.
Voilà où vous entrez le lien de vos lecteurs vont quand ils cliquent sur votre image. Ainsi, par exemple, si je voulais relier mon image à Google, je l'écrire comme ceci:
Voici où entrer le lien direct vers votre image. Si vous avez téléchargé votre image à votre album Picasa, cliquez sur l'image dans votre album pour atteindre sa version grandeur nature, puis faites un clic droit sur l'image et sélectionnez l'option pour copier l'emplacement de l'image. Dans Wordpress auto-hébergé, cliquez sur « modifier » sous votre image dans votre bibliothèque multimédia et copiez l'URL du fichier. utilisateurs Typepad, clic droit sur le titre de l'image dans votre gestionnaire de fichiers pour obtenir l'URL directe.
Construire le dernier exemple, voici comment j'entrer le lien direct vers mon image:
largeur = « » taille = « »
Entrez la largeur et la hauteur de votre image ici. Je le démontrer avec 100 x 100 pixels images carrées:
Ne pas ajouter « px » après la largeur ou la hauteur, entrez le numéro.
Alt text aide les lecteurs ayant une déficience visuelle comprennent les images sur votre blog. Puisque nous relier les images à une autre page, le texte alt devrait permettre à vos visiteurs savent où le lien va. Ainsi, par exemple, je remplirai dans le texte alt pour une image un lien vers Google comme ceci:
La balise d'ancrage de fermeture ferme le lien. Ne laissez pas ceci, ou vos liens se comportent étrangement!
Répétez le même processus pour chacun de vos liens d'image, en vous assurant de remplir l'URL de destination d'abord, l'URL source d'image suivante, puis enfin les attributs de l'image (largeur, hauteur et alt).
Une fois que vous avez terminé tous les liens d'image, vous verrez que le conteneur de la galerie se ferme à la fermeture
marque.
Si vous travaillez le long de Codepen, à ce stade, votre fenêtre de prévisualisation vous montrera six images dans une ligne horizontale.
Nous voulons transformer en une mise en page sur deux colonnes, et nous allons le faire avec une ligne de CSS.
Dans la fenêtre CSS dans Codepen, entrez:
Cette règle définit la largeur du conteneur galerie à 210px, qui force les images carrées de 100x100px en deux colonnes, comme ceci:
Ajouter la galerie à votre blog
Une fois que votre galerie est terminée, vous êtes prêt à ajouter à votre blog! Nous allons ajouter le CSS d'abord afin que vos images sont immédiatement décorées dès que vous ajoutez le code HTML.
Dans votre Codepen, copiez la règle CSS dans la fenêtre CSS et le coller dans le champ CSS personnalisé pour votre plate-forme de blogs. Si vous êtes sur Blogger, allez à modèle> Personnaliser> Avancé> Ajouter CSS. Si vous êtes sur Typepad, allez concevoir> CSS personnalisé. Sur Wordpress votre emplacement CSS personnalisé varie. Si vous utilisez l'option CSS personnalisée de Jetpack, il est sous Apparence> Modifier CSS.
Enregistrez votre CSS. Rien ne sera différent encore sur votre blog. Vous verrez le CSS de travail une fois que vous ajoutez le code HTML.
Enregistrez votre nouveau widget et vous devriez voir votre nouvelle galerie apparaît dans la barre latérale. Bon travail!
Plus d'options de personnalisation
Si vous êtes pour un peu plus CSS, il y a quelques réglages simples que vous pouvez faire à votre galerie pour donner un peu plus de style. Chacune de ces améliorations CSS fonctionne dans les versions actuelles de Firefox, Chrome, - Safari, et dans Internet Explorer 9+. IE8 est laissé, comme d'habitude.
Faire des images rondes
Pas besoin d'ouvrir Photoshop, vous pouvez faire des images ronde avec une ligne de CSS! Il suffit d'ajouter cette règle CSS ci-dessous votre largeur .sidebar-galerie d'images règle:
Boom, images rondes!
Changer l'image Opacité sur Hover
Vous pouvez utiliser la propriété d'opacité CSS et: hover pseudo-classe pour faire les images semblent « fade in » ou « fade out » quand ils ont plané avec la souris.
Pour les images semblent « disparaître dans » quand ils ont plané, vous aurez besoin de réduire leur opacité dans leur état non plané. Pour ce faire, ajoutez cette règle à votre CSS:
Si vous avez utilisé la règle border-radius demo'd ci-dessus, vous pouvez ajouter l'opacité comme la ligne suivante de cette règle, comme ceci:
Cela définit l'opacité initiale de l'image à l'échelle .7 de 0,1 à 1 avec 0,1 comme la plus faible opacité et 1 opacité totale visible. Ne réglez pas votre opacité initiale trop faible - vol stationnaire effets ne fonctionnent pas aussi bien sur les appareils à écran tactile, et vous ne voulez pas votre image trop fanée pour les visiteurs de l'écran tactile.
Maintenant, il est temps de définir l'opacité plané avec: hover pseudo-classe. Voici la règle:
Maintenant, quand chacun de vos images est plané, il viendra à une opacité totale.
Pour inverser l'effet et rendre les images « fade out » un peu quand plané, changer les niveaux d'opacité dans les deux règles afin que votre opacité initiale est 1.
Faire des images Déplacer
Vous pouvez donner des images un peu de mouvement avec une transformation CSS. Essayez ceci pour commencer:
Cette règle permet l'inclinaison de l'image légèrement vers la gauche quand il planait. Si vous avez utilisé l'opacité: vol stationnaire au-dessus de la règle, vous pouvez combiner ceci: règle vol stationnaire avec celui-là, comme ceci:
Vous pouvez modifier le degré de rotation en changeant -10deg vers un autre numéro, positif ou négatif. Assurez-vous de changer tous les 4 instances du numéro afin que votre effet fonctionne de la même manière d'un navigateur à.
J'ai sauvé une Codepen séparée avec tous ces effets CSS supplémentaires appliqués ici. Expérimentez avec un peu et voir ce que vous venez avec!
Articles Liés
La première ligne est une ouverture
Voilà où vous entrez le lien de vos lecteurs vont quand ils cliquent sur votre image. Ainsi, par exemple, si je voulais relier mon image à Google, je l'écrire comme ceci:
Voici où entrer le lien direct vers votre image. Si vous avez téléchargé votre image à votre album Picasa, cliquez sur l'image dans votre album pour atteindre sa version grandeur nature, puis faites un clic droit sur l'image et sélectionnez l'option pour copier l'emplacement de l'image. Dans Wordpress auto-hébergé, cliquez sur « modifier » sous votre image dans votre bibliothèque multimédia et copiez l'URL du fichier. utilisateurs Typepad, clic droit sur le titre de l'image dans votre gestionnaire de fichiers pour obtenir l'URL directe.
Construire le dernier exemple, voici comment j'entrer le lien direct vers mon image:
largeur = « » taille = « »
Entrez la largeur et la hauteur de votre image ici. Je le démontrer avec 100 x 100 pixels images carrées:
Ne pas ajouter « px » après la largeur ou la hauteur, entrez le numéro.
Alt text aide les lecteurs ayant une déficience visuelle comprennent les images sur votre blog. Puisque nous relier les images à une autre page, le texte alt devrait permettre à vos visiteurs savent où le lien va. Ainsi, par exemple, je remplirai dans le texte alt pour une image un lien vers Google comme ceci:
La balise d'ancrage de fermeture ferme le lien. Ne laissez pas ceci, ou vos liens se comportent étrangement!
Répétez le même processus pour chacun de vos liens d'image, en vous assurant de remplir l'URL de destination d'abord, l'URL source d'image suivante, puis enfin les attributs de l'image (largeur, hauteur et alt).
Une fois que vous avez terminé tous les liens d'image, vous verrez que le conteneur de la galerie se ferme à la fermeture
Si vous travaillez le long de Codepen, à ce stade, votre fenêtre de prévisualisation vous montrera six images dans une ligne horizontale.
Nous voulons transformer en une mise en page sur deux colonnes, et nous allons le faire avec une ligne de CSS.
Dans la fenêtre CSS dans Codepen, entrez:
Cette règle définit la largeur du conteneur galerie à 210px, qui force les images carrées de 100x100px en deux colonnes, comme ceci:
Ajouter la galerie à votre blog
Une fois que votre galerie est terminée, vous êtes prêt à ajouter à votre blog! Nous allons ajouter le CSS d'abord afin que vos images sont immédiatement décorées dès que vous ajoutez le code HTML.
Dans votre Codepen, copiez la règle CSS dans la fenêtre CSS et le coller dans le champ CSS personnalisé pour votre plate-forme de blogs. Si vous êtes sur Blogger, allez à modèle> Personnaliser> Avancé> Ajouter CSS. Si vous êtes sur Typepad, allez concevoir> CSS personnalisé. Sur Wordpress votre emplacement CSS personnalisé varie. Si vous utilisez l'option CSS personnalisée de Jetpack, il est sous Apparence> Modifier CSS.
Enregistrez votre CSS. Rien ne sera différent encore sur votre blog. Vous verrez le CSS de travail une fois que vous ajoutez le code HTML.
Enregistrez votre nouveau widget et vous devriez voir votre nouvelle galerie apparaît dans la barre latérale. Bon travail!
Plus d'options de personnalisation
Si vous êtes pour un peu plus CSS, il y a quelques réglages simples que vous pouvez faire à votre galerie pour donner un peu plus de style. Chacune de ces améliorations CSS fonctionne dans les versions actuelles de Firefox, Chrome, - Safari, et dans Internet Explorer 9+. IE8 est laissé, comme d'habitude.
Faire des images rondes
Pas besoin d'ouvrir Photoshop, vous pouvez faire des images ronde avec une ligne de CSS! Il suffit d'ajouter cette règle CSS ci-dessous votre largeur .sidebar-galerie d'images règle:
Boom, images rondes!
Changer l'image Opacité sur Hover
Vous pouvez utiliser la propriété d'opacité CSS et: hover pseudo-classe pour faire les images semblent « fade in » ou « fade out » quand ils ont plané avec la souris.
Pour les images semblent « disparaître dans » quand ils ont plané, vous aurez besoin de réduire leur opacité dans leur état non plané. Pour ce faire, ajoutez cette règle à votre CSS:
Si vous avez utilisé la règle border-radius demo'd ci-dessus, vous pouvez ajouter l'opacité comme la ligne suivante de cette règle, comme ceci:
Cela définit l'opacité initiale de l'image à l'échelle .7 de 0,1 à 1 avec 0,1 comme la plus faible opacité et 1 opacité totale visible. Ne réglez pas votre opacité initiale trop faible - vol stationnaire effets ne fonctionnent pas aussi bien sur les appareils à écran tactile, et vous ne voulez pas votre image trop fanée pour les visiteurs de l'écran tactile.
Maintenant, il est temps de définir l'opacité plané avec: hover pseudo-classe. Voici la règle:
Maintenant, quand chacun de vos images est plané, il viendra à une opacité totale.
Pour inverser l'effet et rendre les images « fade out » un peu quand plané, changer les niveaux d'opacité dans les deux règles afin que votre opacité initiale est 1.
Faire des images Déplacer
Vous pouvez donner des images un peu de mouvement avec une transformation CSS. Essayez ceci pour commencer:
Cette règle permet l'inclinaison de l'image légèrement vers la gauche quand il planait. Si vous avez utilisé l'opacité: vol stationnaire au-dessus de la règle, vous pouvez combiner ceci: règle vol stationnaire avec celui-là, comme ceci:
Vous pouvez modifier le degré de rotation en changeant -10deg vers un autre numéro, positif ou négatif. Assurez-vous de changer tous les 4 instances du numéro afin que votre effet fonctionne de la même manière d'un navigateur à.
J'ai sauvé une Codepen séparée avec tous ces effets CSS supplémentaires appliqués ici. Expérimentez avec un peu et voir ce que vous venez avec!