Webdesign mit CSS3. Max Bold

Чтение книги онлайн.

      Ein Rechteck wird über den Kasten gelegt (Bild 3)

      In der HTML-Seite wird dafür lediglich ein einfaches -Element eingebaut, welches Textabsätze festlegt. Über die Definition der Klasse rib1 werden dann in der CSS-Datei die Eigenschaften des ersten Bandes und entsprechend aller weiteren Bänder beschrieben:

      Hier hat die Klasse .rib1 die folgenden Eigenschaften: Eine zentrierte Darstellung, eine relative Positionierung und eine margin, die den Außenabstand des Elements von 30px nach oben und unten und -30px nach links und rechts definiert. Durch diese margin wird der gewünschte Effekt erzielt, dass die Ränder des Bandes überstehen. Weiter wird der padding definiert: er erzielt einen Innenabstand des Texts im - Element von 10px nach oben und unten und 0px nach rechts und links. Für die Hintergrundfarbe des Bandes ist ein helles Gelb gewählt (# FFFF80) und die Höhe des Textelements ist mit 20px festgelegt:

      .rib1 {

      text-align: center;

      position: relative;

      margin: 30px -30px 30px -30px;

      padding: 10px 0;

      background: #FFFF80;

      height:20px;

      }

      Das erste Band können Sie in Ihrer Webseite nun schon sehen, jetzt werden noch die Elemente zur Erzeugung des dreidimensionalen Effekts hinzugefügt: Zuerst geben Sie dem Band einen Schatten. Dies wird durch das Attribut box-shadow erreicht. Auch hier gibt es wieder die gesonderten Prefixes für Mozilla und Webkit-Browser. Im dargestellten Fall handelt es sich um einen Außenschatten, er kann durch 5 Eigenschaften definiert werden. Alle Werte werden dabei in px (Pixel angegeben). Die erste Eigenschaft bewirkt einen Schatten nach rechts (positive Zahl) oder links (negative Zahl), die zweite einen Schatten nach oben (negative Zahl) oder unten (positive Zahl). Die dritte optionale Eigenschaft erzielt einen verschwommenen Schatten um den gesamten Kasten herum. Je größer die Zahl, desto verschwommener ist der Schatten. Die vierte, ebenfalls optionale Eigenschaft, gibt an wie weit der Schatten gestreut wird. Schließlich gibt es noch die Möglichkeit die Farbe des Schattens anzugeben. Der unten beschriebene Schatten hat nur einen verschwommenen Schatten um das Element herum und eine Farbangabe, alle anderen Eigenschaften sind Null oder nicht angegeben.

      -moz-box-shadow: 0 0 10px #555;

      -webkit-box-shadow: 0 0 10px #555;

      box-shadow: 0 0 10px #555;

      Zuletzt fehlen dem Band noch die beiden kleinen Dreiecke links und rechts am Rand des Hintergrundkastens. Sie machen einen großen Teil der dreidimensionalen Wirkung des Bandes aus. Diese Dreiecke werden mit Hilfe der CSS Eigenschaft border erstellt.

      Für das erste Band brauchen Sie links und rechts jeweils ein kleines Dreieck. Diese werden durch die Pseudoelemente :after und :before eingefügt. Diese Pseudoelemente bewirken, dass vor ein anderes Element ein bestimmter Inhalt eingefügt werden kann. Den Source Code der Pseudoelemente und der Dreiecke im CSS-File sehen Sie im folgenden Listing:

      .rib1:after, .rib1:before

      {

      content: '';

      position: absolute;

      border-style: solid;

      width: 0;

      bottom: -10px;

      border-width: 5px;

      }

      .rib1:before

      {

      border-color: #222 #222 transparent transparent;

      left: 0;

      }

      .rib1:after

      {

      border-color: #222 transparent transparent #222;

      right: 0;

      }

      Zuerst werden hier die gemeinsamen Attribute von :after und :before gesetzt: der Inhalt wird leer gelassen, die Postion auf absolut gesetzt, das Element erhält einen durchgezogenen Rahmen mit 5px Breite und wird durch bottom -10px um 10 Pixel nach unten verschoben. Das Pseudoelement selbst erhält die Breite 0. Das Dreieck links hat eine andere Ausrichtung als das Dreieck rechts, daher werden diese gesondert definiert. Das linke Dreieck erhalten Sie dadurch, dass Sie für das Pseudoelement :before das Attribut border-color auf die folgenden Werte setzen: oben und rechts wird es grau (#222), unten und links durchsichtig. Wenn Sie alle HTML und CSS Teile eingefügt haben ist Ihr erstes Band aus dem Beispiel fertig.

      Mit border zum Dreieck

      Border ist der Rahmen eines Elements. Wie kann man nun damit ein Dreieck bauen? Zum besseren Verständnis machen Sie einmal einen kleinen Test. Nehmen Sie einen Textbereich einer HTML-Seite und geben Sie diesem eine Klasse test. In der CSS-Datei setzen Sie nun, wie in folgendem Listing zu sehen ist, die Breite des Rahmen auf 0 und definieren Sie einen 20px festen Rahmen. Zur besseren Darstellung wählen Sie für jede Rahmenseite eine eigene Farbe. Im Beispiel sind die Farben rot für oben, blau für recht, schwarz für unten und grün für links gewählt. Sie erhalten vier farbige Dreiecke. Fassen Sie nun zwei dieser Dreiecke zusammen, zum Beispiel das rote und das blaue Dreieck. Geben Sie beiden Dreiecken die graue Farbe für das Schattendreieck und setzen Sie die beiden verbleibenden Dreiecke auf transparent, so erhalten Sie die Form des Dreiecks das im ersten Band links verwendet wird:

      .test {

      border: 20px solid;

      border-color: red blue black green;

      width: 0;

      }

      Im Folgenden werden die Änderungen erläutert, die Sie einbauen müssen, um die Varianten der Bänder zu erhalten. Beim Band vom Typ 2 sind die Dreiecke, die die Schatten darstellen, oben eingefügt und nicht unten wie beim Typ 1. Um dies zu erreichen müssen Sie im Vergleich zum Typ 1 kleine Änderungen in den Pseudoelementen :before und :after einbauen:

      .rib2:before

      {

      border-color: transparent #222 #222 transparent;

      left: 0;

      }

      .rib2:after

      {

      border-color: transparent transparent #222 #222;

      right: 0;

      }

      Wenn СКАЧАТЬ