Verschiedene Codeschnipsel für's Webdesign & Webdevelopment

Übersicht der bisher vorhandenen Einträge:

Hier gibts Tipps und Tricks, sowie Codefragmente und Snippets rund um die jeweiligen Bereiche zum sofortigen Einsatz.



Html, Webdesign und CSS

    Suchen leicht gemacht - Links finden in der Datenbank von web2work.de
  • Textrahmen mit CSS
  • Es ist natürlich interessant oder ganz spassig, dazu Grafiken einzubinden, oder auch mit "fieldset" die Schrift genau in die Rahmenlinie zu setzen. Man sollte dabei aber im Blick haben, ob sich die Ladezeit der Seite erhöht, oder welche Effekte sinnvoll sind, bzw. zueinander passen und miteinander harmonieren (Farb- und Schriftwahl etc.).

    Durch diese einfache wie auch effektvolle Methode erzielt man bereits in der einfachen Variante ansehnliche Ergebnisse Man kann dazu folgendermassen vorgehen:
    Um einen Stil individuell einsetzen zu können, definiert man sich zunächst eine CSS-Klasse wie .rahmen o. ä., die gleichmäßig den Text einrahmt. Dazu legt man dann die gewünschten Attribute fest:

    <style type="text/css">
    <!–
    .rahmen
    {
    border: 2px dotted #ccff00;
    padding: 12px;
    background-color: #FFFFEE;
    }
    –>
    </style>

    Hinter der CSS-Anweisung border steht zunächst die Rahmendicke wie 2px, dann eine Rahmenart wie dotted (gepunktet) und die Rahmenfarbe. Hier kann man neben dem Hexcode wie #ccff00 auch einen Standardnamen wie red (FF0000) verwenden. Anstatt die Rahmendicke mit numerischen Angaben zu notieren, sind auch relative Angaben wie thick, medium oder thin zugelassen. Mit padding gibt man den Abstand zwischen Rahmen und Textelement an, wobei man sich auch hier unterschiedlicher Maßeinheiten bedienen darf. Analog zur Rahmenfarbe definiert man mit background-color die Hintergrundfarbe.



    Legt man sich hier eine kleine Tabelle an, kann man immer für spätere Experimente auf seine Favoriten zurückgreifen und erschafft sich zudem mehr Gestaltungsfreiheit.



Google
 
Bookmarks online verwalten und teilen!
Bookmark bei: Mr. Wong Bookmark bei: Webnews Bookmark bei: Oneview Bookmark bei: Linkarena Bookmark bei: Yigg Bookmark bei: Del.icio.us Bookmark bei: Netscape Bookmark bei: Furl Bookmark bei: Yahoo Bookmark bei: Spurl Bookmark bei: Google Bookmark bei: Blinklist Information




© 2006-2007 web2work.de - Impressum