Textmasken mit CSS erstellen

Textmasken erfreuen sich im Grafik-Design – insbesondere im Print-Design – größter Beliebtheit. Leider war es mit Webtechnologien lange Zeit kaum möglich eine Textmaske herzustellen, bei der der Text als Reintext im HTML-Code steht. Aber gerade das ist wichtig, damit der Text geändert und übersetzt, sowie von Suchmaschinen und Screenreadern ausgelesen werden kann. In diesem Beitrag zeigen wir, wie ihr mit Hilfe von CSS Blend Modes eine semantisch korrekte Textmaske erstellt.

Beitrag zu Ende lesen

Getippter Text mit CSS-Animationen

Wenn der Eindruck erweckt werden soll, als würde ein Text getippt, wird häufig auf JavaScript zurückgegriffen. Wir haben selbst einige Tools zu diesem Zweck zusammengetragen. Doch der Effekt lässt sich auch mit einer CSS Keyframe-Animation erstellen. In diesem Beitrag zeigen wir wie es geht und was sich dennoch mit JavaScript optimieren lässt.

Beitrag zu Ende lesen

Scrolling-Effekte: CSS-Klasse per JavaScript hinzufügen, wenn sich ein Element im Viewport befindet

Scrolling-Effekte sind ein beliebtes Gestaltungsmittel auf modernen Websites. Sinnvoll eingesetzt können Sie dazu beitragen, dass eine Website gleichermaßen erfolgreich als auch ästhetisch ansprechend ist. In diesem Beitrag findet ihr ein JavaScript-Snippet, mit dem Elemente eine CSS-Klasse erhalten, sobald Sie sich im Viewport befinden. Die Klasse kann optional wieder entfernt werden, sobald sich das Element nicht mehr vollständig im Viewport befindet.

Beitrag zu Ende lesen

Alle Beitragsbilder in WordPress löschen

Ab und zu möchte man bei einem WordPress-Projekt alle Beitragsbilder vollständig entfernen. Beispielsweise weil bei einer Migration der Daten das Entfernen und neu Hinzufügen der »Post Thumbnails« der schnellste Weg zum Ziel ist. In diesem Beitrag archivieren wir ein Snippet, mit dessen Hilfe ihr die Beitragsbilder entfernt.

Beitrag zu Ende lesen

Die Navigation im Responsive Web Design

Hamburger Icon

Aufgrund der vielen verschiedenen Bildschirmgrößen und Geräte muss eine moderne Webseite flexibel auf die individuellen Bedürfnisse des Endnutzers reagieren. Einer der schwierigsten Punkte im Responsive Web Design ist dabei die Navigation. Damit eine Webseite auf verschiedenen Geräten benutzerfreundlich navigiert werden kann, brauchen wir ein Konzept, das es uns ermöglicht die Navigation entsprechend der Bildschirmgröße und des Bedienkonzepts (Mouse/Touch) anzupassen. Zu diesem Zweck gibt es unterschiedliche Musterlösungen - auch »Navigation Pattern« genannt – die wir in diesem Beitrag detailliert erklären.

Beitrag zu Ende lesen

Die CSS element()-Funktion – Eine ID als Hintergrundbild verwenden

In CSS ist es möglich einem Element mittels background-image-Eigenschaft ein Hintergrundbild zuzuweisen. Dieses Bild kann in allen webkompatiblen Dateiformaten (z. B. *.jpg, *.svg, *.png) eingebunden werden. Darüber hinaus ist die Umwandlung in Base64 möglich und häufig sinnvoll. Mit Hilfe der element()-Funktion von CSS kann die ID eines anderen Elements als Hintergrundbild angegeben werden.

Beitrag zu Ende lesen

CSS Shapes – Textumfluss, Konturenführung und individuelle Formen für Websites

Normalerweise erzeugen alle HTML-Elemente auf einer Website eine rechteckige Box. Das geschieht auch, wenn sie nicht rechteckig aussehen, da sie beispielsweise mit der CSS-Eigenschaft border-radius optisch so verändert wurden, dass sie abgerundet wirken. Texte und andere Elemente richten sich nun immer an den rechteckigen Boxen aus, was optisch unschöne Ergebnisse erzeugen kann. Mit den sog. »CSS Shapes« ist es möglich, nicht rechteckige Formen zu erzeugen und beispielsweise Texte exakt um ein Element herumfließen zu lassen. Vergleichbar mit der Konturenführung aus InDesign. Somit sind sehr interessante und magazinähnliche Layouts möglich.

Beitrag zu Ende lesen