tutorials.de Buch-Aktion 05/2012
  • Webmaster & Internet

    Webmaster & Internet
  • Einfache Formen mit CSS gestalten



    Rechtecke bekommt jeder mittels CSS hin:
    Code css:
    1
    
    #rectangle { width: 200px; height: 100px; background: red; }

    Doch wie sieht's aus mit Kreisen, Dreiecken, Trapezen oder gar komplexeren Formen wie Sternen, Eiern, Herzen, einem Pac Man oder gar Sprechblasen? Nun, da muss der geneigte Web-Entwickler schon ein wenig mehr in der Trickkiste graben.

    Oder einfach folgende Seite aufrufen, die den CSS-Code der oben genannte Formen bereitstellt:

    css-tricks.com: The Shapes Of CSS


    Hinweis: Ja, man kann einen Großteil der Formen auch mittels Unicode darstellen, schindet jedoch weniger Eindruck.


    Kommentare 2 Kommentare
    1. Avatar von Alex_T
      Alex_T -
      Danke für den Link, auch wenn vermehrt mit -moz-border oder ähnlichen Dingen gearbeitet wird, was vllt. nicht über alle Browser hinweg kompatibel ist - trotzdem sehr schön
    1. Avatar von hela
      hela -
      Hallo,
      danke für den Link. Im Netz findet man unter dem Suchwort "border slants" weitere interessante Seiten zu diesem Thema:

      Information on Border Slants: http://www.infimum.dk/HTML/slantinfo.html
      A Study of Regular Polygons: http://tantek.com/CSS/Examples/polygons.html
      slantastic: http://meyerweb.com/eric/css/edge/slantastic/demo.html

      Man kann es da ziemlich weit treiben, wenn man das will:
      Flaggen mit Border-Slants: http://wrtlprnft.de/flaggen.htm
    Kommentare Kommentar schreiben

    Klicke hier, um dich anzumelden

    Was ist grün und kann quaken?