kulturbanause Blog

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

#css

HTML Color Picker mit JavaScript auslesen

Die Formularelemente von HTML5 bieten zahlreichen Möglichkeiten um komplexe Funktionalitäten mit verhältnismäßig einfachen Mitteln herzustellen. Mit Hilfe des nativen HTML Color Pickers kann beispielsweise ein Farbton ausgewählt werden, der dann wiederum dazu benutzt werden kann in Echtzeit Bereiche umzufärben. Dazu muss der gewählte Farbwert per JavaScript ausgelesen und an eine CSS Variable übergeben werden.

Beitrag zu Ende lesen

#responsive-webdesign

CSS Multi Columns – Responsive Layouts ohne Media Queries

Mit dem »Multi Column Layout« von CSS lassen sich Inhalte in mehreren Spalten anzeigen. Das CSS-Feature bietet sich besonders gut für Fließtexte an, kann aber auch für andere Darstellungen sinnvoll eingesetzt werden. Besonders interessant ist, dass mit Multi Columns responsive Layouts ohne Media Queries möglich sind. Die Gestaltung von in sich abgeschlossenen Komponenten wird somit möglicherweise einfacher.

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: PHP-Variablen an JavaScript-Datei übergeben – wp_localize_script

In WordPress ist es mit Hilfe der wp_localize_script-Funktion möglich, PHP-Variablen an JavaScript zu übergeben. Diese Funktion ist besonders hilfreich, wenn man in einer mehrsprachige Website mit Übersetzungs-Strings arbeitet oder wenn Inhalte über AJAX nachgeladen werden sollen. In diesem Beitrag zeigen wir euch, wie ihr PHP-Variablen in WordPress richtig an JavaScript übergebt.

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 Browser-Support für Animationen und Interaktionen

SVG

Mit Hilfe der SVG-Technologie können interessante Interaktionen und Animationen auf einer Website realisiert werden. Leider ist der Browser-Support höchst unübersichtlich, denn ob etwas funktioniert oder nicht ist davon abhängig wie die SVG eingebunden wurde und welche Sprache (JavaScript, SMIL, CSS) zur Erzeugung der Animation verwendet wurde. Wir haben daher für die interne Nutzung eine Übersicht erstellt, die wir euch natürlich nicht vorenthalten wollen.

Beitrag zu Ende lesen