CSS-Bildersetzung ist eine Technik, bei der ein Textelement (normalerweise eine Überschrift wie ein <h1>) durch ein Bild (oft ein Logo) ersetzt wird. Sie hat ihren Ursprung in der Zeit vor Web-Schriften und SVG. Jahrelang kämpften Webentwickler gegen Browserinkonsistenzen, um Bildersetzungstechniken zu entwickeln, die die richtige Balance zwischen Design und Barrierefreiheit fanden.
Jetzt, da Web-Schriften und SVG viel mehr die schwere Arbeit für stilisierte Texte im Web erledigen, geraten diese Techniken außer Gebrauch. Aber wir finden, dass es sich lohnt, sie in diesem Museum zu bewahren, um den Erfindergeist zu feiern, der in ihre Entwicklung floss, und uns an eine vergangene Ära im Webdesign zu erinnern.
Diese Demos führen Sie durch eine umfassende Geschichte der Bildersetzung im Web, die bis ins Jahr 2003 zurückreicht. Jede Demo wird mit ihrem Quelllink präsentiert, falls verfügbar – einige sind inzwischen für immer verloren.
2014: H5BP Bildersetzung 2
Siehe den Pen 2014 H5BP Bildersetzungsmethode 2 von CSS-Tricks (@css-tricks) auf CodePen.
2012: H5BP Bildersetzung
Siehe den Pen 2012 H5BP Bildersetzungsmethode von CSS-Tricks (@css-tricks) auf CodePen.
2012: Scott Kellum Methode
Siehe den Pen 2012 Scott Kellum Bildersetzungsmethode von CSS-Tricks (@css-tricks) auf CodePen.
2010: Verbesserte NIR (Nash Bildersetzung)
Siehe den Pen 2010 Verbesserte NIR – Bildersetzungsmethode von CSS-Tricks (@css-tricks) auf CodePen.
2008: Phark mit Inline-Bild-Methode
Siehe den Pen 2008 Phark mit Inline-Bild – Bildersetzungsmethode von CSS-Tricks (@css-tricks) auf CodePen.
2007: Noch eine Bildersetzungsmethode
Siehe den Pen 2007 Noch eine Bildersetzungsmethode von CSS-Tricks (@css-tricks) auf CodePen.
2006: Nash Bildersetzungstechnik
Siehe den Pen 2006 Nash Bildersetzungstechnik von CSS-Tricks (@css-tricks) auf CodePen.
2005: Thierry-Technik
Siehe den Pen 2005 Thierry Bildplatzierungstechnik von CSS-Tricks (@css-tricks) auf CodePen.
2005: Malarkey-Technik
Siehe den Pen 2005 Malarkey Bildersetzungstechnik von CSS-Tricks (@css-tricks) auf CodePen.
2003: Shea-Verbesserung
Siehe den Pen 2003 Shea-Verbesserung – Bildersetzungstechnik von CSS-Tricks (@css-tricks) auf CodePen.
2003: Lindsay-Methode
Siehe den Pen 2003 Die Lindsay-Methode – Bildersetzungstechnik von CSS-Tricks (@css-tricks) auf CodePen.
2003: Glider/Levin-Technik
Siehe den Pen 2003 Glider/Levin Bildersetzungstechnik von CSS-Tricks (@css-tricks) auf CodePen.
2003: Leon Dwyer-Methode
Siehe den Pen 2003 Leon Dwyer-Methode – Bildersetzungstechnik von CSS-Tricks (@css-tricks) auf CodePen.
2003: Leahy/Langridge
Siehe den Pen 2003 Leahy/Langridge Bildersetzungstechnik von CSS-Tricks (@css-tricks) auf CodePen.
2003: Radu Darvas Shim
Siehe den Pen 2003 Radu Darvas Shim Bildersetzungstechnik von CSS-Tricks (@css-tricks) auf CodePen.
2003: Radu Darvas-Technik
Siehe den Pen 2003 Radu Darvas Bildersetzungstechnik von CSS-Tricks (@css-tricks) auf CodePen.
2003: Phark-Methode
Siehe den Pen 2003 Phark-Methode Bildersetzungstechnik von CSS-Tricks (@css-tricks) auf CodePen.
2003: Fahrner Bildersetzung
Siehe den Pen 2003 Fahrner Bildersetzungstechnik von CSS-Tricks (@css-tricks) auf CodePen.
Bin so froh, dass diese Zeiten vorbei sind. Ich erinnere mich, dass ich die Sliding-Door-Technik für Buttons sehr, sehr oft verwendet habe. Vorwärts und aufwärts!
Ich glaube nicht, dass
.visuallyhiddenfür Bildersetzung gedacht ist. Es ist eher ein Hilfsmittel für Barrierefreiheit, um blinden Menschen (Beschriftungen für Icons etc.) oder Freaks, die Lynx verwenden, nützliche Informationen zu geben. Und deshalb kann ich nicht zustimmen, dass diese spezielle Technik außer Gebrauch gerät.Interessant, zu dieser Zeit und in diesem Alter einen Artikel über Bildersetzung zu sehen.
Ich bin mir nicht sicher, was mit dem Museum hier passiert ist, aber andere bemerkenswerte Techniken sind
Definitive Lösung für Bildersetzung
GIR
Skalierbare Inline-Bildersetzung
Dynamische Textsubstitution
Skalierbare Jens-Bildersetzung [nein, nicht meine]
Skalierbare Inman Flash-Ersetzung †
SwishMAX Textsubstitution †
Deutsche Leser mögen sich für http://meiert.com/de/publications/articles/20050513/ interessieren, was den Stand der Dinge bis 2005, als IR noch ziemlich angesagt war, ziemlich genau widerspiegeln dürfte.
Ich denke, Cufon war eine Zeit lang eine der beliebtesten Techniken. Obwohl sie sich stark von den im Beitrag genannten unterscheidet, ist das vielleicht nicht die Art von Ding, die Sie auflisten wollten.
Tun Sie es nicht. Alle diese Hacks werden von Google Search bestraft, https://support.google.com/webmasters/answer/66353
Google Web-Team sind A*löcher. Tun Sie dies nicht, tun Sie das nicht, bestrafen Sie dies, bestrafen Sie das. Sie bestrafen für die Verwendung von Hashtags, bestrafen für die Verwendung von Breadcrumb-URLs, bestrafen für die Verwendung von semitransparentem Text, bestrafen für die Verwendung von Plugins, bestrafen für doppelte Wörter, bestrafen für die Verwendung von display none, bestrafen für Deep-Linking, bestrafen für kein Deep-Linking, bestrafen für die Nichtverwendung von Metatags, bestrafen für die Verwendung von Metatags, ich könnte endlos weitermachen.
Gut, dass es eine `content`-Eigenschaft gibt, die für jedes Element verwendet werden kann... Oh, richtig, sie hat nur jemals in Presto Opera funktioniert. Schade, dass Browser mehr an der Implementierung von DRM als daran interessiert zu sein scheinen.
Arbeite für ein Unternehmen, das groß genug ist, um sich Web-Schriften leisten zu können und modern genug, um es besser zu wissen, und ich muss eine dieser Techniken verwenden :(