Codeschnipsel für's Webdesign & Webdevelopment

Im Bereich der Webprogrammierung gibt es bestimmt zahlreiche Tricks und Kniffe oder kurze Codeschnipsel, mit denen man sich das Leben leichter machen kann. die für Ihre Seiten recht nützlich sein können, oder die für Ihre Besucher zusätzlichen Nutzwert bieten. Ich habe hier für Sie einige Tipps und Tricks zu verschiedenen Themen zusammengestellt. Hier gibts daher Tipps, Tricks, Snippets und ganze Codefragmente rund um die jeweiligen Bereiche zum sofortigen Einsatz.



CSS, Stylesheets & Layouts

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 oder etwas ähnliches., 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.

Zurück zum Inhaltsverzeichnis

Hier noch weitere Tipps und Links zum Thema:

  • DZone Snippets
    Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world.

  • Tipps für Webworker (2)
    Kleine und oft einfache Tipps für Webseitenbastler und Webworker mit oftmals großer Wirkung zu unterschiedlichen Themenbereichen.

  • Das PHP2All Webdeveloper-Portal
    PHP2All.de ist eine Plattform rund um die Entwicklung von Webseiten. Dabei geht es nicht nur um PHP, MySQL, HTML und Javscript sondern auch um alles was davon berührt wird. So findet Ihr hier Beispiele und Tutorials auch zu Betriebsystemen und vielen anderen Themen.

  • Das Skriptarchiv
    Das kostenlose Verzeichnis für Scripts, Klassen, Software und vieles mehr. Hier findet jeder Webadministrator, Anwender und Programmierer nach Themen kategorisiert fertige Programme, Programmroutinen und Codeschnippsel zur weiteren Verwendung.

  • U S E R - A R C H I V
    Informationsarchiv zu Computerthemen: Tutorials, Fachaufsätze, Referenzen, Skriptsammlungen, Softwarearchive, Online-Tools, und mehr.

  • perlUNITY - Perl | Php | Javascsript
    Frei kopierbare Skripte, die weitergegeben und selbst eingesetzt werden können, wenn die Bedingungen des Copyrights eingehalten werden. Genaueres ist auf der Seite selbst nachzulesen. Dort stehen die Skripte und Anwendungen zum Download bereit.


Valid XHTML 1.0 Transitional CSS ist valide!


© Copyright 2005 - 2024 web2work.de - Impressum