Hallo Acadopuser!
Ich möchte Ihnen deutsche Übersetzung eines ganz tollen Artikels anbieten.

Jedem ist der CSS-Parameter border bekannt, jedoch möchte ich einige Beispiele bringen, was und wie man damit machen kann, vielleicht lernt jemand noch was dazu. Z.B. die Figur wird mit Hilfe von border gemalt. Interessant?

Grundlage

Alle wissen die Zeile:

border: 1px solid black;

Das ist 1px-border.Ändern wir die Zeile:

border-width: thick;
border-style: solid;
border-color: black;

Z.B. Parameter border-width kann drei Werte annehmen: thin, medium, thick:



Wenn man die Farbe beim Mouse-Over geändert werden soll:

.box {
    border: 1px solid red;
}
.box:hover {
    border: 1px solid green;
}
Das Gleiche einfacher:
.box {
    border: 1px solid red;
}
.box:hover {
    border-color: green;
}

Border-Radius

Border-radius ist ein neuer CSS3 Parameter. Er funktioniert in jedem modernem Browser außer IE8 und älteren.



Für jede Ecke kann man den Radius separat festlegen.

border-top-left-radius: 20px;
border-top-right-radius: 0;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 0;

Das obige Beispiel kann man einfacher tun:

/* top left, top right, bottom right, bottom left */
border-radius: 20px 0 30px 0;

Mit CSS kann man sogar eine Zitrone malen:

.lemon {
   width: 200px; height: 200px; 
   background: #F5F240;
   border: 1px solid #F0D900;
   border-radius: 10px 150px 30px 150px;
}

Das waren die einfachsten Beispiele, jetzt kommen ein bisschen komplexere.

Border-Style

solid, dashed, and dotted — die bekannteste Werte von border-style, schauen wir andere an, z.B. groove und ridge.

border: 20px groove #e3e3e3;

oder ausführlicher:

border-color: #e3e3e3;
border-width: 20px;
border-style: groove;

Outline

Der populärste Weg zwei borders zu erzeugen:

.box {
   border: 5px solid #292929;
   outline: 5px solid #e3e3e3;
}

Er funktioniert ganz gut, wenn man nur zwei borders braucht. Und wenn mehr?

Pseudo Elements

Man kann folgende Konstruktion benutzen.

.box {
  width: 200px; height: 200px;
  background: #e3e3e3;
  position: relative;
  border: 10px solid green;
}
/* Create two boxes with the same width of the container */
.box:after, .box:before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
.box:after {
  border: 5px solid red;
  outline: 5px solid yellow;
}
.box:before {
  border: 10px solid blue;
}

Sicher, keine beste Lösung, aber funktioniert.

Box-Shadow

Noch eine Methode, mehrere borders zu bekommen:

.box {
    border: 5px solid red;
     box-shadow:
       0 0 0 5px green,
       0 0 0 10px yellow,
       0 0 0 15px orange;
}

Änderung von Winkels

Dem Parameter border-radius kann man zwei Werte übergeben, die muss man nur mit „/“ trennen.

border-radius: 50px / 100px; /* horizontal radius, vertical radius */

Oder das Gleiche:

border-top-left-radius: 50px 100px;
border-top-right-radius: 50px 100px;
border-bottom-right-radius: 50px 100px;
border-bottom-left-radius: 50px 100px;

Die Methode kann man benutzen um einige interessante Effekte zu erzeugen, z.B. Papier-Effekt:

.box {
    width: 200px; height: 200px;
    background: #666;
    border-top-left-radius: 15em 1em;
    border-bottom-right-radius: 15em 1em;
}

CSS-Figuren

Für nächste Beispiele gilt folgendes:

HTML:

<div class="box"></div>

CSS:

.box {
   width: 200px;
   height: 200px;
   background: black;
}

Das häufigste Beispiel für Benutzung von CSS-Figuren ist ein Pfeil. Um zu verstehen, wie es funktioniert, muss man zuerst mit border-color für jede Seite ( bei width und height=0) klar kommen.

.arrow {
  width: 0; height: 0;
  border-top: 100px solid red;
  border-right: 100px solid green;
  border-bottom: 100px solid blue;
  border-left: 100px solid yellow;
}

Oder das Gleiche:

.arrow {
  width: 0; height: 0;
  border: 100px solid;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
}

Oder anders:

.arrow {
  width: 0; height: 0;
  border: 100px solid;
  border-color: red green blue yellow;
}

Und jetzt lassen wir nur das blaue Dreieck erscheinen.

.arrow {
  width: 0; height: 0;
  border: 100px solid;
  border-bottom-color: blue;
}

Erzeugung von Speech Bubble

Unseren HTML und CSS:

<div class="speech-bubble">Hi there!</div>

.speech-bubble {
    position: relative;
    background-color: #292929;
    width: 200px;
    height: 150px;
    line-height: 150px; /* vertically center */
    color: white;
    text-align: center;
}

Jetzt wollen wir unser Pfeil-Dreieck an richtige Stelle positionieren. Zuerst zeigen wir unser farbiges Quadrat an.

.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: red green blue yellow;
}

Lassen wir nur ein Viertel davon:

.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid;
  border-top-color: red;
}

Jetzt ändern wir seine Position und Farbe:

.speech-bubble {
   /* … other styles */
   border-radius: 10px;
}
.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
  border-top-color: #292929;
  top: 100%;
  left: 50%;
  margin-left: -15px; /* adjust for border width */
}

Beispiel von Benutzung:

/*
   Speech Bubbles
   Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTION
   <div class="speech-bubble speech-bubble-top">Hi there</div>
*/
 
.speech-bubble {
  position: relative;
  background-color: #292929;
  width: 200px;
  height: 150px;
  line-height: 150px; /* vertically center */
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
}
 
.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
}
 
/* Position the Arrow */
 
.speech-bubble-top:after {
  border-bottom-color: #292929;
 
  left: 50%;
  bottom: 100%;
  margin-left: -15px;
}
.speech-bubble-right:after {
  border-left-color: #292929;
 
  left: 100%;
  top: 50%;
  margin-top: -15px;
}
 
.speech-bubble-bottom:after {
  border-top-color: #292929;
 
  top: 100%;
  left: 50%;
  margin-left: -15px;
}
 
.speech-bubble-left:after {
  border-right-color: #292929;
  top: 50%;
  right: 100%;
  margin-top: -15px;
}

Vertikale Text-Ausrichtung

Der Nachteil von line-height für vertikale Text – Ausrichtung ist Begrenzung auf genau eine Zeile. Um das Problem zu lösen kann man display: table für Speech Bubble und display: table-cell für Text anwenden.

.speech-bubble {
 /* other styles */
  display: table;
}
.speech-bubble p {
  display: table-cell;
  vertical-align: middle;
}

Und noch ein ganz tolles Beispiel:

.biohazard {
  width: 0; height: 0;
  border: 60px solid;
  border-radius: 50%;
  border-top-color: black;
  border-bottom-color: black;
  border-left-color: yellow;
  border-right-color: yellow;
}

Fazit

Border ist nicht nur «1px solid black». Damit kann man verschiedene interessante Figuren und Effekte basteln.