Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Tricks mit CSS-Rahmen von Chris Coyier

Posted by sura1 - 18. März 2009

silver18
Bookmark and Share

CSS-Tricks: Image Rollover Borders von Chris Coyier

Chris Coyier von CSS-Tricks erklärt in seinem Artikel Image Rollover Borders vom 11. März 2009, wie Sie Grafiken mit Rahmen versehen können, ohne dass sich dadurch das Layout der Webseite ändert bzw. verschiebt. Er verwendet dazu in seinem Beispiel die beiden CSS-Eigenschaften ‚outline‘ und ‚border‘.

Damit Sie sehen können, was überhaupt gemeint ist, schauen Sie bitte das kurze Demo-Video an!

Ich habe das vorliegende Beispiel ein wenig bearbeitet (Grafiken, Layout, Conditional Comments für den IE-Browser) und möchte es Ihnen hier in 2 verschiedenen Versionen vorstellen:

innerborder

Variante Nr. 1:

1. Das Problem:

Grundlage des Beispiels sind 6 Grafiken, welche in 2 3er-Reihen untereinander angeordnet werden.
Wenn sie hier mit der Maus über die Bilder fahren, verschieben sich durch Einsatz der CSS-Anweisung ‚border‘ die Grafiken (siehe hier mein Demo-Video)

   Fertiges Beispiel: Zip_Datei (99,5 KB)
demo2 button1

inner_border_image

HTML-Quellcode:
<h3>The "Problem"</h3>
<div id="example-problem">
       <a href="#"><img src="images/1.jpg" alt="thumb" /></a>
       <a href="#"><img src="images/2.jpg" alt="thumb" /></a>
       <a href="#"><img src="images/3.jpg" alt="thumb" /></a>
       <div style="clear: both;"></div>
       <a href="#"><img src="images/4.jpg" alt="thumb" /></a>
       <a href="#"><img src="images/5.jpg" alt="thumb" /></a>
       <a href="#"><img src="images/6.jpg" alt="thumb" /></a>
</div>

CSS:
#example-problem a img, #example-problem a   { border: none; float: left; }
#example-problem a:hover                                  { border: 3px solid #fe4902; }

2. Inner Borders – Rahmen innerhalb der Grafik

Die CSS-Eigenschaft ‚border‘ kommt hier dadurch zum Einsatz, dass der Bilderrahmen innerhalb der Grafik (‚hover img: margin: -3px;‘) platziert wird.

inner_border_image1

HTML-Quellcode:
<h3>Inner Borders</h3>
<div id="example-one">
       <a href="#"><img src="images/1.jpg" alt="thumb" /></a>
       <a href="#"><img src="images/2.jpg" alt="thumb" /></a>
       <a href="#"><img src="images/3.jpg" alt="thumb" /></a>
       <div style="clear: both;"></div>
       <a href="#"><img src="images/4.jpg" alt="thumb" /></a>
       <a href="#"><img src="images/5.jpg" alt="thumb" /></a>
       <a href="#"><img src="images/6.jpg" alt="thumb" /></a>
</div>
CSS:
#example-one a img, #example-one a    { border: none; overflow: hidden; float: left; }
#example-one a:hover                            { border: 3px solid #fe4902; }
#example-one a:hover img                     { margin: -3px; }

3. Outer Border – Rahmen um die Grafik herum

Mit der CSS-Eigenschaft ‚outline“ wird der Bilderrahmen um die Grafik herum angeordnet. Das funktionert aber im Internet-Explorer [IE 5 – IE 8] nicht. Deshalb kommt in meinem Beispiel ein ‚Conditional Comment‘ zum Einsatz. Conditional Comments (kurz: CC) sind spezielle Kommentare, die nur vom Microsoft Internet Explorer ab Version 5 interpretiert werden, um ausschließlich diese Browser mit Anweisungen zu versorgen. Diese müssen im Anschluss an etwaige andere CSS-Anweisungen im Head-Bereich der HTML-Datei eingebaut werden.

inner_border_image2

HTML-Quellcode:
<h3>Outer Borders</h3>
<div id="example-two">
       <a href="#"><img src="images/1.jpg" alt="thumb" /></a>
       <a href="#"><img src="images/2.jpg" alt="thumb" /></a>
       <a href="#"><img src="images/3.jpg" alt="thumb" /></a>
       <div style="clear: both;"></div>
       <a href="#"><img src="images/4.jpg" alt="thumb" /></a>
       <a href="#"><img src="images/5.jpg" alt="thumb" /></a>
       <a href="#"><img src="images/6.jpg" alt="thumb" /></a>
</div>
CSS:
#example-two a img, #example-two a     { border: none; float: left; }
#example-two a                                       { margin: 3px; }
#example-two a:hover                            { outline: 3px solid #fe4902; }

Conditional Comments für den IE-Explorer:

In der CSS-Anweisung ‚#example-two a:hover‘ wird anstatt dem CSS-Befehl ‚outline‘ der CSS-Befehl ‚border‘ eingesetzt.

Conditional Comments für den IE Explorer
<!--[if lte IE 8]>
    <style type="text/css">
       #example-two a:hover { margin:0; border: 3px solid #fe4902; }
    </style>
<![endif]-->

Variante Nr. 2:

Bei Beispiel Nummer 2 handelt es sich um das ursprüngliche Original von Chris Coyier.

   Fertiges Beispiel: Zip_Datei (29,5 KB)
demo2 button1

Im Internet Explorer funktioniert jedoch der Bereich ‚Outer Border‘ nicht, da hier keine Conditional Comments zum Einsatz kommen.

Lesen Sie bitte dazu auch die Kommentare im veröffentlichten Artikel von CSS-Tricks, wo über das Thema sehr lebhaft diskutiert wurde und auch andere Lösungsansätze zur Sprache gekommen sind.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: