Toutes les nouvelles propriétés issues des spécifications CSS3 ont été extrêmement utiles pour la construction de conceptions d'interface utilisateur plus avancées. Les pages Web assistent à une révision radicale des méthodes utilisées pour créer des styles de mise en page typiques. Notamment, la typographie et les boutons / éléments de formulaire connaissent la plus grande transformation - et avec plus de développeurs lançant des projets open source, il ne semble pas y avoir de fin.
Pour ce tutoriel, je souhaite montrer comment nous pouvons créer quelques exemples de titres dans une page Web de base. J'utilise principalement des effets CSS3 dans la barre de navigation supérieure, ainsi que la typographie de la page. Toutes ces techniques devraient être reprises dans les nouveaux navigateurs Web conformes aux normes. De plus, il existe une multitude de techniques de conception que vous pouvez dupliquer et appliquer à tout projet. N'oubliez pas de consulter ma démo en direct pour avoir une idée de ce que nous essayons de construire!
Live Demo - Télécharger le code source
Commencer
Je crée tout d'abord une simple page Web index.html à l'aide du doctype HTML5. Nous avons seulement besoin de quelques ressources pour le style, à savoir une feuille de style unique. styles.css avec quelques polices Web Google. Beaucoup de gens pensent que ces ressources vont ralentir la vitesse de chargement de vos pages et, si nous demandons quelques documents via HTTP, le temps requis pour la connexion ne devrait pas excéder quelques centaines de millisecondes.
L'en-tête de la page et le contenu du corps sont désormais divisés à l'aide d'un système de classe de conteneur. La barre de navigation doit couvrir 100% de la largeur de la page, mais le contenu interne ne dépasse pas 1050 pixels. Cela gardera tout notre contenu centré sur la page, quelle que soit la résolution du moniteur. Nous gardons l'en-tête dans un HTML5 nav élément pour des styles plus sémantiques.
Il convient de souligner comment le texte de titre apparaît en premier dans le code HTML, même s'il est placé à droite de la navigation. Bien que nous puissions formater ceci pour apparaître comme si l'en-tête venait après Lors de la navigation, pour les robots des moteurs de recherche, nous devons nous assurer que le titre de la page vient en premier afin qu’il soit mieux classé. De plus, à mesure que la fenêtre se réduit, les styles réactifs font que les liens de navigation tombent sous l'en-tête. L'en-tête doit donc figurer en premier dans la hiérarchie.
Les liens d’éléments de liste internes sont séparés par du texte à l’aide des touches em étiquette. Ces sous-titres plus petits sont de jolis effets ajoutés à la navigation s’il ya suffisamment de place. Vous pouvez donner aux visiteurs une idée supplémentaire de ce qui se trouve sur chaque page sans apparaître excessivement conflictuel.
Contenu du corps intérieur
Je n'ai pas inclus beaucoup de nouveau contenu dans le corps puisque nous nous concentrons sur la typographie. Mais il existe 3 styles de titres uniques poussant de h1 à h3, classés par importance. Certains concepteurs peuvent choisir d'inclure également h4 et même h5 si nécessaire. La typographie Copyfitting consiste à travailler à un placement serré du contenu sur la page. Il s'agit de planifier vos mots écrits et d'adapter d'autres médias à ce contexte (images, vidéo, etc.).
Je pense que l’un des effets les plus intéressants que vous puissiez inclure est un design pull-quote ou blockquote. Notez que ces deux idées sont très différentes et servent des objectifs très différents. Dans notre exemple de démonstration, j'utilise les styles de citation tirés CSS-Tricks pour montrer comment dupliquer le contenu de zones de la page. Celles-ci semblent excellentes dans les articles de blog ou les articles en ligne où vous souhaitez mettre l’accent sur certaines phrases ou phrases.
Les guillemets sont un autre mécanisme de conception intéressant qui peut s’avérer génial sur presque toutes les pages. Celles-ci ne concernent pas le contenu de l'article, mais citent généralement quelqu'un d'autre. Les citations peuvent provenir d'anciens clients, de collègues ou de n'importe qui d'autre pour être honnête. Codrops a récemment publié un article sur la construction de citations de blocs modernes qui couvre une série d'excellentes idées pour les concepteurs de sites Web.
Manœuvrer avec CSS3
Le balisage HTML est très standard et typique de ce à quoi vous vous attendez sur une page Web. Les zones d’intérêt plus complexes résident dans la feuille de style CSS où nous pouvons appliquer des effets de transition et des tonnes d’autres propriétés CSS3 exceptionnelles. Nous devrions commencer par jeter un coup d’œil sur la structure de la page du document.
le .wrapper La classe doit être fournie sur tout conteneur dans un autre conteneur. Ainsi, par exemple, notre barre de navigation s'étend sur toute la largeur de la page, mais tout le contenu est contenu dans un div wrapper. L'extérieur #topnav container utilise une série de propriétés CSS3 associées au sélecteur de couleur rgba (). Ceci est spécifique aux développeurs Web intéressés par l’utilisation de la transparence alpha dans les teintes de couleur.
Nous pouvons constater cet effet non seulement sur l’arrière-plan, mais également sur l’ombre de la boîte. Cet effet se passe bien lorsque vous utilisez une navigation statique fixe qui fait défiler la page et suit le visiteur.
L'en-tête de page utilise une série de propriétés animées lorsque vous survolez le lien d'ancrage. Ceci est également vrai pour les nombreux éléments de navigation utilisant également la transparence alpha. Certains navigateurs plus anciens ne prennent pas en charge les styles typiques du préfixe du fournisseur, mais il existe des solutions pour tous les navigateurs.
Le style de l’en-tête s’adapte si bien parce que nous pouvons fixer la barre de navigation à une hauteur donnée, puis utiliser le hauteur de la ligne propriété pour placer le texte centré verticalement. Ainsi, dans ce scénario, même si nous redimensionnons la fenêtre du navigateur, notre logo de page flotte toujours le long du centre. Ensuite, une fois la navigation terminée, nous redimensionnons la hauteur de ligne afin que tout s’adapte en conséquence. Les effets d'animation CSS3 offrent simplement une expérience utilisateur plus agréable pour l'utilisateur.
Tendances réactives
Une grande partie du contenu du corps est déjà capable de gérer du contenu adapté aux mobiles. Ces dernières années, de nombreux articles ont été écrits sur la conception de sites Web adaptatifs. Copier votre typographie pour les plates-formes de bureau et mobiles est probablement l'une des meilleures idées que vous puissiez suivre. Cela permet à quiconque d’accéder à vos informations depuis n’importe quel appareil disposant d’un accès Internet.
Remarquez comment j'ai inclus des effets de transition sur les éléments de liste et les liens d'ancrage. Nous sélectionnons également toutes les propriétés qui doivent s'animer dans le temps, ce qui n'est vraiment pas nécessaire, mais cela a l'air fantastique. Lorsque la navigation passe en dessous de l'en-tête, toutes les marges et l'espacement des lignes se réajusteront à l'aide de transitions animées! Bien entendu, seuls les visiteurs utilisant des navigateurs Web modernes prenant en charge les transitions CSS3 verront ces effets. Mais il convient de garder en ce qui concerne une expérience utilisateur réussie.
En fait, j'ai configuré deux requêtes de média différentes lorsque l'écran touche 2 zones différentes. Tout d'abord, lorsque nous descendons un peu au-dessous de 800 pixels, les liens de navigation suppriment certaines de leurs marges. Cela permet de resserrer les liens, d’économiser de l’espace et de les empêcher de s’abaisser trop rapidement. Ensuite, après avoir descendu sous 700px, la navigation passera sous l'en-tête et nous ajusterons les nouvelles valeurs de hauteur de ligne.
Cette conception réactive pourrait être traitée de différentes façons. Vous pouvez choisir de simplement masquer les liens de navigation et de les maintenir attachés sur un lien à bascule pour les utilisateurs mobiles. Je pense que cette méthode est plus pratique pour conserver tous les styles typographiques sans sacrifier la facilité d'utilisation. L’intégralité de l’en-tête est propice à une typographie unique et sera certainement un point d’attention pour les utilisateurs.
Live Demo - Télécharger le code source
Dernières pensées
J'espère que ce didacticiel approfondira le style des pages Web à l'aide de CSS3. La typographie est toujours la facette la plus importante de toute mise en page. Internet permet aux gens d'envoyer des informations numériques à travers le monde en très peu de temps. Les concepteurs Web font le travail des messagers et des courriers avec une esthétique plus agréable.
Si vous aimez la page de démonstration, n'hésitez pas à télécharger une copie de mon code source. Vous pouvez utiliser ce code sans licence en tant que domaine public. N'hésitez pas à éditer et copier ces styles pour tout projet, commercial ou autre. L'ajout de ressources en ligne ne constitue qu'une étape de plus pour les nouveaux concepteurs qui se lancent sur le terrain. De plus, si vous avez des questions ou des commentaires, partagez-les avec nous dans la zone de discussion après discussion.