Was haben wir da eigentlich für einen Effekt auf der iD!-Website eingebaut? Ganz einfach aber wirkungsvoll.

Eigentlich ist es ja nur eine einzelne Zeile Code in CSS und schon steht der Titel immer in der gegengesetzten Farbe zum Hintergrund. Jedoch hatten wir ganz schön zu hirnen, bis es dann schliesslich auf allen Bildschirmen mit diesem typografisch spannenden Effekt geklappt hat.

Allen ausser dem Internet-Explorer, aber das ist ein anderes und für Webdesigner seit Jahren mühsames Thema.

Deshalb konzentrieren wir uns doch lieber um die schönen Dinge. CSS beispielsweise. In den Cascading Style Sheets legt der Webdesigner das visuelle typografische Aussehen der Website und deren Elemente fest. Die beiden Elemente, die bei der iD!-Website eine Rolle spielten waren das Logo als formatsprengendes Hintergrundbild (im body) und der Titel (h1), der zum Logo immer genau umgekehrt farbig sein sollte. Weisse Flächen im Logo bedeuten also schwarze Fläche im Titel und umgekehrt.

Die Lösung war kein spezielles Script oder so, sondern eine Zeile in CSS – mix-blend-mode: exclusion; – welche dem darüber liegenden Element, also dem Titel (h1) gegeben werden musste und schon hat es geklappt. Am Desktop zumindest. Für alle mobilen Geräte mussten wir dann noch ein paar kleine Anpassungen machen und hatten nach gefühlt hundert Versuchen auch da die Lösung auf dem Screen. Nebenbei: Die Ebenen-Hierarchie – z-index – ist für diesen Effekt ziemlich störend und deren Entfernung die Lösung.

Wir hoffen, dieser typografische Effekt gefällt und auch wenn er die Lesbarkeit nicht ganz so einfach macht, wie ganz normal eingesetzter Text gibt er der Website doch das gewisse Etwas, das aus unserer Sicht eine Website haben sollte. Wenn Sie also auf der Suche nach dem gewissen Etwas und den unermüdlichen Einsatz für dieses gewisse Etwas sind, dann haben Sie in uns den passenden Partner gefunden.