Die schöne und bunte Welt mit coolen CSS-Tools

mit Keine Kommentare

Online-Marke­ting-Bei­trag: CSS-Werk­zeuge

Stand vom 17.6.2021

Wer mit CSS-Dateien (Cascading Style Sheets) arbeitet, der kann sich mithilfe von On­li­ne-Tools das Leben er­leich­tern. Es gibt viele nützliche Dienste, mit denen Sie prak­tische Dinge erledigen lassen. Damit or­ga­nisieren Per­so­nen, die nur ge­ringes Wissen über CSS haben, tolle Dinge.

CSS

Durch den Einsatz von CSS be­schleu­nigen Sie den Aufbau von Webseiten, indem wichtige Elemente keine (schwe­re) Grafiken sind, son­dern durch CSS-Code generiert wer­den. Alle Werkzeuge sind in eng­lischer Sprache ver­fügbar, aber ohne Sprachkenntnisse einfach zu be­die­nen.

Grundsätzlich wird bei den einzelnen Diensten der CSS-Code sowie der HTML-Code geliefert. Der CSS-Code wird in die entsprechende CSS-Datei (zum Beispiel styles.css) eingefügt. Der HTML-Code wird an der Stelle im HTML-Do­ku­ment eingefügt, an der Sie die entsprechende Funktion benö­tigen.

Vorstellung der Dienste und CSS-Gene­ra­to­ren

  • CSS Wiki
    Praktisch: Alle CSS Eigenschaften auf einen Blick, die CSS Referenz.
    css-wiki.com
  • Sonderzeichen resp. Icons (E)
    Für den Webauftritt brauchen Sie immer mal wieder Icons. Diese kleinen Grafiken erweisen sich als sehr nütz­lich. Es ist möglich, Icons einzusetzen, die nicht als Grafik­datei existieren. Diese werden jeweils durch CSS3-Co­de er­stellt. Mit diesem Dienst erweist sich die Angelegenheit als sehr einfach, indem die Codes geliefert wer­­den.
    uiplayground.in/css3-icons/
    CSS-Sonderzeichen
    Quelle: uiplayground.in
  • CSSO (E)
    Dieses Online-Tool kombiniert automatisch doppelte Einträge und minimiert Ihre CSS-Datei. Wer für ver­schie­dene Klassen die gleichen Werte nutzt, kann mit dem Online-Tool schnell aufräumen, indem es diese zusam­men­fasst und neu kombiniert, um die kleinstmögliche CSS-Grösse zu erreichen.
    css.github.io/csso/csso.html
  • Livetest von CSS-Dateien (E)
    Ohne zuerst eine Datei zu er­stellen, testen Sie einen CSS-Code zuerst einmal online. Einfach den Code in das obere Feld ein­geben und per Klick wird das Ergebnis angezeigt. Ausserdem werden sehr viele Codeschnipsel vor­ge­stellt.
    codepen.io
  • CSS Tabellen Generator (E)
    Mit diesem Dienst erstellen Sie schnell ausgefeilte Tabellen. Sämtliche Anweisungen werden angezeigt und in­ter­pre­tiert. Zu­sätzlich erhalten Sie den CSS-Code sowie den HTML-Code, den Sie weiterentwickeln können.
    somacon.com/p141.php
  • CSS Textgestaltungs-Generator (E)
    Ein Demotext kann mit allen möglichen Attributen versehen werden. Zusätzlich erhalten Sie den CSS-Code sowie den HTML-Code, den Sie weiterentwickeln können.
    somacon.com/p334.php
  • Hexadezimale Farben (E)
    Die Webseite zeigt die Farben in Textform und als hexadezimale Werte an.
    somacon.com/p142.php
    CSS-Tool
  • CSS Tricks und Snippets (E)
    Die Website liefert viele Tipps und Tricks rund um CSS und liefert die entsprechenden Code-Schnipsel.
    css-tricks.com
  • Runde Ecken generieren (E)
    Der Generator hilft beim Erstellen von abgerundeten Ecken für Boxen, indem er den CSS-Code nach definierten Werten erstellt.
    border-radius.com
  • Farbverläufe generieren (E)
    Selbst Farbverläufe lassen sich mit CSS generieren.
    colorzilla.com/gradient-editor/
  • CSS Gradient (E)
    ist eine fröhliche kleine Website und ein kostenfreies Online-Tool, mit dem Sie einen Farbverlauf-Hintergrund für Websites erstellen können. Abgesehen davon, dass es sich um einen CSS-Farb­ver­laufs­gene­rator handelt, ist die Website auch vollgepackt mit farbenfrohen Inhalten über Farb­verläufe, von technischen Artikeln bis hin zu realen Farb­ver­laufs­bei­spielen wie Stripe und Instagram.
    cssgradient.io
  • Knöpfe erstellen (E)
    Mit einem Button-Generator erstellen Sie schöne Navi­gations­elemente. Dieser Generator hat einiges zu bieten. So generieren Sie abgerundete Buttons mit Farbeffekten.
    css3button.net
    3D-Text mit CSS
    Quelle: ccs3button.net
  • CSS Minify (E)
    Mit diesem Tool können Sie CSS-Code komprimieren, damit Web­seiten weniger Code laden müssen und sich schneller aufbauen.
    cleancss.com/css-minify/
  • CSS Maker (E)
    Leistungsfähiger Generator für vieles aus der Welt von CSS. (Text rotieren lassen, Boxen, Schat­ten­effek­te, usw.)
    css3maker.com und eine Alter­native dazu: css3generator.com
  • Sprechblasen Generator (E)
    Erstellt eine Sprechblase; es kann u.a. die Farbe und die Grösse definiert werden.
    cssarrowplease.com
  • Boxen Generator (E)
    Der Generator erstellt Boxen mit einem Schatteneffekt. (Shadow)
    layerstyles.org/builder.htm

Animationen

Mit diesen CSS-Codes bringen Sie Bewegung in Ihre Website.

  • Objekte bewegen (E)
    Per Symbol {.} können Sie die gewählten Objekte mit diversen Optionen als CSS-Code gener­ieren. Damit lassen sich die Objekte unter anderem
    ➤ rotieren,
    ➤ mit Schatten versehen,
    ➤ mit einem 3D-Effekt erweitern,
    ➤ Texte bewegen,
    ➤ Hintergrundbilder und Hinter­grund­farben manipulieren
    ➤ und vieles anderes mehr.
    animista.net
  • Animierte Schrift (E)
    Per animate.css-Datei erweitern Sie Ihre Website um verschiedene Text-Animationen wie bei­spiels­weise pul­sieren, schwingen, blitzen, zoomen, etc.
    daneden.github.io/animate.css/
  • 30 seconds of code (e)
    Bietet einfache Effekte wie Button border animation, Bouncing loader und Donut spinner.
    30secondsofcode.org/css/s/button-border-animation

Autor: Walter B. Walser, kundennutzen.ch

Verfolgen Walter B. Walser:

Gründer des pra­xis­na­hen On­li­ne-Mar­ke­ting Ma­ga­zins kundennutzen.ch, Autor und Online-Marketing Manager. Er half frü­her Un­ter­neh­mern 100% mehr aus Ihrer Web­site he­r­au­­s­zu­­­ho­len. Er hat KMU in Bezug auf deren Web­auf­tritt be­raten und sich auf die Web­si­te-Pfle­ge, Web­si­te-Opti­mie­rung und das On­li­ne-Mar­ke­ting mit On­li­ne-Tools spe­zia­li­siert.