Vor einiger Zeit musste ich "übliche" Probleme in CSS lösen. Ich dachte das ich alle gängigen Befehle kenne und wie weit diese in den verschiedenen Browsern funktionieren. Da ich mein Wissen aber kontinuierlich überprüfe und verbessere habe ich zu meinem erstaunen noch zwei Tricks gefunden, die nützlich sind und gut funktionieren, aber nicht breit bekannt sind.
Clip
Clip ist ein Befehl, um von einer Box nur einen Teil anzuzeigen. css4you erklärt das besser, als ich es hier auf die Schnelle könnte. Aber interessant an der CSS-Anweisung ist, dass sie zum einen kaum benutzt und damit wohl auch kaum bekannt ist und zum anderen, dass sie breit in den Browsern unterstützt wird. Ich habe das meist mit einem div in einer gewissen Größe und einem verschobenen Hintergrundbild gelöst. Aber so geht es auf alle Elemente und ist sehr praktisch. Sozusagen das Gegenteil von overflow:hidden;
Weitere Links:
http://www.mediaevent.de/css/visualeffects-clip.html
http://www.ibloomstudios.com/articles/misunderstood_css_clip/
CSS-Boxen mit 4 runden Ecken und Kanten
Wer kennt das Problem nicht. Man soll einen Rahmen um einen Text setzen. Dieser hat 1px-Kanten an allen Seiten, rechts und unten dazu noch einen Schatten. Und dann noch 4 Ecken, die natürlich sauber mit den Kanten abschließen sollen. Das ganze auch bitte noch alphatransparent. Was habe ich nicht alles für Hacks ausprobiert. Wenn wir uns z.B. die Roundcorner Box von Panels anschauen, "löst" Merlin das Problem über Inline-CSS in beträchtlicher Größe und einiger Rechnerei.
Es gibt Hacks, die setzen X Bilder in die Ecken mit position: absolute; und dann überlappen die Kanten. Es gibt Hacks mit festen Kopf und Fuß, die dann nicht wachsen können. Es gibt Hacks mit L-Formen, die möglichst groß sind. Es werden manchmal sogar aus 1px hohen div oder gar b Tags, die immer 1px breiter werden, die Ecken "simuliert". Oder vielleicht JavaScript. Und in CSS 3 wird es eh besser... Alles in allem nicht wirklich schön.
Hier sind 25 verschiedene Hacks dafür:
http://www.devwebpro.com/25-rounded-corners-techniques-with-css/
Aber es gibt tatsächlich einen Trick. Dieser fiel mir auf, als ich das Artisteer Theme von plamo.de anschaute. Diese Themes haben schöne transparente Boxen mit runden Ecken.
Der Trick und auch die falsche Annahme, die ich bis vor kurzem mit vielen anderen teilte, steht gut beschrieben in diesem Artikel "Conflicting Absolute Positions".
Ich habe immer gedacht, dass man zu einer Box nur eine Ecke definieren kann, wenn diese position:absolute; ist. Diese Annahme ist falsch! Eine Box kann alle Ecken angegeben haben!
Also baue ich mir folgendes Beispiel:
<html>
<head><title>Box Example</title></head>
<style>
<!--
.box {
position: relative;
}
.box .ctl, .box .ctr, .box .cbl, .box .cbr {
position: absolute;
height: 9px;
width: 9px;
}
.box .ctl {
background-color: red;
top: 0px;
left: 0px;
}
.box .ctr {
background-color: blue;
top: 0px;
right: 0px;
}
.box .cbl {
background-color: green;
bottom: 0px;
left: 0px;
}
.box .cbr {
background-color: black;
bottom: 0px;
right: 0px;
}
.box .bt, .box .bb, .box .bl, .box .br {
position:absolute;
}
.box .bt {
background-color: lime;
top:0px;
left:9px;
right:9px;
height:9px;
}
.box .bl {
background-color: darkblue;
top:9px;
left:0px;
bottom:9px;
width:9px;
}
.box .br {
background-color: pink;
top:9px;
right:0px;
bottom:9px;
width:9px;
}
.box .bb {
background-color: crimson;
bottom:0px;
left:9px;
right:9px;
height:9px;
}
.box .bgc {
background-color: gray;
margin: 8px;
padding: 20px 0;
}
-->
</style>
<body>
<div class="box">
<div class="ctl"></div>
<div class="ctr"></div>
<div class="cbl"></div>
<div class="cbr"></div>
<div class="bt"></div>
<div class="bl"></div>
<div class="br"></div>
<div class="bb"></div>
<div class="bgc">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
</body>
</html>Interessant sind hier die Kanten .bt, .bb, .bl, .br. Sie haben alle zwei eigentlich gegensätzliche Positionsangaben z.B. left:10px; right:10px; Dies bewirkt aber einfach, dass das div bei 10px links startet und bis 10px rechts läuft, sobald es eine height: 9px; bekommt. Damit kann ich dann alles exakt passend bauen. Mit Browsershots habe ich das bei plamo.de in diversen Browsern getestet und es funktioniert. Vielleicht nicht im IE5, aber für den und Netscape macht heute wohl kaum noch jemand etwas.
Schaut euch diesen Hack an und wie gut das unterstützt wird. Ich denke, die Lage ist sogar besser als der alistapart Artikel es beschreibt. Damit kann man wirklich schöne Dinge machen, die einen sonst in den Wahnsinn getrieben haben. Ich hoffe, es hilft dem einen oder anderen. Für mich war das CSS Geheimwissen.
