Platz 5: Border Slants
Wen es um die grafische Gestaltung einer Website geht, scheint auf den ersten Blick
ohne das Einbinden von Bildern recht wenig möglich zu sein - mit reinem
HTML und CSS
sind ja lediglich vertikale und horizontale "Zeichnungen" möglich - oder?
Oder doch nicht - auch schräge Linien sind möglich, und zwar mit den "Border Slants".
Was sind Border Slants?
Der Begriff "Border Slants" ist sinngemäß mit "schräger Rahmen" oder "schräge Rahmenfläche" übersetzbar. Die Technik der Border Slants macht sich zu Nutze, dass in HTML die Eckkanten zwischen zwei Rahmen-Linien mit einer schrägen Linie aneinander stoßen - meist sieht man das jedoch nicht, da Rahmen nur wenige Pixel breit sind. Aber schauen wir doch mal genau hin:
Man sieht sehr schön, wie sich jede Seite des Rahmen inviduell gestalten lässt, und wie die Grenzlinie beschaffen ist. Und damit kann man jetzt jede Menge lustige Sachen anstellen, z.B:
<style type="text/css">
.colors {border-color:yellow green blue red;}
.borderdraw {line-height:0px;width:0px;height:0px;border-style:solid;}
</style>
<div style="width:300px;"> <!-- width:?px makes IE happy. Don't ask! -->
<div style="float:left;width:100px;height:100px;"><!-- --></div>
<div class="borderdraw" style="float:left;border-width:65px 15px 35px 85px;border-color:#fffff0 #f0fff0 #000040 #fff0f0;"><!-- --></div>
<div style="float:left;width:100px;height:100px;"><!-- --></div>
</div>
<div style="clear:left">
<div class="borderdraw" style="float:left;border-width:15px 35px 85px 65px;border-color:#fffff0 #004000 #f0f0ff #fff0f0;"><!-- --></div>
<div style="float:left;width:100px;height:100px;background-color:black;color:white;text-align:center;"><div style="padding:40px 0px;">Content!</div></div>
<div class="borderdraw" style="float:left;border-width:85px 65px 15px 35px;border-color:#fffff0 #f0fff0 #f0f0ff #400000;"><!-- --></div>
</div>
<div style="clear:left">
<div style="float:left;width:100px;height:100px;"><!-- --></div>
<div class="borderdraw" style="float:left;border-width: 35px 85px 65px 15px;border-color:#303000 #f0fff0 #f0f0ff #fff0f0;"><!-- --></div>
<div style="float:left;width:100px;height:100px;"><!-- --></div>
</div>
Viele weitere Erläuterungen und Beispiele, teilweise auch mittels Javascript animiert, finden sich auf infimum.dk - Information on Border Slants.
Bewertung
| Platz 5 |
Praktischer Nutzen |
|
Als ich die Seite gefunden habe, war ich mal wieder begeistert, was man aus CSS alles rausholen kann. Vor allem in Kombination mit Javascript lässt sich hier einiges interessantes erschaffen. Allerdings habe ich bis jetzt noch keine reale Problemstellung, bei der mir die Technik von Hilfe gewesen wäre. |
|---|---|---|---|
| Originalität |
|
||
| Anspruch |
|
||
| Browserkompatibilität * |
|
||
| Summe | 13 | ||
| *: kleine Darstellungsprobleme in IE 5.5 und IE 6 | |||