Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

CSS Bildergalerie – CSS Sliding Gallery von CSS Play

Posted by sura1 - 9. Oktober 2008

Bookmark and Share

CSS Sliding Gallery – 2 Beispiele von Stu Nicholls ( CSS Play )

Ich möchte Ihnen heute 2 CSS-Bildergalerien von Stu Nicholls von CSS Play vorstellen. Beide Galerien beinhalten jeweils 7 Fotos. Wenn Sie mit der Maus über die Bilder fahren, wird durch den Hover-Effekt in der CSS-Datei das jeweilige Bild geöffnet. Die originalen Beispiele finden sie unter http://www.cssplay.co.uk/menu/gallery3l

Meine leicht bearbeiteten und neu formatierten Bildergalerien ansehen und downloaden (153 KB) – Demo und Download öffnen in neuem Fenster:

Gallery 1 – Vertical slide:

/* Formatierung vertikale Gallerie */

#gallery1 { float: left;
            margin: 30px 50px 30px 30px;
            width: 322px;
            height: 427px;
            border: 1px solid #fff;
            padding: 10px;
            background-color: #000;
          }
#galleryv {
  padding:0;
  margin:0;
  list-style-type:none;
  overflow:hidden;
  width:320px;
  height:425px;
  border:1px solid #888;
  background:#fff url(win_back.gif);
  }
#galleryv li a {
  display:block;
  height:30px;
  width:320px;
  text-decoration:none;
  border-bottom:1px solid #fff;
  cursor:default;
  }
#galleryv li a img {
  width:320px;
  height:30px;
  border:0;
  }
#galleryv li a:hover {
  background:#eee;
  height:240px;
  }
#galleryv li a:hover img {
  height:240px;
  }

Gallery 2 – Horizontal slide:

/* Formatierung horizontale Gallerie */

#gallery2 { float: left;
            width: 497px;
            height: 242px;
            padding: 10px;
            border: 1px solid #fff;
            margin-top: 100px;
            background-color: #000;

          }
#galleryh {
  padding:0;
  margin:0;
  list-style-type:none;
  overflow:hidden;
  width:495px;
  height:240px;
  border:1px solid #888;
  background:#fff url(win_backh.gif);
  }
#galleryh li { float: left; }
#galleryh li a {
  display:block;
  height:240px;
  width:28px;
  float:left;
  text-decoration:none;
  border-right:1px solid #fff;
  cursor:default;
  }
#galleryh li a img {
  width:28px;
  height:240px;
  border:0;
  }
#galleryh li a:hover {
  background:#eee;
  width:320px;
  }
#galleryh li a:hover img {
  width:320px;
  }

Quellcode für beide Beispiele:

HTML-Quellcode:

<body>
<div id="wrapper">

<div id="gallery1">
<ul id="galleryv">
<li><a href="#nogo">
<img src="win7.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo">
<img src="win8.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo">
<img src="win9.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo">
<img src="win10.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo">
<img src="win11.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo">
<img src="win12.jpg" alt="#6" title="#6" /></a></li>
<li><a href="#nogo">
<img src="win13.jpg" alt="#7" title="#7" /></a></li>
</ul>
</div>

<div id="gallery2">
<ul id="galleryh">
<li><a href="#nogo">
<img src="win7.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo">
<img src="win8.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo">
<img src="win9.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo">
<img src="win10.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo">
<img src="win11.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo">
<img src="win12.jpg" alt="#6" title="#6" /></a></li>
<li><a href="#nogo">
<img src="win13.jpg" alt="#7" title="#7" /></a></li>
</ul>
</div>
</div>
</body>

Ähnliches Beispiel:

Hidden menues – versteckte Menus nur mit CSS gestalten (10. Juli 2008)

Eine Antwort to “CSS Bildergalerie – CSS Sliding Gallery von CSS Play”

  1. Martina Jell said

    Vielen Dank, die Galerie ist wirklich toll =D

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: