LautundKlar Webdesign Blog

LautundKlar Webdesign Agentur Passau - Webdesign Weblog

Victor Hugo:
Ein Traum ist unerlässlich, wenn man die Zukunft gestalten will.

LautundKlar Webdesign Blog

Weblog zum Thema Webdesign, auf dem wir in unregelmäßigen Abständen zu interessanten Artikeln verweisen und Tipps zu bestimmten Problemen (Webdesign, CSS, PHP, JavaScript, Typo3 etc.) geben wollen.


Rollover Border innerhalb und außerhalb von Grafiken mittels CSS

Freitag, 13. März 2009

Border innerhalb von Grafiken mittels CSS

Auf CSS-tricks.com habe ich eine Möglichkeit gefunden inerhalb von Grafiken Rahmen zu setzen. Es ist eigentlich recht einfach, man muss nur darauf kommen. Man kann nämlich mittels negativem Margin die Border beliebig nach innen ziehen:

#example-one a img, #example-one a { border: none; overflow: hidden; float: left; }
#example-one a:hover  { border: 3px solid black; }
#example-one a:hover img { margin: -3px; }

Border außerhalb

Und auch das ist möglich: “Hover-Border” außerhalb von Grafiken, die das Layout nicht zerstören:

#example-two a img, #example-two a { border: none; float: left; }
#example-two a { margin: 3px; }
#example-two a:hover { outline: 3px solid black; }

Website: CSS-tricks.com

Den gleichen Effekt kann man natürlich auch so erzielen:

#example-three a { border: 3px solid transparent; margin:0; padding:0;float: left; }
#example-three a:hover { border: 3px solid black; }

Popularity: 56% [?]

Keine Kommentare »

Noch keine Kommentare.

RSS-Feed für Kommentare zu diesem Beitrag. TrackBack-URI

Einen Kommentar hinterlassen

XHTML: Sie können diese Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Kommentarlinks könnten nofollow frei sein.



blogCloud bloggerei.de supported by www.rankingcloud.de Gelistet im Blog Verzeichnis

PantherMedia -  Fotocommunity und Bildagentur für lizenzfreie Fotos
 Bildsuche: lizenzfreie Fotos