Mit der neuen attr()-Funktion kannst du Werte aus HTML-Attributen direkt in CSS-Eigenschaften einsetzen – z. B. für Farben, Grössen oder Texte.
Früher war attr() nur für den Inhalt (content) nutzbar – jetzt funktioniert sie auch in visuellen CSS-Eigenschaften wie background-color, width, font-size usw.
Damit kannst du z.B. ein Attribut wie data-color direkt als Wert für background-color verwenden – mit Typprüfung und Fallback.
Die Font-Weight Skala definiert die visuelle Stärke von Schriften. Im CSS reicht sie von 100 (sehr dünn) bis 900 (sehr fett). Jeder Wert steht für eine spezifische Schriftgewichtung. Hier eine Übersicht der gebräuchlichsten Werte.
Hast du dich auch schon gewundert, wieso es zwar einen :nth-child() und einen :nth-of-type(), aber keinen :nth-of-class() Selektor in CSS gibt? In diesem Beitrag zeigen wir dir, wie du dies mithilfe einer einfachen JS-Funktion umsetzen kannst.
Wenn du WooCommerce verwendest, bist du wahrscheinlich auch mit seinen vordefinierten Styles vertraut. Aber was, wenn du deinem Shop ein individuelles Aussehen verpassen möchtest? Dann musst du möglicherweise einige dieser Styles entfernen. Aber keine Sorge, das ist keine Operation am offenen Herzen. In unserem Blog-Beitrag zeigen wir dir, wie du die Styles auf die freundliche und schmerzlose Art entfernen kannst.
Hast du jemals darüber nachgedacht, deinen «In den Warenkorb»-Button zum Leben zu erwecken? Mit einer schicken Animation kannst du deine Kunden zum Staunen bringen und ihre Kauflust steigern. Diese kleine Animation kann den Unterschied zwischen einem Warenkorb voller Produkte und einem verlassenen Warenkorb ausmachen. Lass uns diesen Button rocken!
Genervt von langwierigen Bastelarbeiten an komplizierten Blockstrukturen ohne das gewünschte Ergebnis? Wir haben die Lösung: Block-Patterns! Mit diesen praktischen Vorlagen sparst du Zeit und Mühe. Sie bieten vorgefertigte Inhalte, die du ganz einfach anpassen kannst. Kreiere im Handumdrehen komplexe Blockstrukturen, wie zum Beispiel eine elegante Card mit Bild, Titel und Text. Erfahre hier, wie du Block-Patterns nutzen kannst!
Mit Block-Variationen kannst du deine Blocks zu echten Elton Johns machen. Deine Blocks können wie der legendäre Sänger in verschiedenen Outfits auftreten und das Publikum mit ihren vielfältigen Farben und Styles begeistern. In diesem Beitrag zeigen wir dir, wie du deine Blocks zu wahren Superstars machst und deine Kunden in Begeisterung versetzt.
Mit Block-Styles kannst du deinen Blöcken jetzt das gewisse Extra verleihen und sie zum absoluten Hingucker machen! Ob es um eine verrückte Farbgebung, eine ausgefallene Schriftart oder einfach nur um ein paar kreative Abstände geht – deiner Kreativität sind keine Grenzen gesetzt. In diesem Blog-Beitrag zeigen wir dir, wie du Block-Styles in der Praxis umsetzt und damit die Nutzererfahrung auf ein ganz neues Level bringst.
Wenn Du Deinen CSS- oder JS-Block manuell nachladen möchtest, solltest Du sicherstellen, dass die Datei auch wirklich existiert. Sonst wird es schwierig. Du willst doch nicht versuchen, einen Block ohne CSS auszuführen? (Klingt wie eine Horrorvorstellung für Webdesigner!) Mit der PHP-Funktion file_exists() kannst Du ganz einfach überprüfen, ob die Datei existiert. Der Pfad zur Datei wird übrigens nicht mit get_stylesheet_directory_uri() ausgegeben, sondern mit get_theme_file_path(). Klar, oder?
Na, bist du hungrig nach einer schnellen Lösung für ein Hamburger-Menü auf deiner Website? Dann haben wir hier etwas Leckeres für dich: Die Version von Jonathan Suh! Es mag zwar kein Gourmet-Menü sein, aber manchmal ist weniger eben mehr – und diese Lösung ist schön und schlank. Schau doch mal rein und lass es dir schmecken!
Mit der Bibliothek animate.css kannst du kinderleicht coole Animationen auf deiner Seite einbinden – und das ganz ohne JavaScript! Egal ob du einen Text hervorheben oder ein Bild bewegen möchtest, animate.css hat die passende Animation parat. Probier’s doch einfach mal aus und lass deine Seite lebendiger wirken!