Textmasken mit CSS erstellen

css-text-maske

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

typing-css

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

scroll-effect-website

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

wordpress-remove-meta-key-value

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

Visitenkarten-Upload (*.vcf) in WordPress erlauben

vcf-upload-wordpress

vCards (*vcf) sind elektronische Visitenkarten, die es ermöglichen, Kontaktdaten unkompliziert in das eigene Adressbuch zu übernehmen. Also ein sehr nützliches Format um den Besuchern einer Website Kontaktinformationen schnell zugänglich zu machen. Schade nur, dass die WordPress-Mediathek den Upload dieses Dateiformats bisher verbietet. Mit einer kleinen Anpassung an der functions.php behebt ihr dieses Problem.

Beitrag zu Ende lesen

Die CSS-Eigenschaft box-decoration-break – padding & Co. beim Zeilenumbruch beibehalten

box-decoration-break

Wenn ihr Inline-Elementen über padding einen Innenabstand zuweist, dann wird dieses padding bei einem Zeilenumbruch ignoriert. Gleiches gilt für Eigenschaften wie box-shadow oder border-radius. Diese Tatsache ist in der Praxis extrem lästig, da es beispielsweise nicht möglich ist nur den Textbereich einer mehrzeiligen Überschrift mit einer Hintergrundfarbe zu hinterlegen und ansprechend zu gestalten. An den Zeilenumbrüchen wird der Hintergrund unschön abgeschnitten. Die CSS-Eigenschaft box-decoration-break schafft Abhilfe.

Beitrag zu Ende lesen

Eigene CSS-Styles bzw. Stylesheets im WordPress-Admin-Bereich verwenden

wordpress-werkzeugleiste-umgefaerbt-mobile

Ab und zu kommt es vor, dass der Admin-Bereich von WordPress individuell gestaltet werden soll. Beispielsweise soll das Farbkonzept für den Kunden angepasst werden. Zu diesem Zweck könnt ihr ein zusätzliches Stylesheet erstellen und mittels Action-Hook im Backend laden. In diesem Beitrag erklären wir, was getan werden muss.

Beitrag zu Ende lesen