24. Oktober 2023

Multilevel-CSS-only-Dropdown-Navigation

• CSS
• HTML

15. Oktober 2023

Einfaches Google Maps Opt-in

Mit folgendem Snippet kannst du ein einfaches Google Maps Opt-in umsetzen. Der User muss der Nutzung von Google Maps aktiv zustimmen. Daten werden erst an Google übertragen, wenn er auf den Button geklickt hat. Zum Aktivieren der eingebetteten Karte bitte auf den Button klicken. Durch das Aktivieren werden Daten an Google übermittelt. Karte anzeigen

• Google
• HTML
• jQuery

9. Oktober 2023

Responsive Text

• CSS
• HTML
• JavaScript
• jQuery

6. Oktober 2023

YouTube-Videos responsive einbetten

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

• CSS
• HTML
• YouTube

30. August 2023

Divs beim scrollen einblenden

Divs erst beim scrollen zeitverzögert einzublenden oder „reinfliegen“ zu lassen ist ein großer Trend in den letzten Jahren gewesen. Wenn man es nicht übertreibt und subtile Animationen, kann das durchaus ein netter Effekt sein. Wobei ich grundsätzlich eher Fan davon bin wenn eine Website schnell und direkt ist und die Darstellung der Inhalte nicht noch […]

• HTML
• JavaScript

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

20. August 2023

jQuery „Live-Suche“ – So kannst du Elemente auf einer Website durchsuchen und nicht passende Ergebnisse ausblenden.

Mit folgendem jQuery-Script kannst du eine „Live-Suche“ oder eine Filterfunktion auf einer Website umsetzen. Sobald etwas im Suchfeld eingetippt wird, werden alle nicht-passenden Elemente ausgeblendet. Hier kannst du das Skript an Hand einer (fiktiven) FAQ für ein Hotel ausprobieren: Wie kann ich eine Reservierung vornehmen? Sie können online über unsere Website oder telefonisch über unsere […]

• HTML
• JavaScript
• jQuery

26. Juli 2023

Suchen & Ersetzen mit Wildcard in Visual Studio Code

„Suchen & Ersetzen“ ist beim Programmieren eine praktische Sache. So kann man z.B. mit einem Klick sämtliche Klassennamen ersetzen oder erweitern. Etwas komplizierter wird es, wenn allen gewünschten Elementen unterschiedliche Klassen zugewiesen sind, z.B. in der WordPress-Navigation. In diesem Fall kann man eine Wildcard einsetzen. Da in Visual Studio Code reguläre Ausdrücke (Regex) verwendet werden, […]

• 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