Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » CSS » CSS in 30 Sekunden: Das versteht jeder

CSS in 30 Sekunden: Das versteht jeder

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 2 Kommentare
Lesedauer: 2 Minuten
  • von Dieter Petereit
  • 4. April 2018

Inhaltsverzeichnis

Anstatt deine Zeit mit Candy Crush zu vertun oder dich durch unwichtige Tweets zu fräsen, könntest du die Zeit in der S-Bahn oder auf dem Klo oder im langweiligen Teammeeting nutzen, um CSS zu lernen oder deine Kenntnisse aufzufrischen. 

Der Werkzeugkasten: Dreh- und Angelpunkt des Designer-Daseins

Wenn du wenigstens gelegentlich liest, was ich so schreibe, dann wird dir aufgefallen sein, dass ich stets viel Wert darauf lege, dass dein Werkzeugkasten in Schuss ist. In meinem Werkzeugkasten befindet sich nämlich im Grunde jedes einzelne Tool, das ich fürs Schreiben, Entwickeln und Gestalten jemals brauchen könnte.

uberraschungseifigur 2018389 1280 CSS in 30 Sekunden: Das versteht jeder
So schaust du aus der Wäsche, wenn dein Werkzeugkasten leer ist. Lass es nicht soweit kommen. (Foto: Pixabay)

Dabei spielen auch Snippets, also Schnipsel eine nicht unbeachtliche Rolle. Ich hatte mal eine riesige Sammlung unterschiedlichster Codeschnipsel in individuellen Txt-Dateien. Das war allerdings in den Nullern. Da gab es die Dienste, die uns heute beim Verwalten unserer Werkzeugkästen unterstützen noch nicht. Und es war nun wirklich alles andere als optimal, Codeschnipsel in der Form einzelner Textdateien ordentlich auf der Festplatte zu lagern. Allein, bis ich gefunden hatte, was ich suchte. Ich mag gar nicht daran zurück denken.

Heutzutage speichere ich Speicherdienste. Voll meta. Sicherlich, einzelne Schnipsel lege ich bisweilen noch ab, dann aber in Evernote. Und in eben diesem Cloud-Service speichere ich auch alle anderen digitalen Tools und Dienste, die ich so zu meinem Werkzeugkasten zähle.

CSS in 30 Sekunden: Lernen im Goldfischmodus

Heute habe ich einen neuen kleinen Helfer hinzugefügt, nämlich die Schnipsel-Sammlung „30 Seconds of CSS”, die der Nutzer mit dem fröhlichen Namen Atomiks auf Github eingepflegt hat. Schnipsel zu 18 gängigen Anwendungsfällen, darunter der immer noch nicht obsolete Clearfix, findest du hier.

30secondsofcss CSS in 30 Sekunden: Das versteht jeder
Kurze CSS-Happen für zwischendurch. (Screenshot: Dr. Web)

Dabei erhältst du zu jedem Schnipsel den vollständigen Sourcecode nebst Demo-Syntax und ausführlicher Erklärung, sowie der Angabe der Browserkompatibilität. Das Ziel ist es, dass du pro Schnipsel nicht länger als 30 Sekunden brauchst, um ihn vollständig zu verstehen und sicher einsetzen zu können.

Man könnte also sagen, es gäbe hier Fastfood für Seitengestalter. Das ist zwar einerseits richtig, aber andererseits ist die Sammlung nahrhafter und macht länger satt als der durchschnittliche Burger.

Andere mögen einwenden, dass diese Schnipsel ja wohl ohnehin so eine Art Flickzeug darstellen müssen, also Lösungen, die man praktisch immer am Mann hat. Das mag so sein, aber ich persönlich habe dabei nicht den Anspruch, alles immer sofort voller Wissen aus dem Ärmel schlackern zu müssen.

Machs doch genauso. Übrigens, hier haben wir schon einmal eine CSS-Schnipsel-Sammlung vorgestellt.

Dieter Petereit

Dieter Petereit

Dieter Petereit ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Netzhelfer Agentur Ostfildern Stuttgart Logo. Die Partner für das Internet.

NETZhelfer GmbH

Ostfildern

United Ads Agentur Starnberg.

UnitedAds

Starnberg

webtronix-media-laravel-agentur-frankfurt-hanau-logo-opt

Webtronix Media GmbH

Hanau

iPower, trigger your leads. Logo der SEO Agentur für Berlin.

iPower AG

Berlin

Dunkel Design | Webdesign Grafikdesign Logodesign

Köln

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

2 Antworten zu „CSS in 30 Sekunden: Das versteht jeder“
— was ist Deine Meinung?

  1. Axel sagt:
    23. Januar 2023 um 4:28 Uhr

    Der Link drweb.de/29-kostenlose-css3-code-snippets-sorgen-fur-frischen-wind-im-ui-design/ verweist auf drweb.de/woocommerce-snippets/

    Antworten
  2. Maik sagt:
    4. April 2018 um 19:28 Uhr

    Vielen Dank für diesen Artikel und ein weitere hübsches Tool. 🙂

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑