CSS-Tricks: Grafiken mit doppeltem Rahmen versehen

Wie Sie mit CSS doppelte Rahmen für Grafiken erstellen

In meinem heutigen Artikel möchte ich Ihnen zeigen, wie Sie mit CSS doppelte Rahmen für Bilder/Grafiken erstellen können.

Hier meine 3 Beispiele ansehen

Anleitung:

Vielleicht denken Sie bei doppelten Bilderrahmen daran, die CSS-Anweisung [border-style: double] einzusetzen. Ich würde Ihnen vom Gebrauch dieses CSS-Befehls abraten, da dieser nur sehr schwer zu kontrollieren ist.

Stellen Sie sich eine Situation vor, wo Sie für eine Grafik einen äußeren Rahmen mit 3px und der Farbe ‘Grün’ und einen inneren Rahmen mit 1px und der Farbe ‘Gelb’ festlegen möchten. Mit [border-style:double] können Sie dies nicht bewerkstelligen.

Der Trick:

Um dies doch zu realisieren, verwende ich für den äußeren Rahmen den CSS-Befehl [border]. Der innere Rahmen wird nur vorgetäuscht und setzt sich zusammen aus den CSS-Anweisungen [background] und [padding].

Zuerst bekommt das Bild einen Rahmen von 2px

img {
        border:2px solid #72a143;
}

Wenn man nun für die Grafik ein Padding von 1px einsetzt und mit der Hintergrund-Farbe ‘Gelb’ ergänzt,

img {
        border:2px solid #72a143;
        padding:1px;
        background:#ffeda5;
}

erhält das Bild einen „zusätzlichen Rahmen“ innerhalb des tatsächlichen Rahmens.

In meinen 3 Beispielen verwenden ich einmal die Rahmen-Farbe ‘Grün’, einmal die Farbe ‘Blau’; im 3. Beispiel wird ein ‘Schatten’ für die Grafik vorgetäuscht.

HTML-Quellcode:

<p><a href="#"><img class="image1" src="image.jpg" alt="image" /></a></p>
<p><a href="#"><img class="image2" src="image.jpg" alt="image" /></a></p>
<p><a href="#"><img class="image3" src="image.jpg" alt="image" /></a></p>

CSS:

.image1 {
border:2px solid #72a143;
padding:1px;
background:#ffeda5;
}
.image2 {
border:2px solid #0055c2;
padding:1px;
background:#fff;
}
.image3 {
border:2px solid #eee;
padding:2px;
background:#ccc;
}

Fertiges Beispiel: Zip_Datei ( 16,8 KB)

Den englischsprachigen Original-Artikel zu diesem Tutorial finden Sie unter http://cssglobe.com/post/1330/custom-double-solid-borders-for-images.

Ähnliche Artikel:
CSS/HTML-Übung: 6 Wege, wie Sie Grafiken mit Rahmen versehen können
Tricks mit CSS-Rahmen von Chris Coyier
Bildeffekte mit CSS-Eigenschaft “background-attachment:fixed”
CSS-Tipps und Tricks: Abschnitte wie mit einem Textmarker markieren
Vertikal ausdehnbare CSS Note Box – Vertically Expandable CSS Note Box
Hovereffeke mit CSS-Sprites einfach und leicht erklärt
CSSplay: Inline links – block styling
3D-Wirkung mit CSS: Schatteneffekte für Fotos und Grafiken

Hovereffekte mit CSS-Sprites einfach und leicht erklärt

Vor längerer Zeit gab es bei A List Apart einen ausführlichen Artikel zum Thema CSS-Sprites zu lesen. Diese Technik nutzt eine einzelne Grafik, auf der mehrere oder gar alle benötigten Bilder einer Seite untergebracht sind. Durch unterschiedliche Positionierung des Bildes im Background des jeweiligen Elements via CSS können dann die Pseudoklassen wie :hover mit unterschiedlichen Bildern versehen werden.

Ausführliche und genaue Infos zu CSS-Sprites:
Webkrauts: Hovereffekte mit CSS-Sprites/
CSS Tricks.com: CSS-Sprites – What They Are, Why They`re Cool And How To Use Them
bueltge.de: CSS-Sprites einfach erklaert
CSS Guru: CSS Sprites

Ich möchte Ihnen hier in meinem Artikel 4 verschiedene Beispiele zeigen, wie Sie mit dieser Technik z.B. CSS-Menüs erstellen, horizontale Buttons formatieren oder aber Bildabschnitte explizit darstellen können.

Beispiel 1 (2 vertikale Menüs):

   Eingesetzte Grafiken:
   [sprite.png]                   [nav_orange.png]
 

Ergebnis: Vertikale Menüs 1a + 1b [ansehen: Grafik anklicken!]

   Fertiges Beispiel: Zip_Datei (45 KB)

Wenn Sie möchten, tauschen Sie im Beispiel 1b die orange Grafik gegen eine andere Farbe aus. Laden Sie dazu die folgende Zip-Datei herunter (23 verschiedene Farben – 32 KB): Bitte Grafik anklicken!!

Beispiel 2 (2 vertikale Menüs):

   Eingesetzte Grafiken:
   [nav.jpg]

   [nav.gif]

Ergebnis: Vertikale Menüs 2a + 2b [ansehen: Grafik anklicken!]

   Fertiges Beispiel: Zip_Datei (20 KB)

Beispiel 3: horizontale Buttons

   Eingesetzte Grafik:
   [icons.gif]

Ergebnis: horizontale Buttons[ansehen: Grafik anklicken!]

   Fertiges Beispiel: Zip_Datei (14 KB)

Beispiel 4: Bildabschnitte kennzeichnen

   Eingesetzte Grafik:
   [test-3.jpg]

Ergebnis: Bildabschnitte kennzeichnen [ansehen: Grafik anklicken!]

   Fertiges Beispiel: Zip_Datei (63 KB)

[Download aller 4 Beispiele in einer Zip-Datei (141 KB) - Bitte Grafik anklicken!]

Tipp: Unter spritegen.website-performance.org gibt es einen CSS-Sprite-Generator, der die Erstellung von Sprites stark vereinfacht.

Ähnliche Artikel:
Super simple css bars – einfache Diagramme mit CSS erstellen
Pure CSS Animated Progress Bar – Animierter Fortschrittsbalken
Flexible CSS-Buttons mit 3 Hintergrund-Grafiken
CSS-Beispiel: Gestaltung einer Zebratabelle mit CSS
Top 10 CSS Table Designs aus Smashing Magazine
Bildeffekte mit CSS-Eigenschaft “background-attachment:fixed”
CSS-Tipps und Tricks: Abschnitte wie mit einem Textmarker markieren
Vertikal ausdehnbare CSS Note Box – Vertically Expandable CSS Note Box
Tricks mit CSS-Rahmen von Chris Coyier

Tricks mit CSS-Rahmen von Chris Coyier

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:

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)
 

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.

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.

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)
 

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.

Ähnliche Artikel:
HTML/CSS-Grundlagen: 3 div-Boxen im Fluss (Flow)
CSS Float: Schwebende Boxen (Theorie und Praxis)
CSS Sidebar mit runden Boxen
Styling Blockquotes – Zitate mit CSS gestalten
HTML/CSS-Grundlagen: Unterschied zwischen relativer und absoluter Positionierung
HTML/CSS-Übung: 5 Beispiele, wie Sie ungeordnete Listen formatieren
CSS/HTML-Übung: 6 Wege, wie Sie Grafiken mit Rahmen versehen können

Vertikal ausdehnbare CSS „Note“ Box – Vertically Expandable CSS „Note“ Box

CSS-Tricks: Vertikal ausdehnbare CSS Note Box mit 3 Grafiken

Auf der Webseite von CSS TRICKS.com habe ich ein schönes Beispiel gefunden, wie Sie mit 3 Grafiken und einigen wenigen CSS-Befehlen eine Vertikal ausdehnbare CSS-Box formatieren können. Wenn Sie die Schrift vergrößern, wachsen die beiden vorhandenen CSS-Boxen in der Höhe und nach rechts mit.

Sehen Sie zuerst mein fertiges Beispiel in einem kleinen Video (493 KB, Dauer 10 Sekunden)

Hier können Sie die dazugehörige Webseite ansehen und das Beispiel (mit dem Video) herunterladen:

   Fertiges Beispiel: Zip_Datei (525 KB)
 

Aufbau des Beispieles:

HTML-Quellcode:
<div class="expandable_note_box">
     <div class="middle">
    	     <div class="inside">
    		   <p>Expandable "Note" Box mit 3 Grafiken</p>
    	     </div> <!-- end inside -->
    	 <img src="bottom.jpg" width="210" height="53" title="bottom.jpg"
                 alt="bottom.jpg" />
      </div> <!-- end middle -->
</div> <!-- end expandable_note_box -->

CSS-Code:
	div.expandable_note_box {
		width: 210px;
		min-height: 100px;
		background-image: url(top.jpg);
		background-position: top left;
		background-repeat: no-repeat;
		padding-top: 20px;
		font-size: 80%;
	}
	div.expandable_note_box div.middle {
		width: 210px;
		background-image: url(middle.jpg);
		background-position: center;
		background-repeat: repeat-y;
	}
	div.expandable_note_box div.inside {
		padding-left: 20px;
		width: 167px;
	}

CSS-Box (Muster):

Im obigen Bild sehen Sie, wo die 3 Grafiken (top.jpg, middle.jpg, bottom.jpg) zum Einsatz kommen.

Erläuterungen

Der Aufbau der vertikal ausdehnbaren CSS-Box wird nachstehend genau beschrieben. Wichtig dabei ist, dass die CSS-Box unbedingt eine fixe Breite haben muss. Diese orientiert sich an der Breite der vorhandenen Grafiken und beträgt hier 210 Pixel.

Aufbau Quellcode:

a) <div class="expandable_note_box"> (umschließt die komplette CSS-Box)

Festlegung einer Mindesthöhe von 100 px; die Grafik „top.jpg“(1) wird als Hintergrund-Grafik eingesetzt; Schrifthöhe: 80%

b) <div class="middle"> (Textbereich, Fußbereich; Grafik Nr. 2 und Nr. 3)

Die Hintergrund-Grafik „middle.jpg“(2) gibt Ihnen die Möglichkeit, die Höhe der CSS-Box individuell anzupassen. Dies geschieht durch den CSS-Befehl background-repeat: repeat-y;

Um den Fußbereich der CSS-Box mit einer Grafik auszustatten, wird danach folgender Trick angewendet: Die Grafik „bottom.jpg“(3) wird nicht als background-image, sondern direkt mit dem HTML-Tag <img> als Bild in den Quellcode eingebaut.

c) <div class="inside"> (Text-Formatierung)

Innerhalb der CSS-Klasse „middle“ wird mit der CSS-Klasse „inside“ ein eigener Bereich für Ihren Text zwischengeschaltet (hier: padding-left: 20px; width: 167px;)

Fertige Webseite ansehen und das Beispiel (mit dem Video) herunterladen:

   Fertiges Beispiel: Zip_Datei (525 KB)
 

Das fertige Beispiel ist ähnlich aufgebaut wie „Die-nach-allen-Seiten-ausdehnbare-Box“, welche ich in meinem Blog-Artikel am 12. September 2008 beschrieben habe.

Ähnliche Beispiele:
CSS-Tricks: Walking Links - Spazierende Links
CSS-Experimente: Flashartige Links mit CSS erstellen
CSS-Tricks: Die nach-allen-Seiten-ausdehnbare Box
CSS-Tricks: Kennzeichnung von besuchten Links
CSS-Tricks: Div-Boxen mit runden Ecken (7 Variationen)
CSS Bildergalerie - CSS Sliding Gallery von CSSPlay
CSSplay: Inline links - block styling
Super simple css bars -  einfache Diagramme mit CSS erstellen
Pure CSS Animated Progress Bar - Animierter Fortschrittsbalken

CSS-Tipps und Tricks: Abschnitte wie mit einem Textmarker markieren

CSS-Tipps und Tricks: Textmarker

Wie Sie Abschnitte auf einer Webseite wie mit einem Textmarker markieren

Effekte, die wie Markierungen eines Textmarkers aussehen, lassen sich sehr einfach realisieren. Den gewünschten Bereich mit dem <span>-Tag einschließen und eine Hintergrundfarbe und wenn nötig eine separate Schriftfarbe angeben. Zusätzlich ist zu empfehlen, mit dem CSS-Befehl padding einen linken und rechten Seitenabstand festzulegen.

Beispiel 1:

Die Schriftfarbe innerhalb des <span>-Tags ist weiß (#fff), die Hintergrundfarben sind grün (#690) und rot (#920c0d) und der Seitenabstand beträgt links und rechts 3px (padding: 0 3px;).

HTML-Code mit CSS Inline-Styles:

<p>Effekte, die wie
<span style="color:#fff;background-color:#690;padding:0 3px;">
Markierungen eines Textmarkers</span> aussehen, lassen sich sehr
einfach realisieren.</p>
<p>Den gewünschten Bereich
<span style="color:#fff; background-color:#920c0d; padding:0 3px;">
mit dem span-Tag einschließen</span> und eine Hintergrundfarbe
angeben.</p>

Ergebnis:

Effekte, die wie Markierungen eines Textmarkers aussehen, lassen sich sehr einfach realisieren. Den gewünschten Bereich mit dem <span>-Tag einschließen und eine Hintergrundfarbe angeben.

Beispiel 2:

Die Schriftfarbe innerhalb des <span>-Tags ist weiß (#fff) bzw. schwarz (#000), die Hintergrundfarben sind gelb (#ff0), rot (#f00), blau (#00f) und grün (#690) und der Seitenabstand beträgt links und rechts jeweils 3px (padding: 0 3px;).

HTML-Code mit CSS Inline-Styles:

<p>
Etiam cursus lacus in eros.
<span style="color:#000;background-color:#ff0;padding:0 3px;">
Praesent congue lacinia nunc</span>.
Cras placerat, risus in ullamcorper commodo;augue mauris rhoncus
ante, at vulputate urna sapien nec tortor. Pellentesque erat ipsum,
volutpat sed, varius accumsan,
<span style="color:#fff;background-color:#f00;padding:0 3px;">
convallis at, quam</span>.
Sed quis est non dolor tempus volutpat. Curabitur convallis. Ut id
lectus. Donec lacus. Etiam porttitor. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<p>Quisque at leo.
<span style="color:#fff;background-color:#00f;padding:0 3px;">
Donec ac urna. Etiam commodo.</span>
Cras suscipit justo quis neque.In id sem. Mauris vitae lectus ut massa
dignissim commodo. Vivamus aliquam, turpis ac
<span style="color:#fff;background-color:#690;padding:0 3px;">
scelerisque convallis,nisl velit dictum ligula</span>, ac congue nunc
diam ac nunc. Donec purus diam, pulvinar sit amet, scelerisque vitae,
vehicula ac, odio.
</p>

Ergebnis:

Etiam cursus lacus in eros. Praesent congue lacinia nunc. Cras placerat, risus in ullamcorper commodo. Augue mauris rhoncus ante, at vulputate urna sapien nec tortor. Pellentesque erat ipsum, volutpat sed, varius accumsan, convallis at, quam. Sed quis est non dolor tempus volutpat. Curabitur convallis. Ut id lectus. Donec lacus. Etiam porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Quisque at leo. Donec ac urna. Etiam commodo. Cras suscipit justo quis neque.In id sem. Mauris vitae lectus ut massa dignissim commodo. Vivamus aliquam, turpis ac scelerisque convallis, nisl velit dictum ligula, ac congue nunc diam ac nunc. Donec purus diam, pulvinar sit amet, scelerisque vitae, vehicula ac, odio.

Ausführliche Infos zu HTML und CSS:

CSS 4 YOU
Michael Jendryschik – Einführung in HTML und CSS
The Styleworks – CSS Praxis
Dr.Web – CSS Grundlagen

Ähnliche Artikel:
CSS Float: Schwebende Boxen (Theorie und Praxis)
CSS Sidebar mit runden Boxen
Styling Blockquotes - Zitate mit CSS gestalten
HTML/CSS-Grundlagen: Unterschied zwischen relativer und absoluter Positionierung
HTML/CSS-Übung: 5 Beispiele, wie Sie ungeordnete Listen formatieren
CSS/HTML-Übung: 6 Wege, wie Sie Grafiken mit Rahmen versehen können
CSS-Tricks: Walking Links - Spazierende Links 
CSS-Experimente: Flashartige Links mit CSS erstellen
CSS-Tricks: Die nach-allen-Seiten-ausdehnbare Box
CSS-Tricks: Kennzeichnung von besuchten Links
CSS-Tricks: Div-Boxen mit runden Ecken (7 Variationen)
CSS Bildergalerie - CSS Sliding Gallery von CSSPlay
CSSplay: Inline links - block styling