web - grafik - foto
web - grafik - foto
Hier ist ein einfaches JavaScript-Skript, mit dem ein Burger-Button eine responsive Navigation von der rechten Seite hereinschieben lässt. Beim Klick auf einen Link innerhalb der Navigation verschwindet sie wieder. Funktionalität: Styling: Ergebnis: Beim Klick auf einen Navigationslink oder außerhalb der…
Hier ist ein einfaches Skript, das einen „Top-Button“ erstellt, der erscheint, sobald der Benutzer 100px scrollt. Beim Klick auf diesen Button wird der Benutzer zurück zum Seitenanfang gebracht. HTML und CSS: <!DOCTYPE html><html lang=“en“><head> <meta charset=“UTF-8″> <meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>…
Um zwischen einem Dark-Modus und einem Light-Modus umzuschalten, kannst du mit einem Schalter (switch button) und CSS-Variablen arbeiten. Hier ist eine vollständige Lösung mit HTML, CSS und JavaScript: HTML <!DOCTYPE html><html lang=“en“><head> <meta charset=“UTF-8″> <meta name=“viewport“ content=“width=device-width, initial-scale=1.0″> <title>Dark/Light Mode…
Um sicherzustellen, dass immer nur ein <details>-Element geöffnet ist, wenn der Benutzer ein anderes <details>-Element anklickt, kannst du ein JavaScript hinzufügen, das alle anderen <details>-Elemente schließt, sobald eines geöffnet wird. Hier ist ein Beispiel: HTML <!DOCTYPE html><html lang=“en“><head> <meta charset=“UTF-8″>…
Hier sind noch weitere CSS3-Befehle und -Eigenschaften, die in den letzten Jahren hinzugekommen sind oder populär geworden sind: 1. accent-color Diese Eigenschaft ermöglicht es, die Akzentfarbe von Steuerelementen wie Checkboxen, Radiobuttons und Schiebereglern zu definieren. 2. place-content place-content ist eine…
Hier sind weitere neue CSS3-Eigenschaften und -Funktionen, die in den letzten Jahren eingeführt wurden: 1. scroll-padding und scroll-margin Diese Eigenschaften definieren den Abstand des Inhalts von den Rändern des Containers, wenn scroll-snap verwendet wird. 2. gap (für Flexbox) Die gap-Eigenschaft…
Seit 2020 wurden in CSS3 viele neue Funktionen und Eigenschaften eingeführt, die das Layout, die Gestaltung und die Animationen von Webinhalten erheblich verbessern. Hier sind einige der bemerkenswertesten neuen CSS3-Befehle und -Eigenschaften, die seitdem hinzugekommen sind: 1. container queries Container…
patternify.com Was ist Patternify? Patternify ist ein einfacher Mustergenerator. Ich habe es erstellt, um mir die Mühe zu ersparen, Photoshop zu starten, nur um ein 2 x 2 Pixel großes Streifenmuster zu exportieren. Sie können Ihr Muster nicht nur online…
Aus dem Englischen übersetzt-Der CSS Zen Garden ist eine Entwicklungsressource für das World Wide Web, „die entwickelt wurde, um zu demonstrieren, was visuell durch CSS-basiertes Design erreicht werden kann“. Es startete im Mai 2003. Stylesheets beigesteuert von Grafikdesigner aus der ganzen Welt…
Browserunterstützung Quelle CSS-Verschachtelung, etwas, das die Leute von Sass lieben und seit Jahren eine der häufigsten Anfragen von CSS-Entwicklern ist, landet endlich auf der Webplattform. Durch die Verschachtelung können Entwickler in einem prägnanteren, gruppierten Format schreiben, das Redundanz reduziert. Sie…
Emmet ist ein quelloffenes Plugin für verschiedene Texteditoren, zur schnellen Erstellung von XML-, HTML- und CSS-Code. Befehle für Emmet werden in einer eigenen Kurzschreibweise verfasst und direkt in der Datei ausgeführt, zum Beispiel durch das Drücken der Tabulatortaste. Unter der…
Unleashed Design behandelt in seinem Video wie man ein CSS-Theme über JavaScript wechselt und wie man den darkmode über JS feststellt und entsprechend wechselt. Wie von Unleashed Design üblich ist das ganze sehr schnell und einfach erklärt. Hier der Videolink
Hier einige hilfreiche Links zu solchen. CSS-Grid-Generatoren Die CSS-Grids sind eine sehr mächtige und umfangreiche Layout-Technik. Durch die zunehmende Beliebtheit der Technik ist es nicht verwunderlich, dass es für die CSS-Grids schon eine Reihe an sehr leistungsfähigen Generatoren gibt. Hier…
Wie kann man die Trennlinie als 1px Linie darstellen?
Eine umfassende Liste aller CSS-Eigenschaften und ihrer Startwerte. Beachte Ankündigung und Anmerkungen sowie die ergänzende Übersicht aller HTML-Elemente. Der Teil des Index, der »lebendes CSS« betrifft (»CSS 3/CSS«), wird aktuell nicht gepflegt (Stand April 2019). Für die jüngsten CSS-Eigenschaften konsultier bitte die CSS-Eigenschaftenliste des W3C. A …
Der Begriff des Responsive Design tauchte erstmals im Jahr 2010 im Webmagazin “A list apart” mit dem Titel „Responsive Web Design“ von Ethan Marcotte auf. In dem Artikel wurde Responsive Design so definiert, dass es darum ginge sicherzustellen, dass Inhalte…
netzfruehling – CSS Showcase BlogDer Netzfrühling ist eine Galerie, in der standardkonforme Websites aus Deutschland, Österreich und der Schweiz vorgestellt werden. Hier sammeln sich Websites, bei denen XHTML und CSS statt HTML 4.0 und Tabellen zum Einsatz kommen.
Viel wurde schon geschrieben und bewundern, über Rounded Corners und wie man diese mit CSS oder auch JavaScript auf die eigene Seite bringt. Tutorials gibts ebenfalls viele. Auf Spiffy Box, kann man sich jetzt die Boxen mit Rounded Corners einfach zusammenklicken, alles nötige (Code und Grafik) wird…
Flock, der als Social Browser gedachte Firefox-Clone befindet sich zwischenzeitlich im fortgeschrittenen Beta-Stadium; Version 0.7 ist angesagt. Die Integration bekannter Web 2.0 Services wie Flickr und del.icio.us ist gut gelungen und bietet einen interessanten Ansatz auf dem Weg zum modernen…
Allgemeines Dieses Tutorial erklärt den Aufbau von Website-Layouts mit Hilfe von CSS und bietet die Layouts zum Herunterladen an. Es ist in zwei Abschnitte gegliedert: im Teil 1 geht es nur um Layouts, die mit Hilfe von Angaben zur Positionierung erstellt werden.…
Jens Meiert ist Spezialist für standardkonformes Webdesign, Barrierefreiheit, Usability sowie verwandte Themengebiete. Eine Artikelliste CSS 3 nimmt immer mehr Konturen an. Und auch wenn CSS 3, das im Gegensatz zu CSS 1 und 2 aus einzelnen Modulen besteht, in seiner Gesamtheit auch 2008 noch keine offizielle W3C-Spezifikation…