CSS triangle (Dreieck) generator

Du willst oder musst gerade „auf die Schnelle“, nur mit CSS-Eigenschaften, ein oder mehrere Dreiecke online erstellen?

Gefunden habe ich ein kleines Werkzeug auf der Webseite von Andre Knieriem, mit welchem du dir ein Dreieck online generieren und den CSS Code gleich mitnehmen kannst.

Ein Dreieck …

… und noch ein Dreieck …

Screenshot des Online-Dreick-Generators:

css-triangle-generator

pi(x)[css]el-Kunst

Du willst auch Deine eigene Pixel-Kunst picssel-art nur mit CSS erstellen?

Create pixel art using only CSS.

„… piCSSel-art is a drawing app to draw pixel art and get it in CSS. Yes, you heard it right, CSS. The app converts each pixel to corresponsing box-shadow CSS and generate HTML and CSS code which you can use to put that art on your page. …“

piCSSel-art

Hier ist meine Pixel-Kunst. A smile 🙂

CSS3 Button-Maker von CSS-Tricks.com

Ein netter einfacher CSS3 Button-Maker von css-tricks.com, für einen schnellen Button zwischendurch, oder zum Lernen und Ausprobieren. Das schöne an diesem Button Generator ist, das du deinen erstellten Button gleich online betrachten kannst – und zwar auch den :hover and :active Zustand. Die CSS des erstellten Buttons kannst du dir gleich anzeigen lassen, markieren, kopieren und in deiner CSS an entsprechender Stelle einfügen.


css3-tricks button-maker

Link: Button-Maker

Im wesentlichen gibt es die folgenden Einstellungsmöglichkiten:

  • Schieber für runde Ecken mit border-radius
  • Top Gradient Color
  • Bottom Gradient Color
  • Top Border Color
  • Hover Background Color
  • Text Color
  • Hover Text Color
  • Active Background Color

CSS3 Generator von css3.me

CSS3-Generatoren erleichtern nicht nur Anfängern das Leben im Umgang mit der „neuen“ Materie. Deswegen werde ich an dieser Stelle sicher auch immer wieder einige Beispiele ausprobieren und vorstellen.

Ich beginne mit dem CSS3-Generator von Peter Funk und Eric Hoffman auf css3.me

CSS3-generator-css3-me

Hier kann man direkt online die Werte eines Kontainers für die Eigenschaften „border-radius“, „box-shadow“, „background gradient“ und „opacity“ mittels Schieber ändern und die Auswirkungen gleich als Vorschau auf dem Bildschirm betrachten. Auch Rahmen- und Hintergrundfarbe sind auswählbar.

Weiterlesen