kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

#css

CSS clip-path – Objekte mit Schnittmasken beschneiden

Mit der CSS-Eigenschaft clip-path können HTML-Elemente visuell beschnitten werden. Abgeschrägte Kanten, maskenartige Effekte und individuelle Formen sind somit kein Problem mehr. Der clip-path wird durch eine Vektor-Form beschrieben, daher sind keine weichen Übergänge möglich. Die Beschneidungspfade können mit verschiedenen Basis-Formen hergestellt werden. Neben Kreis, Ellipse und abgerundeter Ecke, können detaillierte Formen mit dem Polygon hergestellt werden.

Beitrag zu Ende lesen

#wordpress

WooCommerce: Andere Versandarten entfernen, wenn kostenlose Lieferung verfügbar ist

WooCommerce, die am weitesten verbreitete eCommerce-Erweiterung für WordPress, bietet eine Vielzahl an Einstellmöglichkeiten für den Versand von Waren. Verschiedenen Versandzonen können unterschiedliche Versandarten hinzugefügt werden. In vielen Online-Shops ist es gewünscht, dass alle bzw. ausgewählte Versandarten ausgeblendet werden, sobald die Option »Kostenlose Lieferung« zur Verfügung steht. Diese Funktion bietet WooCommerce nicht über den Administrationsbereich – doch sie lässt sich im Code nachrüsten.

Beitrag zu Ende lesen

#prototyping

Sketch – Prototyping (Video-Tutorial)

Mit den Prototyping-Funktionen von Sketch ist es möglich Artboards scrollbar zu gestalten, Verlinkungen einzufügen und Objekte beim Scrollen im Vordergrund zu fixieren. Somit ist es möglich den User-Flow – die Bewegung des Benutzers durch die Website oder App – zu visualisieren und zu testen.

Beitrag zu Ende lesen

#javascript

WordPress: Deaktivieren von Gutenberg-Blöcken

Seit WordPress 5.0 ist der Gutenberg-Editor fester Bestandteil des WordPress-Cores und liefert eine Vielzahl an Blöcken, mit denen ihr  Inhalte darstellen bzw. strukturieren könnt. Häufig bieten einzelne Blöcke jedoch ungewünschte redaktionelle Freiheiten, weshalb sie deaktiviert werden sollen. Mit Hilfe einer sog. Whitelist könnt ihr nur bestimmte Gutenberg-Blöcke zulassen und mit einer Blacklist gezielt Blöcke entfernen.

Beitrag zu Ende lesen

#animationen

Title-Tag des inaktiven Browser-Tabs animieren

Eine Bewegung in einer ansonsten statischen Umgebung zieht den Blick auf sich. Der <title>-Tag einer Website, der im Browser-Tab angezeigt wird, ist in der Regel statisch und somit eher unauffällig. Wir archivieren in diesem Beitrag ein jQuery-Snippet, mit dessen Hilfe ihr den Inhalt des im Hintergrund geöffneten Browser-Tabs austauscht und auf Wunsch animiert.

Beitrag zu Ende lesen

#html

Das Dialog-Element von HTML5 – Modal Screens und Dialogfenster erzeugen

Das Dialog-Element von HTML

Mit dem <dialog>-Element von HTML steht eine native Methode zur Verfügung um ein Dialogfenster bzw. einen Modal Screen zu erzeugen. Im Gegensatz zu selbstgebauten Lösungen wie einer Lightbox, ist die semantische Qualität der von <dialog> deutlich besser. In Kombination mit JavaScript kann das Fenster geöffnet oder geschlossen werden. In diesem Beitrag geben wir euch eine kurze Übersicht über die Eigenschaften des Elements.

Beitrag zu Ende lesen

#svg

SVG als CSS-background verwenden und umfärben

Das Grafikformat SVG bietet sich aufgrund geringer Dateigrößen, verlustfreier Skalierung und zahlreicher Manipulationsmöglichkeiten für viele Anwendungsfälle an. Die verschiedenen Möglichkeiten SVG in eine Website einzubauen haben alle Vor- und Nachteile. Ein Nachteil beim Einsatz als background-image im CSS-Code besteht darin, dass die SVG nicht mehr umgefärbt werden kann. Insbesondere beim Einsatz von Icons kann das lästig sein. Mit Sass und Data URIs gibt es jedoch eine Lösung.

Beitrag zu Ende lesen