Share
J'entends cette chose CSS3 est à la mode. Des ressources volent dans le monde des didacticiels et dans la blogosphère, fournissant de brillants exemples de nouvelles méthodes créatives de conception utilisant des modules CSS3. Cependant, il est facile de surimplémenter et de perdre la subtile subtilité des superbes interfaces utilisateur. Voici trois astuces pour utiliser des techniques CSS3 puissantes de manière subtile.
Les gens sont capables de percevoir et de distinguer de très petits changements.
L’essentiel, c’est que les gens sont capables de percevoir et de distinguer de très petits changements qu’ils ne peuvent pas consciemment remarquer ou pouvoir rappeler. Je doute que cette information soit nouvelle pour quiconque. C'est l'un des concepts les plus connus mis en avant par les études de sensation et de perception. Parfois, une chose peut être agréable par rapport à une autre. Et parfois, vous ne savez même pas pourquoi.
Cependant, gardez à l’esprit que la conception Web est un conscient processus. Un design subtil peut être difficile car il est facile de penser «qu’il faut juste un peu plus."Avant de vous en rendre compte, la subtilité est perdue.
Dans cet esprit, je voudrais présenter trois techniques CSS3 qui peuvent être utilisées pour fournir diverses formes de subtilité à la conception de sites Web..
La transition est un outil puissant qui permet aux CSS d’animer essentiellement d’un point de terminaison à un autre. La syntaxe regroupe un ensemble d'outils assez riche: propriété, durée et accélération. Chacune de ces pièces peut être modifiée pour offrir différents niveaux de subtilité. Souvent, il suffit de jouer - comme le font souvent les effets. En d'autres termes, jouer avec les valeurs jusqu'à ce qu'il semble juste. Mais ne te rend pas fou. Il est facile de se perdre en peaufinant une liste aussi courte de variables.
Il n'est pas rare que les éléments de navigation changent de couleur lorsque la souris est en survol. La transition peut rendre la couleur un peu plus douce.
.nav li a color: # 282828; texte-décoration: aucun; -webkit-transition: color .1s easy-in-out; -moz-transition: la couleur .1s easy-in-out; -o-transition: la couleur est facile à insérer; transition: couleur .1 facile à insérer; .nav li a: survol color: # 808080;
Le changement de couleur n'est pas subtil ici. C'est clairement perceptible. Quoi est subtile est le lissage de ce changement de couleur.
Le truc pour garder ce subtil est la durée. Si c'est trop long, l'effet sera beaucoup trop perceptible. La navigation peut rapidement devenir fastidieuse pour passer la souris et avoir l’air amateur..
Voir la démo.
Si vous n’avez pas encore exploré CSS3, il est important de noter l’ordre dans lequel les déclarations spécifiques au navigateur sont fournies. En fait, il est important de noter que la déclaration non spécifique au navigateur vient en dernier dans la liste. CSS prend la dernière déclaration et la rend plus importante en cas de conflit. Une fois qu'une spécification de transition réelle est publiée, tous les navigateurs implémenteront probablement le module. sans pour autant ayant besoin du préfixe propriétaire. Ainsi, votre CSS devient un peu prêt pour l'avenir sans aucun coût réel pour les implémentations actuelles.
Notez également que les transitions sont dans la style d'élément, pas son vol stationnaire. Cela fournira la transition à la fois sur la souris et sur la souris..
Le sélecteur nth-of-type ou nth-child permet aux modèles d'être déclarés dans une série d'éléments et d'appliquer des styles en conséquence. Par exemple, dans un tableau, nth-child peut colorier une ligne sur deux en utilisant: nth-child (impair). Regardons un exemple qui peut ne pas être aussi clair.
Nous allons prendre un joli balisage de navigation standard…
… Et appliquez un peu de style.
.nav li: nième de type (impair) marge supérieure: 5px; .nav li: nième de type (pair) margin-top: 12px; .nav li: nième de type (2n + 2) marge-droite: 0; .nav li: nième de type (2n + 3) marge gauche: 8px; marge droite: 25px;
Cela créera un menu avec une apparence décalée avec quelques éléments hauts, quelques éléments bas et quelques ensembles qui ont l'air appariés. La différence visuelle entre ceci et un menu en ligne est claire.
Alors quoi de si subtil à ce sujet? La subtilité ici est double.
Alors, peut-être qu'un visiteur voit d'abord "Home". Ce visiteur réalisera probablement qu'il est déjà sur la page d'accueil. Il ou elle peut très bien voir "travail" à côté. *Cliquez sur*. Après avoir visionné certains travaux, ils ont peut-être déjà vu "Blog", mais le groupe finit par devenir plus fort et leur désir est amené à "À propos". Le concepteur conduit maintenant le visiteur à l'aide d'une disposition de navigation. Il ou elle a fourni des indications sur l'endroit où les visiteurs devraient aller, en séquence.
Cela se produira-t-il à chaque fois? Absolument pas. Cela arrivera-t-il parfois? Je parierais.
C'est le point de subtilité. Cela n’influence pas de manière écrasante l’utilisateur, mais il peut fournir des astuces ou des motivations utiles de temps en temps..
Voici un moyen simple d'introduire de la subtilité dans un dessin. Ironiquement, c'est probablement la syntaxe la plus compliquée qui soit. Non seulement cela, mais il a aussi des syntaxes très différentes entre les navigateurs. Nous allons jeter un coup d'oeil.
Dans un formulaire de contact assez simple (email, message), voici quelques styles:
entrée de formulaire [type = texte], formulaire textarea image-arrière-plan: -webkit-gradient (linéaire, en bas à gauche, en haut à gauche, couleur-stop (0, rgb (255,255,255)), couleur-stop (1, rgb (248,248,248) )); image d'arrière-plan: -moz-linear-gradient (centre bas, rgb (255,255,255) 0%, rgb (248,248,248) 100%); contour: aucun; bordure: solide 1px #ccc;
C'est une déclaration assez complète, n'est-ce pas? Et cela ne concerne que deux navigateurs!
Je ne vais pas entrer dans tout de la syntaxe, parce que d'autres l'ont fait pour moi. Reportez-vous à "Comprendre les dégradés CSS" sur Nettuts + pour une meilleure compréhension. Quand tu auras fini, parlons de subtilité.
Le dégradé dans ces zones de texte est presque imperceptible. Cependant, si vous jouez avec le CSS et sortez la frontière, je vous assure que c'est là.
Si vous ne parvenez toujours pas à voir la seconde image, prenez votre tête et déplacez-la sur le côté de votre moniteur, de manière à visualiser le moniteur sous un angle assez prononcé. Voyez maintenant? Sinon, je refuse d'être tenu pour responsable. Je le vois, donc ton moniteur doit être cassé. :)
Quoi qu'il en soit, notez à quel point les couleurs RVB sont proches dans le fichier CSS. Le haut de la saisie de texte et textarea sont ombrés très légèrement. Ceci est un exemple de subtilité extrême. En remplissant un formulaire, il est peu probable que quelqu'un remarque ce gradient. Cependant, les gens peuvent trouver votre forme un peu plus attrayante que d’autres; même s'ils ne savent pas pourquoi.
Eh bien, nous avons presque fait traverser et article entier CSS3 sans discuter des problèmes de navigateur. Comment avons-nous géré cela? D'une part, il n'y avait pas beaucoup d'emphase sur le code. Plus important encore, j’avais gardé le meilleur pour la fin..
Si vous regardez la démonstration de ce didacticiel dans un navigateur Webkit, puis que vous comparez cela à un navigateur Firefox, vous remarquerez quelques différences. Si vous passez à IE, vous remarquerez des différences encore plus grandes. Une bonne chose à propos de l’utilisation de la subtilité est que si la différence subtile n’est pas là, les gens ne le remarqueront probablement pas. En d'autres termes, le changement de couleur dans le premier exemple fonctionne toujours sans la transition; c'est juste un peu moins lisse. Si le seul objet de nth-of-type était de grouper sur la base de points communs, aucun visiteur ne s'en souciera si ce groupe n'est pas présent. Le menu fonctionne toujours. Et le dégradé? Rappelez-vous à quel point vous avez eu du mal à le remarquer même quand on dit exactement où il était?
Faites-en une opportunité pour la créativité, au lieu d'un fardeau insurmontable.
L’opposition la plus rationnelle à la conception de sites Web est probablement l’opposition la plus rationnelle à l’apparition de "différents regards dans différents navigateurs" (peut-être plus) les clients voudront le exact même site dans n'importe quel navigateur principal. S'il n'y a pas de place pour bouger là-dessus et que vous ayez à payer votre facture d'électricité, faites tout ce qui est nécessaire pour ramener à la nuit des temps ce virage important dans toutes les versions d'IE.
Cependant, certains clients peuvent être éduqués et convaincus des avantages qu’il ya à avoir un design dans un endroit et un autre ailleurs. Par exemple, accepter une apparence légèrement différente peut réduire considérablement le nombre de requêtes HTTP et d'éléments HTML excédentaires, si de nombreuses images sont utilisées pour créer des bordures et des ombres, entre autres choses. Ou, si vous êtes un peu comme moi, vous avez des projets personnels et vous relevez d'un bon défi (par exemple, fournir le même navigateur "d'expérience" sans avoir toujours la même présentation). Ou peut-être avez-vous deux conceptions différentes que vous aimez vraiment et que vous ne pouvez pas choisir. Voici une opportunité d'implémenter l'un dans un navigateur et l'autre dans un autre, à l'aide d'une seule feuille de style.
Le problème général est que l’incompatibilité des navigateurs est un problème fait du Web actuel lorsqu’on essaie d’utiliser CSS3. Alors, faites-en une opportunité pour la créativité, au lieu d'un fardeau insurmontable.
La subtilité ici n'est pas exactement un conception subtilité. Au lieu de cela, c'est plus d'un designer subtilité. D'après mon expérience, la plupart des gens n'utilisent qu'un seul navigateur. Les professionnels du Web oublient que parfois nous installons trois versions de cinq navigateurs différents sur chaque machine rencontrée.
Ainsi, si un utilisateur exclusivement IE se trouve sur votre site et que son contenu est clair et qu'il / elle aime l'expérience, vous avez réussi dans votre conception. Si un autre utilisateur se connecte sur votre site dans Chrome et bénéficie de son expérience et que le contenu est clair, vous avez réussi votre conception. Et peut-être ce visiteur a-t-il apprécié quelques informations supplémentaires. Gloire. Mais surtout, si vous avez l’occasion de vous asseoir et de regarder cela se produire simultanément, vous aurez réussi à vous amuser de manière subtile..
Accentsconagua