6. Oktober 2023

YouTube-Videos responsive einbetten

Mit folgendem Code lassen sich YouTube-Videos im Format 16:9 responsive einbetten:

• CSS
• HTML
• YouTube

30. September 2023

background-Attachment: fixed und background-size: cover auf einem iPhone oder iPad

Es ist ein altes Problem, das Apple leider bis heute nicht behoben hat: Die CSS-Eigenschaft „background-Attachment:fixed“ lässt sich nicht in Kombination „background-size: cover“ nutzen. Während auf dem Desktop alles normal aussieht, wird das Hintergrundbild unter iOS viel zu groß dargestellt, also nicht durch „background-size: cover“ in das div eingepasst. Erst seit dem Release von iOS […]

• CSS

27. August 2023

Mit CSS clip-path kannst du divs in jeder beliebigen Form erstellen.

Standardmäßig ist ein div viereckig. Um außergewöhnliche Designs umzusetzen, ist es manchmal erforderlich, dass divs in einer anderen Form dargestellt werden müssen. In der Regel setzt man hier dann pngs mit Transparenz ein. Für einfache Formen sind CSS clip-paths allerdings die elegantere Lösung. So kann z.B. solch ein Hexagon mit folgendem Code erzeugt werden. Die […]

• CSS
• HTML

24. August 2023

So erstellst du eine Prozessgrafik mit HTML & CSS.

• CSS
• Design
• HTML

25. Juli 2023

jQuery-Info-Pop-up

Pop-ups nerven. Meistens. Manchmal gibt es aber eben doch eine wichtige Info, die prominent kommuniziert werden muss. Z.B. geänderte Öffnungszeiten, eine aktuelle Stellenausschreibung o.ä. … Für diesen Fall eignet sich folgendes Snippet ganz hervorragend. Wenn auf das „x“ geklickt wird, wird das Pop-up erst wieder am nächsten Tag angezeigt. Wichtige Info Lorem ipsum dolor sit […]

• CSS
• HTML
• jQuery

22. Juli 2023

So kannst du einzelne Bereiche im WordPress-Backend ausblenden oder anpassen.

Hier hatte ich bereits beschrieben, wie man Änderungen am Style des WordPress-Backends vornehmen kann. Ergänze folgende Zeile in der functions.php deines Themes. Die „admin-styles.css“ kann natürlich auch noch für andere Zwecke verwendet werden. Z.B. Um einzelne Bereiche im Backend anzupassen oder auszublenden. So sind z.B. standardmäßig in den Blockeinstellungen des Gutenberg-Editors rechts „Typografie“- und Farb-Einstellungen […]

• CSS
• WordPress

27. Juni 2023

CSS PageFlip-Effekt für einen Magazin-Titel

Mit folgendem HTML-Snippet lässt sich schnell und unkompliziert eine schicke kleine Animation erzeugen, die einen kleinen Einblick auf Seite 3 eines Print-Magazins gewährt und z.B. auf das PDF des Magazins verlinken könnte.

• CSS
• Design
• HTML

11. Juni 2023

Focal Point – ein WordPress-Plugin mit dem man den Fokuspunkt eines Bildes definieren kann

• CSS
• WordPress

29. Mai 2023

So kann man die WordPress-Gallery für eine Logoübersicht nutzen

Die WordPress-Gallery kann nicht nur für Bildergalerien, sondern auch für Logos genutzt werden. Das Problem hierbei ist, dass die Logos oft alle unterschiedlich groß sind und ein unterschiedliches Seitenverhältnis haben. Idealerweise werden die Logos also alle in einem gleich großen Rechteck oder Quadrat positioniert und innerhalb dieser Fläche positioniert. Mit folgendem Code kannst du die […]

• CSS

1. April 2023

Mehrspaltiges Layout mit gleichgroßen divs mit CSS Grid

Mit folgendem Code lässt sich mit CSS Grid ein mehr-spaltiges Layout mit divs in gleicher Höhe ohne jQuery oder JavaScript umsetzten. Box 1 Lorem ipsum, dolor sit. Box 2 Button Box 3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, placeat inventore. Lorem ipsum dolor sit amet. Button Box 4 Lorem ipsum dolor sit […]

• CSS
• HTML