Il y a une tendance générale vers des listes de colonnes plus petites? dans les mises en page d'accueil. Plus précisément, les startups et les pages de renvoi techniques utilisent cet effet pour promouvoir les fonctionnalités de leurs produits. Mais il s’agit d’un petit style de mise en page adapté à tous les besoins, et l’utilisation d’icônes dans votre conception rompra avec les conceptions de gabarit normales pour un affichage de liste intrigant.
Dans ce tutoriel, je veux montrer comment utiliser les contrôles Web CSS3 personnalisés en tant qu’icône dans le code HTML. Nous allons créer un site Web de démarrage très basique en utilisant l’approche de liste à deux colonnes. Toute la CSS est très simple, bien que vous deviez peut-être faire quelques recherches sur certaines propriétés. Cet effet est natif pour tous les navigateurs conformes aux normes et rend parfaitement sous OS X ou Windows.
Live Demo - Télécharger le code source
Téléchargement de polices
Je recommande toujours aux concepteurs de vérifier le jeu de polices Entypo, qui est open source et gratuit à télécharger. Le pack contient les polices des 4 principaux types de fichiers, ainsi que des versions de bureau à installer sur Mac ou PC. Il a également un pack d'icônes séparé pour les boutons de médias sociaux. Nous avons simplement besoin que la famille de polices Web Entypo soit copiée dans un nouveau répertoire nommé polices. Voici la liste des fichiers que j'ai inclus:
- entypo.eot
- entypo.svg
- entypo.ttf
- entypo.woff
Je montrerai comment inclure cela avec CSS un peu plus tard. Assurez-vous simplement que tout est organisé correctement et prêt à être inclus dans la page. De plus, ma démo contient un petit dossier d’images pour les effets de glycémie, mais ils ne sont pas pertinents pour la mise en page. Téléchargez simplement une copie de ma démo si vous voulez toutes les ressources ensemble.
Nous devons d’abord examiner la structure de la page et le plan pour tout aligner parfaitement.
Planifier le HTML
Nous n'avons pas besoin de couvrir tout le code HTML de la page, mais seulement les éléments importants. La première est ma section d'en-tête qui contient un lien vers le fichier CSS relatif, ainsi que des polices Web uniques de Google. Notez que notre CSS3 local @ font-face déclaration n’affectera pas du tout ces polices tierces.
Il n’ya pas grand chose d’extraordinaire ici, nous pouvons donc passer directement à la section du corps. J'utilise un div d'emballage externe avec un interne #contenu récipient. Cette section regroupe l'intégralité de la section de page intérieure ainsi que les éléments de la liste à 2 colonnes. L'objet entier est en fait dans une liste non ordonnée en utilisant l'ID #fonctionnalités.
J'ai ajouté un .clearfix classe sur l'élément UL externe afin que le conteneur abaisse le reste du contenu de la page. Étant donné que tous les éléments de liste internes sont flottants, nous avons besoin d’une méthode permettant de contrôler le modèle de boîte. De même chaque élément de la liste .fonctionnalité contient à la fois une portée et un titre plus petit.
La plage utilise nos icônes de pictogrammes pour afficher un dessin spécifique juste à côté du texte. Nous avons la possibilité d'ajouter plus de classes afin qu'un élément de liste puisse couvrir l'intégralité de la page. Les éléments caractéristiques ne sont que l'objet conteneur le plus élémentaire pour lequel nous avons 2 listes par ligne. Vous remarquerez également que l'icône s'étend à la fois d'une classe pour la famille de polices spéciale et d'une classe pour le type d'icône que nous affichons.
Cette classe secondaire est utile si l'icône est positionnée dans un emplacement étrange. Si quelque chose est trop grand, trop petit ou mal placé, cette classe directe est plus facile à manipuler. Et cela simplifie également l'exploration du code HTML en un processus simple. Le dernier morceau de codes est à l'intérieur de mon styles.css fichier et ce n’est certainement pas trop compliqué.
Styles de colonnes avec CSS
Le premier élément intéressant que vous remarquerez est tout en haut de mon dossier. Nous utilisons ici une nouvelle déclaration CSS3 font-face pour configurer les polices d’icône. En utilisant un seul nom de famille, nous pouvons importer les 4 types de fichiers en même temps.
Le supplément poids de la police et le style de police les propriétés ne sont pas nécessaires - mais méritent d'être conservées. Cela ne fait pas de mal de spécifier que notre nouvelle police n'est pas en gras ni en italique par défaut. C'est également un excellent modèle à sauvegarder si vous prévoyez d'utiliser un grand nombre de polices Web CSS3.
C'est un autre morceau de code intéressant que je n'ai pas montré dans le code HTML. En gros, je crée un paragraphe de texte d'introduction divisé en deux colonnes à l'aide des nouvelles propriétés CSS3 et des préfixes de fournisseur associés. Notez que cela n'a rien à voir avec la liste des icônes, mais qu'il s'agit d'une autre méthode de génération de contenu en colonnes dans vos pages.
Maintenant, tous les codes sont désignés dans la liste des pictogrammes principaux.Dans ma classe de pictogrammes, nous utilisons la nouvelle famille 'EntypoRegular' définie sur une taille par défaut de 8em. Les icônes sont à l’origine très petites, nous devons donc nous assurer qu’elles sont suffisamment grandes pour être placées juste à côté d’un bloc de texte de sous-titre.
Chacun de .fonctionnalité éléments est limité à une largeur de 420px avec un certain rembourrage interne. Les espaces entre chaque colonne fournissent une largeur totale de 100% à la liste non ordonnée. Et à l'intérieur de la liste, nous avons les pictogrammes flottant à gauche avec positionnement relatif. Vous serez peut-être surpris de constater à quel point il est facile de conserver chaque icône au bon endroit, avec quelques ajouts mineurs.
Le dernier bloc de code est une collection de toutes les différentes classes d'icônes mises ensemble. J'ai individuellement dimensionné chacun à 12em parce que certaines icônes semblent plus grandes ou plus petites que d'autres. Avec ce système, vous pouvez identifier chaque ensemble d’icônes afin de changer leur apparence. Et comme ils sont positionnés par rapport au conteneur, vous pouvez également utiliser les propriétés gauche / droite / haut / bas pour un alignement aisé.
Live Demo - Télécharger le code source
Dernières pensées
Bien que ce didacticiel ne soit pas particulièrement difficile, les différentes étapes de la création d’une liste de colonnes peuvent prendre beaucoup de temps. Vous devez déterminer la police d'icônes parfaite et planifier votre texte afin qu'il s'adapte parfaitement.
Cette démo devrait constituer un bon point de départ pour lancer le processus. Passez un peu de temps à réfléchir à vos propres idées et à la manière dont vous pouvez appliquer cette conception à des schémas similaires. De plus, si vous avez des commentaires ou des questions, n'hésitez pas à partager le sujet de discussion ci-dessous!