Heute zeige ich euch wie man ein Card Hover Effekt mit CSS und HTML programmieren kann. Das ist eines der am meisten eingesetzen Elemente in einer Webseite und nun wisst ihr auch wie es geht. Video HTML <section class="card-container"> <article…
CSS
Wie man das Label in einem Formular animiert (HTML & CSS)
Ihr habt das ja sicher auch schon öfters bei Formulare gesehen. Da steht beim Input Feld dann immer schön was man hier eingeben soll und wenn man auf das Formular klickt, dann verschiebt sich der Text nach oben oder unten oder sonst wie. Es ist also kein einfacher…
Was ist ein Bento Grid und wie mache ich es selbst? (Anleitung mit HTML und CSS)
Seit ein paar Monaten gibt es einen Webseiten-Trend der immer mehr an Fahrt aufnimmt und das ist das sogenannte Bento-Grid. Ein Grid kennt ihr ja, das sind so Kästchen/Boxen die regelmässig verteilt werden. Viele CMS sind auch darauf basierend – wie Elementor oder…
Slider Checkbox designen (HTML & CSS)
Wer schon mal ein Formular designt hat kennt sicher die Checkbox. Damit lassen sich einfach Dinge an- und auswählen aber einen Nachteil haben sie, sie sehen oft hässlich aus. Aus diesem Grund zeige ich euch heute wie ihr so eine Checkbox als Schalter darstellen könnt….
Standort Abfrage mit der Geolocation API im Browser – Webdesig Tipp
Wo ist die nächstgelegene Filiale meines Unternehmens, wo ist der nächste Coiffeur, wie komme ich am schnellsten zum Bodensee? Das sind alles Fragen die vielleicht für eure Webseiten interessant sind und die ihr so oder ähnlich euren Besuchern stellen möchtet. Dafür…
Wie erstelle ich eine responsive Bilder Grid Galerie auch Bento Grid genannt? (HTML & CSS)
Heute zeige ich euch wie man eine coole responsive Bilder Galerie mit Grid machen kann – man könnte auch Bento Grid dazu sagen. Mit diesem Trick kann man in einem Grid Bilder / Elemente pflanzen mit verschiedenen grössen – das was gerade so 2025 total IN…
Buchstaben mit GSAP animieren
Mit GSAP kann man viel anstellen und im heutigen Video zeige ich euch wie man Buchstaben animieren kann. Damit kann auch sehr viel witziges machen, Buchstaben die sich bewegen und drehen oder ganz verschwinden. Video GSAP <script…
Animierter Link Unterstrich mit HTML CSS (Highlight)
Heute zeige ich euch wie man auch einen Unterstrich bei einem Link animieren kann. Ich glaube nicht dass ihr davon wusstet. Kurz und knackig erklärt. Video HTML <div class="container"> <p>Lorem ipsum dolor sit amet, <a href="#"…
Ribbons / Schleifen mit CSS erstellen
Hin und wieder will man eine Text Box optisch ein wenig verschönern und vielleicht sogar die Aufmerksamkeit der Leser auf diese Box lenken. Um dies zu erreichen kann mn so Schleifen auch Ribbons genannt verwenden. Wie man so eine Schleife Ribbon über ein Bild legt…
HTML Radiobutton mit eigenem Designen erstellen (HTML & CSS)
Heute machen wir mal wieder etwas fürs Webdesign und zwar zeige ich euch wie ihr Radiobutons designen könnt. Ihr kennt das, da hat man ein Formular und möchte ein paar Infos beim Webseitenbesucher abfragen und dann verwendet man diese Radiobuttons (Diese runden…