Falls Sie es nicht bemerkt haben, sind quadratische Avatare so 2010. Diese Tage Kreise sind der letzte Schrei. Jede App, die ihr Salz verdient, von Path bis Basecamp, springt an Bord dieser Modeerscheinung und winkt den in der Vergangenheit festgefahrenen Plätzen zum Abschied.
Immer der Vordenker, fragte ich mich, was kommt als nächstes? Lassen Sie uns über Quadrate und Kreise hinaus in die Zukunft des Avatars blicken! Mit CSS und Webkit können wir nahezu jede Form als Maske für einen Avatar verwenden. Mal sehen wie.
Warnung: Nur Webkit
Das heutige Projekt ist nur ein unterhaltsamer Blick auf einen Designtrend, den Sie sicherlich sehen werden, wenn sich die CSS-Maskierung in Zukunft verbessert. Für den Moment ist Webkit der einzige Browser, der über die nötigen Fähigkeiten verfügt, um solche verrückten Leistungen zu vollbringen. Sie müssen also eine Weile warten, um diese Effekte in der Produktion umzusetzen.
Methode 1: Webkit-Masken
Die erste Methode, die wir verwenden werden, ist ziemlich unkompliziert. Es nutzt die Webkit-Maskenbild Eigenschaft, um ein Bild als Maske für ein anderes zu verwenden.
Schnapp dir zwei Bilder
Zunächst benötigen Sie zwei Bilder. Das erste Bild ist das Profilfoto. Dies kann alles sein, was Sie möchten, aber als genereller Tipp für ungewöhnlich geformte Avatare sollten Sie sicherstellen, dass Sie genügend Kopfraum haben. Wenn Sie ein Foto verwenden, das zu eng um Ihr Gesicht geschnitten ist, erhalten Sie einen merkwürdigen Clip, bei dem Teile Ihres Gesichts abgeschnitten werden.
Sobald Sie den Avatar ausgewählt haben, können Sie Ihre Maske erstellen. Sie können dies mit fast jedem Bildeditor (Photoshop, Illustrator usw.) tun. Ziehen Sie einfach die Form heraus, die Sie als Maske verwenden möchten, und speichern Sie sie mit transparentem Hintergrund als PNG- oder SVG-Datei.
Denken Sie daran, dass die Dinge glatter werden, wenn Ihr Foto und Ihre Maske so nahe wie möglich sind. Andernfalls könnte es zu einem merkwürdigen Ergebnis kommen, für das viele Optimierungen erforderlich sind.
HTML
Die Implementierung der CSS-Maskenmethode ist sehr einfach. Für das HTML brauchen Sie nichts Besonderes, werfen Sie einfach ein Bild ein:
Beachten Sie, dass der Text hier ziemlich funky aussieht. Dies sind die Fluchtcodes für einen Diamanten, einen Stern und ein Herz.
CSS
Jetzt ist es Zeit, diese Formen mit dem entsprechenden Hintergrundbild zu gestalten. Wir können benutzen Webkit-Hintergrund-Clip mit einem Wert von Text den Inhalt unseres h4 als Maske für das Hintergrundbild verwenden, das wir verwenden.
Wie Sie sehen, stellen wir die Hintergrundbilder so ein, dass sie sich nicht wiederholen, und verwenden die Positionierungswerte, um die Bilder an eine Stelle zu verschieben, an der sich die Gesichter an einem guten Ort befinden. Dies ist ein Versuch und ein Fehler, einfach mit den Werten zu arbeiten, bis Sie etwas bekommen, das Ihnen gefällt.
Demo
Wie Sie in der Demo sehen können, erzeugte jeder Escape-Code eine andere Form, die dann zum Maskieren des hinter uns platzierten Bildes verwendet wurde.
Demo: Klicken Sie hier, um die Demo zu starten.
Vor-und Nachteile
Da die Symbole so vielseitig sind, ist es mit dieser Methode sehr einfach, viele verschiedene Formen zu verwenden. Es ist wahrscheinlich noch einfacher einzurichten als die vorige Methode und ist auf Variationen vorbereitet.
Davon abgesehen, zerstören Nicht-Webkit-Browser diesen wirklich. Chris Coyier hat einen Vorschlag für die Verwendung eines Hintergrundclips mit Modernizr für einen akzeptablen Fallback-Vorgang, es wird jedoch lediglich der Text ohne das Bild angezeigt, was für Avatare nicht die beste Option ist.
Fazit
In den nächsten Jahren wird wahrscheinlich davon ausgegangen, dass Web-Apps die Variation der Avatar-Formen erhöhen. Leider ist CSS vorerst nicht der beste Weg, um diesen Effekt zu erreichen.
Wenn Sie jedoch vorhaben, mit etwas Ähnlichem fortzufahren, würde ich vorschlagen, Webkit-Masken zu verwenden, einfach weil alles noch anständig aussehen sollte, wenn sie bei anderen Browsern fehlschlagen.