Textrahmen

Was ist ein Textrahmen?

• Der Textrahmen ist ein Rahmen um einen Text.
• Der Textrahmen ist ein Homepageelement.

Wie kann man einen Textrahmen in CSS machen?

.textmitrahmen {font-family:verdana,sans-serif,Tahoma;font-size:105%;font-weight:400;BORDER-RIGHT: #d3d3d3 2px solid; PADDING-RIGHT: 7px; MARGIN-RIGHT: 3px; BORDER-TOP: #d3d3d3 2px solid; PADDING-LEFT: 7px; MARGIN-BOTTOM: 3px; PADDING-BOTTOM: 1px; BORDER-LEFT: #d3d3d3 2px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #d3d3d3 3px solid;background: linear-gradient(to bottom, green, white);}

• .textmitrahmen: bezeichnet die Art Text für die die Angaben gelten sollen.
• font-family:verdana,sans-serif,Tahoma;: Die gewählten Schriftarten, wobei sans-serif und Tahoma als Ersatz dienen soll, wenn verdana nicht geht.
• font-size:105%;: Die Größe vom Text.
• font-weight:400;: Die Dicke vom Text.
• BORDER-RIGHT: #d3d3d3 2px solid;: die Rahmenfarbe, die Dicke vom rechten Rahmen, solid= der Rahmen ist eine durchgezogene Linie, dashed: gestrichelt, dotted: gepunktet, double: doppelt, grouve: Rahmen vertieft, ridge: Rahnmen erhöht, inset: Bereich innerhalb vom Rahmen vertieft, outset: Bereich innerhalb vom Rahmen erhöht, none: kein Rahmen, wenn man z.B. rechts keinen Rahmen machen will, oben und unten aber schon.
• PADDING-RIGHT: 7px;: Der innere Abstand vom Text zum Rahmen.
• MARGIN-RIGHT: 3px;: 3px ist der eingerahmte Kasten von anderen Elementen der Seite entfernt.
• PADDING-LEFT, PADDING-TOP, PADDING-BOTTOM sind die anderen Seiten.
• background: linear-gradient(to bottom, green, white);: steht für eine Zusatzangabe für einen Farbverlauf von Grün zu Weiß des Hintergrundes.
• Man muss nicht jede Seite RIGHT, LEFT, TOP, BOTTOM einzeln angeben Es reicht auch padding, margin.

Wie kann man einen an den Ecken abgerundeten oder elliptischen Textrahmen in CSS machen?

.textmitrundemrahmen {border-radius: 20px;}

.textmitelliptischrahmen {border-radius: 10px;20px;}

• Die meisten Browser stellen es dar.
• Im obigen Beispiel bekommen alle vier Ecken die gleichen Rundungen.
• border-radius: 20px;: Die Rundung wird mit der Pixel-Angabe (px) gewählt.
• border-radius: 10px;20px;: Zwei Pixelangaben: Die erste Zahl steht für den horizontalen, die zweite für den vertikalen Wert.
• Unterschiedliche Ecken macht man so:
• Befehle für Eckenpaare: „border-top-radius“ (oben) / „border-bottom-radius“ (unten) / „border-left-radius“ (links) / „border-right-radius“ (rechts)
• Befehle für einzelne Ecken: „border-top-left-radius“ (oben links) / „border-top-right-radius“ (oben rechts) / „border-bottom-left-radius“ (unten links) / „border-bottom-right-radius“ (unten rechts).
• Bei Problemen im Internet Explorer nutzt man das HTC-Script „border-radius.htc“.

Browserspezifische Angaben:
"-moz-border-radius" (Mozilla Firefox)
"-webkit-border-radius" (Safari und Google Chrome)
"-kthml-border-radius" (Safari und Konqueror)
"-o-border-radius" (Opera bis 9.x)