.mein-min-height-element {
min-height: 250px;
height: auto !important;
height: 250px;
}

Eines der sicherlich am meisten in aktuellen Webdesigns eingesetzten CSS3-Features sind Transparenzeffekte respektive halbtransparente Elemente. Zur Regulierung der Transparenz von Seitenelementen bietet CSS3 Webdesignern die Eigenschaft “opacity”, gefolgt von einer Gleitkommazahl zwischen null und eins. Eins bedeutet dabei vollständig deckend, null bedeutet vollständig transparent.

Um nun beispielsweise ein DIV-Blockelement halbtransparent erscheinen zu lassen, genügt die folgende CSS-Angabe:

div {opacity:0.5}

Wie üblich braucht es für den Internet Explorer einen Sonderweg über die “filter”-Eigenschaft. Dabei ist zu beachten, das der Transparenzwert in diesem Fall prozentual anzugeben ist:

div {filter: Alpha(opacity=50)}

Last but not least bestünde auch noch die Möglichkeit, den Transparenzwert via “rgba()” zu implementieren. Doch zum einen unterstützt dies der Internet Explorer nicht und zum anderen vererben sich rgba()-Eigenschaften nicht auf Kindelemente.

Externe Hyperlinks mit CSS hervorheben

Das Hervorheben externer Hyperlinks ist nicht nur ein nettes Stilmittel, um das Webdesign einer Seite aufzupeppen, sondern ermöglicht Besuchern auch eine schnelle Unterscheidung, welche Links auf externe und welche auch interne Seiten verweisen.

Am einfachsten lässt sich solch eine Auszeichnung per CSS realisieren – beispielsweise in Form einer eigenen CSS-Klasse. Allerdings ist es recht viel Tipparbeit, jeden einzelnen externen Hyperlink einer entsprechenden CSS-Klasse zuzuweisen. Zum Glück geht es auch eleganter.

So kennt der CSS 2.1-Standard attributbedingte Formatierungen, die durch eckige Klammern gekennzeichnet sind. Die entsprechenden Formatdefinitionen werden dann nur angewandt, wenn die in den eckigen Klammern aufgeführten Attribut- und Wertzuweisungen erfüllt sind.

Sofern Sie bei Ihrer seiteninternen Verlinkung mit relativen Pfadangaben arbeiten, genügt die folgende CSS-Auszeichnung, um alle externen Links auf einen Schlag mit einer entsprechenden Grafik hervorzuheben:

a[href^="http:"] {
background-image: url (‘meine_grafik.jpg’);
background-repeat: no-repeat;
background-position: 0 5px;
padding-left: 16px;
}