Teil 4: Figuren gestalten mit CSS – Was ist noch möglich?

css_teil4

Dass man mit CSS nicht nur Schriften einfärben und Hintergründe definieren kann, das ist weitgehend bekannt. Was aber wirklich mit CSS möglich ist, das ist noch nicht sonderlich gut aufgezeigt. Daher haben wir uns dazu entschlossen, hier einige Tipps und Tricks zu geben, wie wir mit CSS gestalten können und uns kreativ austoben können.

Im ersten Teil berichteten wir über die Grundformen wie Quadrate, Rechtecke, Kreise und Ovale. Im zweiten Teil gingen wir auf die Gestaltung von Dreiecken näher ein. Thema des dritten Teils waren Mehrecke bzw. Sterne. Heute Lassen wir es krachen. Sprechblasen, Herzen, ja sogar Mattscheiben sind möglich.
Ausgangslage ist für uns immer ein Container <div class="???"></div> mit dem jeweiligen Klassennamen (zum Beispiel #stern5) im unteren Kasten.

Sprechblase

Figur
CSS-Code


#sprechblase {
 width: 120px; 
 height: 80px; 
 background: #ffcc00;
 position: relative; 
 -moz-border-radius: 10px; 
 -webkit-border-radius: 10px; 
 border-radius: 10px; 
 } 
#sprechblase:before { 
content:""; 
position: absolute; 
right: 100%; 
top: 26px; 
width: 0; 
height: 0; 
border-top: 13px solid transparent; 
border-right: 26px solid #ffcc00; 
border-bottom: 13px solid transparent; 
}

liegende Acht / endlose Schleife

Figur
CSS-Code


#liegende_acht { 
position: relative; 
width: 212px; 
height: 100px; 
 } 
#liegende_acht:before, #liegende_acht:after { 
content: ""; position: 
absolute; top: 0; 
left: 0; 
width: 60px; 
height: 60px; 
border: 20px solid #ffcc00; 
-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); 
} 
#liegende_acht: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); 
}

Herz

Figur
CSS-Code


#herz { 
 position: relative; 
 width: 100px; 
 height: 90px; 
} 
#herz:before, #herz:after {
 position: absolute; 
 content: ""; 
 left: 50px; 
 top: 0; 
 width: 50px; 
 height: 80px; 
 background: #ffcc00; 
 -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%; 
 } 
#herz: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%; 
 }

Pacman

Figur
CSS-Code


#pacman { 
 width: 0px; 
 height: 0px; 
 border-right: 
 60px solid transparent; 
 border-top: 60px solid #ffcc00; 
 border-left: 60px solid #ffcc00; 
 border-bottom: 60px solid #ffcc00; 
 border-top-left-radius: 60px; 
 border-top-right-radius: 60px; 
 border-bottom-left-radius: 60px; 
 border-bottom-right-radius: 60px; }

alter Bildschirm

Figur
CSS-Code


#tv {
 position: relative;
 width: 200px;
 height: 150px;
 margin: 20px 0;
 background: #ffcc00; 
 border-radius: 50% / 10%;
 color: FCFDFD; 
 text-align: center; 
 text-indent: .1em;
 } 
#tv:before {
 content: ''; 
 position: absolute; 
 top: 10%; 
 bottom: 10%; 
 right: -5%; 
 left: -5%; 
 background: inherit; 
 border-radius: 5% / 50%; 
 }

Lupe

Figur
CSS-Code

#lupe {
 font-size: 10em;
 display: inline-block; 
 width: 0.4em; 
 height: 0.4em; 
 border: 0.1em solid #ffcc00; 
 position: relative; 
 border-radius: 0.35em; 
 } 
 
 #lupe::before { 
 content: ""; 
 display: inline-block; 
 position: absolute; 
 right: -0.25em; 
 bottom: -0.1em; 
 border-width: 0; 
 background: #ffcc00; 
 width: 0.35em; 
 height: 0.08em; 
 -webkit-transform: rotate(45deg); 
 -moz-transform: rotate(45deg); 
 -ms-transform: rotate(45deg); 
 -o-transform: rotate(45deg); }

Lesen Sie hierzu auch:

Teil 1: die Grundformen
Teil 2: Dreiecke
Teil 3: Mehrecke und Sterne
Teil 4: Was ist noch möglich?