Inhalt
- 01. Ordnen Sie Bilder den Farbschemata der Site zu
- 02. Teilen Sie den Platz in der letzten Zeile eines Rasters gleichmäßig
- 03. Erstellen Sie Partikelanimationen mit Box-Shadow
- 04. Polyeder mit Transformationen animieren
- 05. Master ’calc ()’ zur Positionierung
- 06. Machen Sie das Boxmodell mit "Box-Sizing" gesund.
- 07. Mit CSS vertikal zentrieren
- 08. Zielen Sie auf eine Bank verwandter Objekte
- 09. Silbentrennung kontrollieren
- 10. Nutzen Sie das Schreiben von Modi
- 11. Verwenden Sie Farbverläufe auf ungewöhnliche Weise
- 12. Verwenden Sie String-Matching für Links
- 13. Lassen Sie FOUT für Sie arbeiten
- 14. Erkunden Sie SVG nach Hintergründen
- 15. Fokussieren Sie Benutzer mit 3D-Übergängen
- 16. Erstellen Sie kreisförmige Menüs mit CSS und Mathematik
- 17. Animieren Sie Links beim Schweben
- 18. Erstellen Sie einfache Keyframe-Animationen
- 19. Erstellen Sie schwebende 3D-Effekte mit Schatten
- 20. Aktualisieren Sie die Seitenelemente mit ": Ziel".
- 21. Geben Sie Feedback mit subtilen Animationen
- 22. Bereiten Sie sich auf "Will-Animieren" vor.
- 23. Humanisieren Sie die Eingabefelder
- 24. Halten Sie an und spielen Sie CSS-Animationen ab
- 25. Verwenden Sie keine CSS-Variablen
Irgendwann mit jeder Technologie hat man das Gefühl, dass so ziemlich alles getan wurde, was getan werden kann. Wenn etwas nicht mehr ganz so neu und glänzend ist, schwindet das Interesse und die Aufmerksamkeit wird auf das nächste große Ding gelenkt. Dies war in der Webbranche häufig der Fall, die dazu neigt, sich von einem bestimmten Aspekt der Technologie schrecklich zu begeistern, bevor sie früher oder später in die Welt verbannt wird.
Als CSS zum ersten Mal erschien, war es revolutionär und hat sich im Laufe der Zeit weiterentwickelt, um es Designern zu ermöglichen, flexible, straff gestaltete und schöne Webseitenlayouts zu erstellen. In letzter Zeit gab es jedoch von verschiedenen Seiten den Vorschlag, dass CSS müde ist und vielleicht seine Zeit in der Sonne vorbei ist.
Ich möchte zeigen, dass es in der Welt von CSS immer noch viel Aufregung und Leben gibt, sei es in den neuesten Eigenschaften, die Sie möglicherweise noch nicht erforscht haben, oder indem Sie einen Aspekt von CSS auf eine Weise verwenden, die Sie zuvor nicht in Betracht gezogen haben.
Hier einige Tipps von einigen der besten CSS-Experten der Branche.
(Hinweis: Einige Techniken in dieser Funktion sind auf dem neuesten Stand und werden möglicherweise nicht in allen Browsern vollständig unterstützt. Testen Sie gründlich und stellen Sie sicher, dass Fallbacks vorhanden sind, bevor Sie Arbeiten live schalten.)
01. Ordnen Sie Bilder den Farbschemata der Site zu
Christopher Schmitt, Konferenzorganisator
Konferenzen haben ihre eigenen Farbschemata und mit vielen Lautsprechern kann der Workflow für die Verwaltung von Porträts komplex sein. Das manuelle Anwenden von Filtern lässt sich nicht skalieren und setzt voraus, dass Sie beispielsweise auf eine bestimmte Photoshop-Aktion zugreifen können. Ich verwende jetzt hochauflösende Graustufen-PNGs und füge Töne mithilfe von CSS-Filtern hinzu. Auf diese Weise kann ich jedes Porträt dem Schema eines Ereignisses zuordnen und Bilder für mehrere Themen wiederverwenden. Ich brauche nur eine neue CSS-Regel für jede. Sehen Sie sich eine Demo an.
02. Teilen Sie den Platz in der letzten Zeile eines Rasters gleichmäßig
Stephen Hay, Designer und Autor
Wenn Sie eine unbekannte Anzahl von Elementen haben, die in einem Raster angezeigt werden sollen, können Sie mit Flexbox die letzte Zeile gleichmäßig aufteilen. Wenn es also nur ein Element gibt, nimmt es die gesamte Zeile ein. Wenn zwei Elemente vorhanden sind, wird die Zeile in zwei Hälften geteilt und so weiter. Sehen Sie sich eine Demo an.
03. Erstellen Sie Partikelanimationen mit Box-Shadow
Ana Tudor, Programmiererin und Mathematikfanatikerin
Durch Mischen Box Schatten Mit etwas Mathematik und Sass können Sie 2D-Kurven grafisch darstellen, 3D-Bewegungen emulieren und verrückte Partikelanimationen erstellen, die jeder für Leinwandanimationen halten wird! Sehen Sie sich eine Demo und eine andere an.
04. Polyeder mit Transformationen animieren
Ana Tudor, Programmiererin und Mathematikfanatikerin
Sie haben wahrscheinlich reine CSS-Polygone gesehen, die mit Rahmen erstellt wurden, aber wir haben ein viel leistungsfähigeres Tool in der verwandeln Eigentum. Durch Verketten und Anwenden von Transformationen auf verschachtelte Elemente können komplexe Polygone mit Bildhintergründen oder -rändern und transparenten Innenräumen erstellt werden. Mithilfe von 3D-Transformationen können wir diese 2D-Formen zu Polyedern kombinieren und die Volumenkörper auf eine Weise zusammenführen, entfalten, explodieren oder rekombinieren lassen, die leicht mit WebGL verwechselt werden kann. Sehen Sie sich eine Demo an.
05. Master ’calc ()’ zur Positionierung
Ana Tudor, Programmiererin und Mathematikfanatikerin
ich liebte calc () von dem Moment an, als ich es entdeckte. Es ist nützlich, um Ränder, Auffüllungen oder Bemaßungen zu zähmen, und kann ein Lebensretter sein, wenn es zum Positionieren oder Bemessen von Hintergründen, innerhalb von Verläufen oder Transformationen verwendet wird und nicht nur mit denselben alten Einheiten kombiniert wird, sondern auch mit den neuen und coolen Ansichtsfenstern.
06. Machen Sie das Boxmodell mit "Box-Sizing" gesund.
Sawyer Hollenshead, Entwickler und Designer von Oak Studios
Benutzen Box-Größe um deine geistige Gesundheit zu retten. Ohne sie wird ein Element mit einer definierten Breite von 250 Pixel und 25 Pixel Polsterung zu einer Breite von 300 Pixel kombiniert, was das Mischen von Pixeln und Prozentsätzen schwierig macht. Mit Box-Größe:Rahmenbox Ränder und Polster werden stattdessen innerhalb der definierten Breite platziert.
07. Mit CSS vertikal zentrieren
Trent Walton, Paravel-Gründer
In der Vergangenheit war es schwierig, etwas mit CSS vertikal zu zentrieren, z. B. wenn Sie ein Bild mit angrenzendem Text haben, das vertikal ausgerichtet werden soll. Anstatt zu stampfen und zu fluchen, verwenden Sie Flexbox, um Probleme mit der Ausrichtung zu lösen. Sehen Sie sich eine Demo an.
08. Zielen Sie auf eine Bank verwandter Objekte
Jonathan Smiley, Zurb-Partner und Designleiter
Reduzieren Sie die CSS-Linienstärke, indem Sie ungefähre Attributselektoren für Klassennamen verwenden, um auf eine große Bank verwandter Objekte abzuzielen, anstatt jeder einzelnen Klasse gemeinsame Attribute zuzuweisen. Zum Beispiel ... [class * = "- block-grid-"] {} ... würde auf Folgendes abzielen: .small-block-grid-3 .large-block-grid-5
09. Silbentrennung kontrollieren
Savid Storey, offener Web-Anwalt
Die Silbentrennung wird im Druck als selbstverständlich angesehen, und einige Entwickler verwenden die Bindestriche Immobilien online, aber nur wenige kennen andere Eigenschaften, die eine feinere Kontrolle bieten. Wenn Sie nicht aufpassen, erhalten Sie Bindestrichleitern, auf denen Bindestriche über mehrere Zeilen hinweg verwendet werden. Eine allgemeine Faustregel ist nicht mehr als zwei in einer Reihe, die Sie mit steuern können Bindestrich-Grenzlinien. Ebenfalls, Bindestrich-Limit-Zeichen Mit dieser Option können Sie die Mindestlänge eines Wortes mit Bindestrich sowie die Mindestanzahl von Zeichen vor und nach dem Bindestrich angeben.
10. Nutzen Sie das Schreiben von Modi
David Storey, offener Web-Anwalt
In den Schreibmodi können Sie die Richtung definieren, in die der Text fließt. Einige ostasiatische Texte sind vertikal geschrieben, wobei die Linien von rechts nach links wachsen und mit gekennzeichnet sind Schreibmodus: vertikal-rl (tb-rl im IE). Vertikaler Text wird in europäischen Schriftsystemen nicht wirklich verwendet, kann jedoch für Tabellenüberschriften nützlich sein, wenn Sie nur begrenzten horizontalen Platz haben.
11. Verwenden Sie Farbverläufe auf ungewöhnliche Weise
Ruth John, Designerin
Hintergrundverläufe können gut aussehen, wenn sie mit Rändern und Aufzählungszeichen verwendet werden. Ich verwende sowohl in meinem Blog als auch mit einem Präprozessor ein Mixin mit dem wiederverwendeten Code, um ihn nicht manuell zu wiederholen. Gehen Sie nicht zu verrückt, da Farbverläufe prozessorlastig sein können. SCSS-Mixin für Listenaufzählungszeichen:
@mixin gradedBullet ($ color) {Hintergrundbild: linearer Farbverlauf (links, aufhellen ($ color, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color) 15%) 30px, transparent 31px); }}
12. Verwenden Sie String-Matching für Links
Ruth John, Designerin
In meinem Blog habe ich CSS-Attributselektoren mit Zeichenfolgenübereinstimmung verwendet, um soziale Symbole zu formatieren. Diese erscheinen in meinem Blog, manchmal mit Text und manchmal ohne, aber immer mit einem Symbol. Um den richtigen Link mit dem richtigen sozialen Symbol zu gestalten, verwende ich eine Zeichenfolgenübereinstimmung auf der href Attribut des Ankerelements. ich benutze *= so die href auf dem Ankerelement muss nur die von mir angegebene Zeichenfolge enthalten.
/ * für alle sozialen Links * / .social a: before {display: inline-block; Polsterung rechts: 30px; Schriftfamilie: ’FontAwesome’;} / * Jeder spezifische Link * / .social a [href * = "twitter"]: before {content: " f099"; Farbe: # 52ae9f;} .social a [href * = "github"]: vor {content: " f09b"; Farbe: # 5f2e44;} .social a [href * = "feed"]: vor {content: " f09e"; Farbe: # b47742;}
13. Lassen Sie FOUT für Sie arbeiten
Jason Pamental, Principal bei H + W Design
Das Web basiert auf der Voraussetzung, dass Inhalte bereitgestellt werden sollen, auch wenn der Browser den Bling nicht rendern kann. Das langsame Laden von Web-Schriftarten kann frustrierend sein, da FOUT (Flash Of Unstyled Text) beim Herunterladen von Schriftarten durch Navigation und Textfluss beeinträchtigt wird. Google und Typekit geben eine Antwort: den Web-Font-Loader. Durch Einfügen von Klassen in eine Seite, basierend auf dem Ladestatus von Schriftarten, können Sie Fallbacks mit diesen Klassen formatieren, um den Reflow auf ein Minimum zu beschränken und das WebKit-Syndrom für unsichtbare Inhalte zu beseitigen. Sehen Sie sich eine Demo an.
14. Erkunden Sie SVG nach Hintergründen
Emil Björklund, inUse Webentwickler
Die einzigen Browser ohne SVG-Unterstützung sind IE8 und niedriger sowie Android 2 WebKit. Daher ist die Verwendung von SVG für CSS-Hintergründe möglich, insbesondere zusammen mit einer PNG-Fallback-Lösung wie Grunticon. SVG kann durch CSS gestaltet werden, und es gibt ein interessantes Durchbluten der CSS-Eigenschaften (Filter!) Aus SVG, mit denen wir spielen können, wenn sie auf HTML angewendet werden.
15. Fokussieren Sie Benutzer mit 3D-Übergängen
Emil Björklund, inUse Webentwickler
Verwenden von 3D-Transformationen und Verwenden der Z-Dimension in Benutzeroberflächen kann sehr nützlich sein, insbesondere zum Ausblenden / Anzeigen oder Reduzieren / Erweitern von Inhalten. In solchen Situationen ist es auch recht einfach, auf einen 2D-Übergang oder gar keinen Übergang zurückzugreifen. Es ist ein Bereich, in dem eine kleine progressive Verbesserung einen langen Weg gehen kann.
16. Erstellen Sie kreisförmige Menüs mit CSS und Mathematik
Sara Soueidan, Frontend-Entwicklerin
Zirkuläre Menüs sind in mobilen Apps beliebt, und Sie können CSS-Transformationen und -Übergänge verwenden, um ein einfaches kreisförmiges Menü zu erstellen. Dieses Menü kann geändert und angepasst werden, um auch ein nach oben oder unten öffnendes Menü zu erstellen. In CSS gibt es keine direkte Möglichkeit, ein Element diagonal zu übersetzen. Sie können jedoch den Wert des Kreisradius verwenden, auf dem Sie die Elemente positionieren möchten, und eine einfache mathematische Regel anwenden, um die horizontalen und vertikalen Übersetzungswerte zu berechnen, die an das übergeben werden sollen translateX () und translateY () Funktionen. Auf diese Weise erhalten Sie eine Diagonale Übersetzung, um die Menüelemente an die richtigen Positionen im Kreis zu verschieben. Das Klickereignis, das das Menü schließt / öffnet, kann mit JavaScript behandelt werden, oder Sie können noch einen Schritt weiter gehen und mithilfe eines CSS-Checkbox-Hacks ein Nur-CSS-Menü erstellen. In meiner Demo verwende ich JavaScript und die HTML5-classList-API, die nicht in allen Browsern unterstützt wird. Daher müssen Sie die Demo in einem modernen Browser anzeigen, damit sie funktioniert, oder den jQuery-Code auskommentieren, anstatt die classList-API zu verwenden Code.
Sehen Sie sich eine Demo und ein vollständiges Tutorial an. Beispiel für einen CSS Checkbox-Hack.
17. Animieren Sie Links beim Schweben
Paul Lloyd, Interaktionsdesigner von The Guardian
Schwebezustände sollten nicht als Grundlage für die Ausführung einer Aktion oder die Bereitstellung wichtiger Informationen dienen. Sie können jedoch die Benutzeroberflächen für mausbasierte Benutzer verbessern. Auf 24ways.org werden Artikeltitel angezeigt, wenn Sie mit der Maus über Links in der vorherigen / nächsten Navigation fahren. Dies wurde durch die Schaffung eines erreicht ::nach dem Pseudoelement, das generierten Inhalt enthält, der aus dem Wert von a stammt Daten- Attribut, bei dem ein CSS-Übergang angewendet wird, damit er beim Hover angezeigt wird. Sehen Sie sich eine Demo an.
18. Erstellen Sie einfache Keyframe-Animationen
Paul Lloyd, Interaktionsdesigner von The Guardian
Auf 24ways.org haben wir Zusammenfassungen mit animierten Eckklappen versehen, die beim Schweben geöffnet wurden. Dies wurde durch Kombinieren der @keyframes Regel mit der Animationseigenschaft, wobei die Position eines Hintergrundbilds geändert wird, um eine Sprite-basierte Animation zu erzielen. Der Trick besteht darin, die Anzahl der Frames, die Sie in Ihrem Animationssprite haben, mit dem zu deklarieren Schritte() Wert. Sehen Sie sich eine Demo an.
19. Erstellen Sie schwebende 3D-Effekte mit Schatten
Catherine Farman, Happy Cog-Entwicklerin
Für ein kürzlich durchgeführtes Projekt war ein schwebendes Produktfoto mit einem runden Schatten darunter erforderlich, wodurch ein 3D-Effekt beim Aufspringen vom Bildschirm erzeugt wurde. Der Schatten verwendet mehrere CSS3-Funktionen: Randradius Alpha-Transparenz und Box Schatten. Es eignet sich gut für Produktraster, zur Präsentation von Bildern in einem Homepage-Helden oder für jedes skurrile Design mit skeuomorpher Neigung. Sehen Sie sich eine Demo an.
20. Aktualisieren Sie die Seitenelemente mit ": Ziel".
Simon Madine, leitender Webentwickler von HeRe
CSS ist keine Programmiersprache im üblichen Sinne, aber Sie können trotzdem clevere Dinge tun, ohne auf JavaScript zurückgreifen zu müssen. Zum Beispiel die :Ziel Die Pseudoklasse wird auf Elemente angewendet, die das Ziel eines angeklickten Links sind.
Sie können dies verwenden, um den Status einer Seite zu definieren, ein übergeordnetes Element mit vielen Elementen als Ziel festzulegen und Ihre Links zu einem Mittel zu machen, um das Aussehen und Layout aller untergeordneten Elemente mit einem einzigen Klick zu steuern. Sehen Sie sich eine Demo an.
21. Geben Sie Feedback mit subtilen Animationen
Neil Renicker, Designer und Entwickler
CSS-Pseudoelemente ::Vor und ::nach dem Kann zusammen mit CSS-Übergängen eine reizvolle Animation ermöglichen, die Mausbenutzern subtiles Feedback bietet. Erstellen Sie beispielsweise einen CSS-Pfeil innerhalb eines Pseudoelements und wenden Sie einen Übergang auf das Pseudoelement an (Übergang: alle Easy-In-Out .15s;), und fügen Sie dann eine einfache Layoutänderung zum hinzu :schweben Pseudoklasse (wie z. B. Änderung Rand oben). Sehen Sie sich eine Demo an.
22. Bereiten Sie sich auf "Will-Animieren" vor.
Paul Lewis, Codierer und Mitglied des Chrome Developer Relations-Teams
Wenn Sie verwendet haben -webkit-transform: translateZ (0) Um Ihre Seiten auf magische Weise schneller zu machen, wird der Hack ersetzt, der in vielen Browsern einfach eine neue Compositor-Ebene erstellt wird animieren. In Kürze können Sie dem Browser mitteilen, was Sie an einem Element ändern möchten (Position, Größe, Inhalt oder Bildlaufposition), und der Browser wendet die richtige Optimierung unter der Haube an. Mehr Informationen.
23. Humanisieren Sie die Eingabefelder
Yaron Schoen, Gründer von Made For Humans
Durch das Hinzufügen schneller Animationen zu Elementen, mit denen Benutzer interagieren, fühlt sich eine Benutzeroberfläche weniger computergesteuert an. Versuchen Sie bei Eingabefeldern, a Übergangsanruf Wenn Sie es also fokussieren oder nicht fokussieren, gibt es einen reibungslosen Übergang.
Eingabe, Textbereich {-moz-Übergang: alle 0,2s Easy-Out; -o-Übergang: alle 0,2s Leichtigkeit; -webkit-Übergang: alle 0,2s Easy-Out; -ms-Übergang: alle 0,2s Leichtigkeit; Übergang: alle 0,2s Leichtigkeit;
24. Halten Sie an und spielen Sie CSS-Animationen ab
Val Head, Designer und Berater
Sie können die CSS-Animation anhalten und abspielen, indem Sie sie ändern Animations-Wiedergabe-Zustand Eigentum. Wenn Sie "Angehalten" einstellen, wird Ihre Animation so lange angehalten, bis Sie sie ändern Animations-Wiedergabe-Zustand zu Laufen, zum Beispiel beim Schweben.
.animating_thing {Animation: Spin 10s linear unendlich; Animations-Wiedergabestatus: angehalten; }. animating_thing: hover {animation-play-state: running; }}
25. Verwenden Sie keine CSS-Variablen
Dave Shea, Designer und Autor
Wir erhalten endlich CSS-Variablen, zum Beispiel, um den Hex-Wert einer Farbe einmal zu schreiben und ihn durch ein Stylesheet zu referenzieren. Die offizielle Spezifikation ist jedoch ausführlich, erhöht die syntaktische Komplexität, bietet eine überwältigende Funktionalität und wird von den meisten Browsern weitgehend nicht unterstützt. In einer Zeit, in der Sass weit verbreitet ist und über Variablen mit leistungsfähiger Programmierlogik wie benutzerdefinierten Funktionen und if / else-Anweisungen hinausgeht, kommt die offizielle Spezifikation weit zurück.
Hoffentlich haben diese Top-Tipps Ihre Sicht auf CSS und die Möglichkeiten, die es in der Webentwicklung und im Webdesign bietet, erneuert. Vergessen Sie nicht, eine dieser Techniken gründlich zu testen, um die Browserunterstützung zu überprüfen, bevor Sie Arbeiten live schalten.
Wörter: Craig Grannell Illustration: Mike Chipperfield
Dieser Artikel erschien ursprünglich in der Ausgabe 253 des Netzmagazins.
