Share
Ich höre, dass dieses CSS3-Ding der letzte Schrei ist. In der Tutorial-Welt und in der Blogosphäre fließen Ressourcen, die brillante Beispiele für kreative neue Wege der Gestaltung mit CSS3-Modulen bieten. Es ist jedoch leicht zu überimplementieren und die brillante Subtilität großartiger Benutzeroberflächen zu verlieren. Im Folgenden finden Sie drei kurze Tipps zum Verwenden leistungsfähiger CSS3-Techniken auf subtile Weise.
Menschen können sehr kleine Veränderungen wahrnehmen und unterscheiden.
Unter dem Strich können die Menschen sehr kleine Veränderungen wahrnehmen und unterscheiden, die sie möglicherweise nicht bewusst wahrnehmen oder erinnern können. Ich bezweifle, dass dies für jedermann neue Informationen sind. Es ist eines der bekannteren Konzepte, die von Sensations- und Wahrnehmungsstudien verwendet werden. Manchmal kann eine Sache über eine andere erfreulich sein. Und manchmal wissen Sie nicht einmal warum.
Beachten Sie jedoch, dass das Webdesign a ist bewusst verarbeiten. Subtiles Design kann schwierig sein, weil es leicht ist, zu denken, "das braucht nur ein bisschen." Mehr."Bevor Sie es wissen, ist die Feinheit verloren.
In diesem Sinne möchte ich drei CSS3-Techniken vorstellen, mit denen unterschiedliche Formen der Subtilität für das Webdesign bereitgestellt werden können.
Transition ist ein leistungsfähiges Werkzeug, mit dem CSS im Wesentlichen von einem Endpunkt zum anderen animiert werden kann. Die Syntax enthält ein ziemlich umfangreiches Toolset: Eigenschaft, Dauer und Beschleunigung. Jedes dieser Stücke kann variiert werden, um unterschiedliche Subtilitätsniveaus bereitzustellen. Oft dauert es einfach nur zu spielen - wie es oft bei Effekten der Fall ist. Mit anderen Worten, mit den Werten spielen, bis es ist scheint richtig zu sein. Mach dich nicht verrückt. Es ist leicht, sich selbst bei einer so kurzen Liste von Variablen zu verlieren.
Es ist nicht ungewöhnlich, dass Navigationselemente die Farbe ändern, wenn sich die Maus im Schwebeflug befindet. Der Übergang kann diese Farbänderung etwas weicher machen.
.nav li a color: # 282828; Textdekoration: keine; -webkit-Übergang: Farbe .1s Easy-In-Out; -Moz-Übergang: Farbe .1s Easy-In-Out; -o-Übergang: Farbe .1s Easy-In-Out; Übergang: Farbe .1s Easy-In-Out; .nav li a: hover Farbe: # 808080;
Der Farbwechsel ist hier nicht subtil. Es ist deutlich erkennbar. Was ist subtil ist das Glätten dieser Farbänderung.
Der Trick, dies subtil zu halten, ist die Dauer. Wenn es zu lang ist, ist der Effekt viel zu spürbar. Die Navigation kann schnell lästig werden, wenn man darüber schwebt und amateurhaft aussieht.
Demo ansehen.
Falls Sie sich noch nicht mit CSS3 befasst haben, ist es wichtig, die Reihenfolge der browserspezifischen Deklarationen zu beachten. Eigentlich ist es nur wichtig zu wissen, dass die nicht-browserspezifische Deklaration als letztes in der Liste erscheint. CSS nimmt die letzte Deklaration und macht sie im Konfliktfall wichtiger. Sobald eine tatsächliche Übergangsspezifikation veröffentlicht wird, implementieren vermutlich alle Browser das Modul ohne das proprietäre Präfix benötigen. Somit ist Ihr CSS etwas zukunftsfähig, ohne dass für die aktuellen Implementierungen echte Kosten anfallen.
Beachten Sie auch, dass sich die Übergänge im befinden Elementstil, nicht der Schwebeflug. Dadurch wird der Übergang sowohl beim Mouse-Over als auch beim Mouse-Off bereitgestellt.
Mit dem Selektor nth-of-type oder nth-child können Muster in einer Reihe von Elementen deklariert und Stile entsprechend angewendet werden. In einer Tabelle könnte nth-child beispielsweise jede zweite Zeile mit folgender Farbe einfärben: nth-child (ungerade). Schauen wir uns ein Beispiel an, das vielleicht nicht ganz so klar ist.
Wir nehmen ein ziemlich normales Navigations-Markup…
… Und etwas Styling anwenden.
.nav li: n-te des Typs (ungerade) Margin-Top: 5px; .nav li: nth-of-type (gerade) margin-top: 12px; .nav li: nth-of-type (2n + 2) margin-right: 0; .nav li: n-te des Typs (2n + 3) linker Rand: 8px; Rand rechts: 25px;
Dadurch wird ein gestaffelt aussehendes Menü mit ein paar hohen Elementen, ein paar niedrigen Elementen und ein paar Sets erzeugt, die gepaart aussehen. Der visuelle Unterschied zwischen diesem und einem Inline-Menü ist klar.
Was ist also so subtil daran? Die Feinheit ist hier zweifach.
Vielleicht sieht ein Besucher zuerst "Zuhause". Dieser Besucher wird wahrscheinlich feststellen, dass er oder sie sich bereits auf der Homepage befindet. Er oder sie kann sehr gut als nächstes "Arbeit" sehen. *klicken*. Nachdem sie sich einige Arbeiten angesehen haben, haben sie vielleicht schon "Blog" als nächstes gesehen, aber vielleicht wird die Gruppierung stärker und ihr Verlangen wird auf "About" gezogen. Der Designer steuert den Besucher nun mithilfe eines Navigationslayouts. Er oder sie hat Hinweise gegeben, wohin die Besucher der Reihe nach gehen sollen.
Wird dies jedes Mal passieren? Absolut nicht. Wird es manchmal passieren? Ich würde darauf wetten.
Das ist der Punkt der Subtilität. Es beeinflusst den Benutzer nicht übermäßig, aber es kann gelegentlich nützliche Hinweise oder Motivationen geben.
Hier ist ein einfacher Weg, um Subtilität in ein Design einzuführen. Ironischerweise hat es wahrscheinlich die komplizierteste Syntax da draußen. Nicht nur das, auch die Syntax der Browser unterscheidet sich erheblich. Lass uns einen Blick darauf werfen.
Angenommen, Sie haben ein ziemlich einfaches Kontaktformular (E-Mail, Nachricht).
Formulareingabe [Typ = Text], Formularbereich Hintergrundbild: -webkit-gradient (linear, links unten, links oben, Farbstopp (0, rgb (255,255,255)), Farbstopp (1, rgb (248,248,248) )); Hintergrundbild: -moz-linearer Gradient (unten in der Mitte, rgb (255,255,255) 0%, rgb (248,248,248) 100%); Umriss: keine; border: solid 1px #ccc;
Das ist schon eine vollständige Erklärung, oder? Und das betrifft nur zwei Browser!
Ich gehe nicht weiter alles der Syntax, weil andere das für mich getan haben. Weitere Informationen zu Nettuts + finden Sie unter "CSS-Gradienten". Wenn Sie fertig sind, sprechen wir über Subtilität.
Der Verlauf in diesen Textbereichen ist fast nicht wahrnehmbar. Wenn Sie jedoch mit dem CSS spielen und die Grenze entfernen, kann ich Ihnen versichern, dass es da ist.
Wenn Sie es immer noch nicht in diesem zweiten Bild sehen können, nehmen Sie Ihren Kopf und bewegen Sie ihn zur Seite des Monitors, so dass Sie den Monitor in einem ziemlich steilen Winkel betrachten. Sieh es jetzt? Wenn nicht, lehne ich es ab, zur Rechenschaft gezogen zu werden. Ich sehe es, also muss dein Monitor kaputt sein. :)
Beachten Sie jedoch, wie nahe die RGB-Farben in der CSS sind. Der obere Bereich der Texteingabe und der Textbereich sind immer etwas schattiert. Dies ist ein Beispiel extremer Subtilität. Beim Ausfüllen eines Formulars ist es unwahrscheinlich, dass jemand diesen Farbverlauf bemerkt. Die Menschen finden Ihre Form jedoch möglicherweise etwas ansprechender als andere. auch wenn sie nicht wissen warum.
Gut haben wir fast machte es durch und den gesamten CSS3-Artikel, ohne Browser-Probleme zu diskutieren. Wie haben wir das geschafft? Zum einen hatte der Code keinen großen Stellenwert. Noch wichtiger ist jedoch, dass ich mir das Beste zum Schluss aufgehoben habe.
Wenn Sie sich die Demo für dieses Lernprogramm in einem Webkit-Browser anzeigen und diese mit einem Firefox-Browser vergleichen, werden Sie einige Unterschiede feststellen. Wenn Sie zu IE wechseln, werden Sie noch weitere Unterschiede feststellen. Eine nette Sache über die Verwendung von Subtilität ist, dass die Leute wahrscheinlich nichts bemerken, wenn der subtile Unterschied nicht vorhanden ist. Mit anderen Worten funktioniert die Farbänderung im ersten Beispiel immer noch ohne den Übergang. es ist nur ein bisschen weniger glatt. Wenn der nth-of-Typ nur eine Gruppe basierend auf Gemeinsamkeiten verwenden sollte, wird es keinem Besucher egal sein, ob diese Gruppierung nicht vorhanden ist. Das Menü funktioniert immer noch. Und die Steigung? Erinnern Sie sich, wie schwer Sie es bemerken mussten auch wenn man ihm genau sagt wo es war?
Machen Sie es zu einer Chance für Kreativität, statt zu einer unüberwindbaren Belastung.
Wahrscheinlich ist der rationalste Widerstand gegen das "unterschiedliche Aussehen in verschiedenen Browsern" beim Webdesign so viele (vielleicht die meisten) Kunden wollen das genau gleiche Website in allen gängigen Browsern. Wenn diesbezüglich kein Platz ist, und Sie Ihre Stromrechnung bezahlen müssen, tun Sie alles, was Sie brauchen, um diese wichtige abgerundete Ecke in allen IE-Versionen in den frühen Morgenstunden zu bringen.
Einige Kunden können jedoch über die Vorteile eines Designs an einem Ort und eines anderen an einem anderen Ort unterrichtet und beeinflusst werden. Wenn Sie beispielsweise ein etwas anderes Erscheinungsbild akzeptieren, können Sie HTTP-Anforderungen und überzählige HTML-Elemente drastisch reduzieren, wenn mit vielen Bildern Ränder und Schatten erstellt werden. Oder, wenn Sie wie ich sind, haben Sie einige persönliche Projekte und genießen eine gute Herausforderung (z. B. dasselbe Browsererlebnis "Erlebnis" bietet, ohne immer das gleiche Layout zu haben). Oder vielleicht haben Sie zwei verschiedene Designs, die Ihnen wirklich gefallen und Sie sich nicht entscheiden können, welches Sie implementieren möchten. Hier ist eine Gelegenheit, einen in einem Browser und den anderen in einem anderen Browser zu implementieren, der aus einem einzigen Stylesheet stammt.
Der allgemeine Punkt hier ist, dass die Browser-Inkompatibilität a ist Tatsache des aktuellen Webs, wenn Sie versuchen, CSS3 zu verwenden. Machen Sie es also zu einer Chance für Kreativität, anstatt zu einer unüberwindbaren Belastung.
Die Subtilität hier ist nicht genau eine Design Subtilität. Stattdessen ist es eher ein Designer Subtilität. Nach meiner Erfahrung verwenden die meisten Leute nur einen Browser. Web-Profis vergessen das manchmal, wenn wir drei Versionen von fünf verschiedenen Browsern auf jedem Computer installieren, auf den wir stoßen.
Wenn also ein Benutzer, der nur über das Internet verfügt, auf Ihrer Website auftritt und dessen Inhalt klar ist und er oder sie diese Erfahrung mag, haben Sie Ihr Design erfolgreich abgeschlossen. Wenn ein anderer Benutzer auf Ihrer Website in Chrome auftritt und dessen Erfahrung genießt und der Inhalt klar ist, haben Sie Ihr Design erfolgreich abgeschlossen. Und vielleicht schätzte dieser Besucher ein paar zusätzliche Leckerbissen. Kudos Am wichtigsten ist jedoch, wenn Sie jemals die Gelegenheit erhalten haben, sich hinzusetzen und zuzusehen, wie dies gleichzeitig geschieht, haben Sie es geschafft, einen subtilen Spaß zu haben.
Accentsconagua