Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 83
Zur Übersicht

83. Schriftzug aus Text, Farben und Linien (21.02.2002)

Profigrafiker holen aus ihrer Software alles heraus, um tolle Logos oder Banner zu entwerfen. Der Autor dieser Zeilen ist da bescheidener in der Wahl der Mittel, aber nicht unbedingt hinsichtlich des Ergebnisses. Mit Text und Linien lassen sich durchaus ansprechende "Konstrukte" realisieren. Als Beispiel soll der Schriftzug datenverdrahten.de von der gleichnamigen Website dienen.


Browserdarstellung des CSS-Logos



Die Formatierung wurde mit drei SPAN-Elementen erreicht, die jeweils die Textfragmente daten, verdrahten und .de umschließen. 

      
      <SPAN CLASS="d1">daten</SPAN>
      <SPAN CLASS="d2">verdrahten</SPAN>
      <SPAN CLASS="d3">.de</SPAN>
Die zugehörigen Formatdefinitionen enthalten Angaben zu Text- bzw. Hintergrundfarben, die Schriftart sowie farbig abgesetzte Randlinien, die wiederum auf die anderen verwendeten Farben abgestimmt sind. 

      
      SPAN
      {
      Font-Family: "Courier New", Courier, Sans-Serif;
      Font-Size: 34px;
      Font-Weight: bold;
      }
      
      SPAN.d1
      {
      Color: #FFFFFF;
      Background-Color: #000000;
      Border-Top: 2px solid #FF0000;
      Border-Bottom: 2px solid #000000;
      }
      
      SPAN.d2
      {
      Color: #FF0000;
      Background-Color: #FEFEFE;
      Border-Top: 2px solid #FEFEFE;
      Border-Bottom: 2px solid #000000;
      }
      
      SPAN.d3
      {
      Color: #000000;
      Background-Color: #EEEEEE;
      }
Neuere Versionen von Internet Explorer, Opera und Mozilla (incl. Netscape 6.x) stellen den Schriftzug passabel dar. Unter Netscape 4.x werden die Rahmenlinien nicht angezeigt.