Drücke die Tasten ◄ ► für weitere Artikel  

CSS: Mit Pseudoelementen komplexe Formen erzeugen

Mit reinem CSS ist einiges mehr möglich als nur abgerundete Ecken. Wir zeigen euch, wie ihr mit den Pseudoelementen before und after verschiedenste Formen mit reinem CSS erzeugen könnt und wie diese Formen entstehen.

CSS: Mit Pseudoelementen komplexe Formen erzeugen

Mit den CSS-Pseudoelementen before und after können vor – beziehungsweise nach – einem Element beliebige Inhalte eingefügt werden. Diese Inhalte lassen sich mit ansprechen und verändern, womit verschiedenste Formen mit reinem CSS erstellbar sind. In den folgenden Code Schnipseln findet ihr einige Beispiele dafür, was mit den Selektoren und reinem CSS im IE9, Chrome, Safari, Firefox und Opera möglich ist.

CSS-Grundformen

CSS Grundformen
CSS-Rundformen

Alle Formen, die wir gleich erzeugen werden, entstehen aus Grundformen, die mit CSS-Transform umpositioniert werden und so übereinander gelegt komplexe Formen ergeben. Wir fangen also mit einfachen Formen an und arbeiten uns weiter vor.

Wie man Grundformen wie Quadrate, Rechtecke oder Kreise erzeugt, dürfte kein allzu großes Geheimnis sein.

#quadrat {

width: 100px;

height: 100px;

background: #000;

}

#rechteck {

width: 200px;

height: 100px;

background: #000;

}

#kreis {

width: 100px;

height: 100px;

background: #000;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

Bei Dreiecken wird es schon ein wenig komplexer. Mit dem folgenden CSS-Code erzeugt ihr ein gleichschenkliges Dreieck mit einer Spitze nach oben:

#triangle-up {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid #000;

}

CSS Dreieck Aufbau

Passt man die Breite von border-bottom an, wird das Dreieck höher. Mit der Anpassung der Breite von border-right und border-left könnt ihr den Winkel oben steuern. Soll das Dreieck mit Spitze nach unten erzeugt werden, ändert ihr border-bottom in border-top.

Mit einer ähnlichen Herangehensweise kann ein Trapez erzeugt werden. Hierfür müsst ihr lediglich die width für das Objekt angepassen.

#trapezoid {

border-bottom: 100px solid #000;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

height: 0;

width: 100px;

}

Ein Parallelogramm erzeugt ihr mit der CSS Transform-Methode skew.

#parallelogramm {

width: 150px;

height: 100px;

-webkit-transform: skew(20deg);

-moz-transform: skew(20deg);

-o-transform: skew(20deg);

background: #000;

}

Komplexere Formen mit CSS before und after

Mit diesen Grundformen können wir jetzt komplexere Formen erzeugen. Im folgenden Listing werden mit CSS und den Pseudoelementen before und after Dreiecke erzeugt, gedreht und übereinander gelegt, sodass ein Stern mit 5 Spitzen entsteht.

#star-five {

margin: 50px 0;

position: relative;

display: block;

color: #000;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px  solid#000;

border-left: 100px solid transparent;

-moz-transform: rotate(35deg);

-webkit-transform: rotate(35deg);

-ms-transform: rotate(35deg);

-o-transform: rotate(35deg);

}

#star-five:before {

border-bottom: 80px solid#000;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

position: absolute;

height: 0;width: 0;

top: -45px;

left: -65px;

display: block;

content: '';

-webkit-transform: rotate(-35deg);

-moz-transform: rotate(-35deg);

-ms-transform: rotate(-35deg);

-o-transform: rotate(-35deg);

}

#star-five:after {

position: absolute;

display: block;

color:#000;

top: 3px;

left: -105px;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid#000;

border-left: 100px solid transparent;

-webkit-transform: rotate(-70deg);

-moz-transform:    rotate(-70deg);

-ms-transform:     rotate(-70deg);

-o-transform:      rotate(-70deg);

content: '';

}

Etwas für den alltäglichen Einsatz bei der Erstellung eines GUI mit Tooltips wäre eine CSS-Sprechblase, die ihr mit dem folgenden Code erzeugen könnt:

#talkbubble {

width: 120px; 

height: 80px; 

background: #000;

position: relative;

-moz-border-radius: 10px; 

-webkit-border-radius: 10px;

border-radius: 10px;

}

#talkbubble:before {

content:"";

position: absolute;

right: 100%;

top: 26px;

width: 0;

height: 0;

border-top: 13px solid transparent;

border-right: 26px solid#000;

border-bottom: 13px solid transparent;

}

Pentagon

Auch Figuren wie ein Pentagon sind mit dem folgenden Code kein Problem.

#pentagon {

position: relative;

width: 54px;

border-width: 50px 18px 0;

border-style: solid;

border-color:#000 transparent;

}

#pentagon:before {

content: "";

position: absolute;

height: 0;

width: 0;

top: -85px;

left: -18px;

border-width: 0 45px 35px;

border-style: solid;

border-color: transparent transparent#000;

}

Sogar ein Herz oder das Infinity-Symbol lassen sich mit reinem CSS erzeugen.

Mit CSS erzeugtes Herz
CSS Herz

 

#heart {

position: relative;

width: 100px;

height: 90px;

}

#heart:before,

#heart:after {

position: absolute;

content: "";

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: red;

-moz-border-radius: 50px 50px 0 0;

border-radius: 50px 50px 0 0;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%

;-o-transform-origin: 0 100%;

transform-origin: 0 100%;

}

#heart:after {

left: 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

transform-origin :100% 100%;

}

 

Mit CSS erzeugtes Infinity Symbol
CSS Infinity Symbol

 

#infinity {

position: relative;

width: 212px;

height: 100px;

}

#infinity:before,

#infinity:after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 60px;

height: 60px;

border: 20px solid#000;

-moz-border-radius: 50px 50px 0 50px;

border-radius: 50px 50px 0 50px;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

}

#infinity:after {

left: auto;

right: 0;

-moz-border-radius: 50px 50px 50px 0; 

border-radius: 50px 50px 50px 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

}

Wer einen Störer erzeugen möchte, kann den folgenden Code verwenden:

Mit CSS erzeugter Störer
CSS Störer

 

#burst-12 {

background: #000;

width: 80px;

height: 80px;

position: relative;

text-align: center;

}

#burst-12:before, #burst-12:after {

content: "";

position: absolute;

top: 0;

left: 0;

height: 80px;

width: 80px;

background: #000;

}

#burst-12:before {

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

}

#burst-12:after {

-webkit-transform: rotate(60deg);

-moz-transform: rotate(60deg);

-ms-transform: rotate(60deg);

-o-transform: rotate(60deg);

}

Mit der richtigen Anordnung von Kreisen erzeugt ihr sogar ein Yin-Yang.

Mit CSS erzeugtes Yin Yang
CSS Yin Yang

 

#yin-yang{

width: 96px;

height: 48px;

background: #fff;

border-color:#000;

border-style: solid;

border-width: 2px 2px 50px 2px;

border-radius: 100%;

position: relative;

}

#yin-yang:before {

content: "";

position: absolute;

top: 50%;

left: 0;

background: #fff;

border: 18px solid #000;

border-radius: 100%;

width: 12px;

height: 12px;

}

#yin-yang:after {

content: "";

position: absolute;

top: 50%;

left: 50%;

background: #000;

border: 18px solid #fff;

border-radius:100%;

width: 12px;

height: 12px;

CSS Formen - mehr als Codespielerei

Aus den verschiedenen Grundformen können in Kombination mit den Pseudoelementen before und after durch reines CSS verschiedenste Formen erzielt werden. Was sich zunächst als Spielerei zeigt, kann beim entsprechenden Einsatz ein nützlicher Begleiter werden und das Einbinden von der ein oder anderen Grafikdatei unnötig machen. Probiert es selbst aus und kreiert euere eigenen Formen und Effekte. Viel Spaß beim Experimentieren!

Über den Autor

Ilja bigIlja Zaglov ist selbstständiger Kommunikations- & Mediendesigner. Er unterstützt kleine und mittelständische Unternehmen bei der Erstellung von Online- und Offline-Medien. Neben Web-Gestaltung gehören Motion-Graphics und 3D-Inhalte zu seinen Spezialgebieten.

181 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
9 Antworten
  1. von Mario am 02.12.2012 (09:47Uhr)

    Schön zusammenkopiert.

  2. von Elemente mit CSS3 | WebLab Studio am 02.12.2012 (14:07Uhr)

    [...] direct link to the article Link to this post!Share with:FacebookTwitterGoogle +1E-MailDrucken css Technology [...]

  3. von Raymond Schreiber via facebook am 03.12.2012 (10:38Uhr)

    t3n Magazin: Für ein "webaffines Magazin" seit ihr extrem rückständig, was die verwendeten Techniken auf eurer Website angeht. Wie wäre es mal mit einer brauchbaren Galerie (kein Page Reload für jedes Bild - ja. Ich weiß. Dann gehen die PI runter ;-)) und einem Syntax Highlighter für solche Artikel? Google Code Prettify scheint ja bei jedem Request mitgeladen zu werden - jetzt muss es nurnoch korrekt verwendet werden.

  4. von Johannes Haupt via facebook am 03.12.2012 (10:48Uhr)

    @Raymond Danke für die Rückmeldung. Syntax Highlighter: Haben wir, kommt ab sofort auch regelmäßig zur Anwendung :) Galerie ohne Page Reloads: Wird es geben, steht schon auf der IT-Agenda.

  5. von igorshmigor am 03.12.2012 (13:50Uhr)

    Verrückt, vor über einem Jahr hatten andere ebenfalls Herz, Stern, Infinity-Symbol und Yin-Yang Zeichen mit CSS gemacht:
    http://css-tricks.com/examples/ShapesOfCSS/

    Zufälle gibts ;)

  6. von igorshmigor am 03.12.2012 (14:08Uhr)

    P.S.: will damit nur sagen, eine Erwähnung der Quellen/Authoren, deren Ideen hier aufgeführt wurden, wäre anständig gewesen.

  7. von tethi am 04.12.2012 (10:10Uhr)

    ich habe noch nie ein Blog oder Forum gesehen, wo so viel kritisiert wird.
    90% der User sind hier ja wahre Internet-Allwissende. Bei diesen überheblichen Kommentaren wird mir echt schlecht.

    Warum bereichern uns die Kritiker nicht einfach mal mit eigenen Artikeln?

  8. von JenZ am 04.12.2012 (12:21Uhr)

    schlimmer gehts immer @tethi schau mal ins golem forum ;)
    egal wie konstruktiv man da etwas schreibt, es gibt immer einen der es da besser weiß oder dich disst ...

    Zum Thema: ich frage mich wozu man das braucht ... also WIRKLICH braucht? Setzt das irgendjemand ein? (abgesehen vielleicht von den Text-Bubbles)
    Dank Sprites die einmal geladen werden kann man doch x-beliebige Icons da rein packen und in der Größe wie man sie braucht, sind sie auch nicht viel größer als der Hickhack mit dem CSS da oben (der vor allem nur in neueren Browsern funktioniert).

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS
CSS-Diner: Nerd-Spiel mit CSS-Selektoren für zwischendurch
CSS-Diner: Nerd-Spiel mit CSS-Selektoren für zwischendurch

CSS Diner ist ein kleines Spiel, bei dem ihr mit CSS-Selektoren verschiedene Elemente aus einer interaktiven Grafik auswählen müsst. In diesem Artikel zeigen wir euch, warum dieses Spiel nicht... » weiterlesen

Hover.css: 50 Hover-Effekte für deine Webseite
Hover.css: 50 Hover-Effekte für deine Webseite

Hover.css bietet dir eine Sammlung von Hover-Effekten, die du auf verschiedene Elemente deiner Website anwenden kannst. Heute stellen wir dir diese kleine, aber feine CSS-Bibliothek kurz vor. » weiterlesen

CSS-Regions vor dem Aus: Google und Opera stellen sich gegen die Adobe-Technik
CSS-Regions vor dem Aus: Google und Opera stellen sich gegen die Adobe-Technik

Google- und Opera-Entwickler sehen keine Zukunft für CSS-Regions in der Blink-Engine. Bei Google sieht man in der Unterstützung vor allem ein Performance-Hindernis. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen