Fotogalerien
Oftmals besteht die Aufgabe darin, dem Besucher einer Webseite eine Reihe von Fotos oder Bildern zu präsentieren. Dabei wird gerne auf Javascript, Flash o.ä. zurückgegriffen. Aber mal ehrlich. Hat es Sie nicht auch schon mal genervt, wenn Ihr Browser meldet:DIES oder JENES muss installiert werden um DAS zu sehen. Oder Sie haben Java, Javascript und Flash aus Sicherheitsgründen Der Einsatz dieser Techniken wird immer wieder dazu genutzt, in ihr System einzudringen oder ihre Privatsphähre zu kompromitieren! oder zum Schutz Ihre Privatsphäre abgeschaltet.
CSS ist eine Stilbeschreibungs- und keine Programmiersprache und somit gibt es keine sicherheitsrelevanten Aspekte. Damit ermöglichen Sie dem Besucher Ihrer Webseite sofort und barrierefrei auf Ihre Inhalte zuzugreifen.
Oft muss man die Bilder mit einem Fotobearbeitungsprogramm genau auf die jeweilig darzustellenden Formate skalieren. Alles das geschieht in den hier gezeigten 'Gallerys' automatisch mittels CSS, sodass man i.a. mit einer Bilddatei als Vorlage auskommt.
Wenn nicht anders angegeben: Fotos © Jo Klimek
CSS Bildergalerien
Scrollbar - Galerie I Beliebig viele Fotos in einer Box, vertikal verschiebbar. Scrollbar - Galerie II Beliebig viele Fotos in einer Box, horizontal verschiebbar. Slide - Galerie I Mit der Maus über aninimierte Buttons fahren um Bilder anzuzeigen 2 stufige - Galerie Das Bild in zwei Schritten vergrössern Click - Galerie Mit einem Click das Bild vergrössern Slide - Galerie II Beliebig viele Bilder in allen Formaten mit Vorschaucontainer rechts Slide - Galerie III Beliebig viele Bilder in allen Formaten mit Vorschaucontainer unten Eine 'Hover-Galerie' Beim Überfahren der Vorschau-Miniaturen mit der Maus werden die Bilder angezeigt Eine Galerie mit Themengruppen Bilder können in Themengruppen zusammengefasst werden Eine recheckige Fotogalerie Vorschaubilder gruppieren sich rechteckig um die Hauptansicht Eine frei gestaltbare Galerie Horizontale Vorschaubilderstreifen in beliebiger Reihenzahl Eine vertikale Fotogalerie Vertikale Vorschaubilderstreifen mit rechts oder links angezeigten Vergrösserungen und individuellem Farbschema Querformatfotos darstellen Mit einem Bildverweis 3 Darstellungsformate anzeigen Fotogalerie mit 4 Themengruppen Bis zu 40 Bilder mit besonders grosser Vollbilddarstellung noch eine 'Hover-Fotogalerie' 10 unten angeordnete Vorschaubilder Panoramascroller Ein Panoramabild mit der Maus scrollen Click - Galerie II Eine Fotogalerie im TV-Stil Click - Galerie III Eine Fotogalerie mit permanenter BilddarstellungCSS3 Bildergalerien
Click - Galerie IV Eine Bildergalerie mit sanfter Animation - nur für aktuelle Browser - Zoom Fotogalerie Eine Zoom-Bildergalerie - z.Zt. nur Firefox - CSS3 Diashow Eine automatisch ablaufende Diashow für beliebige Bildformate Click - Bildergalerie V Linksschiebende Animation von Hoch- und Querformatigen Bildern mit Vorschauansicht und Beschreibung Click Links/Rechts - Bildergalerie VI Dynamische Formatanpassung an beliebige Bildformate Click - Bildergalerie VII In den Textfluss integrierbare Forogalerie mit sanfter Animation CSS3 Diashow II Eine Diashow mit vertikal und horizontal zentrierten Bildern CSS3 Bildergalerie - radial Eine Bildergalerie mit radialem Bildübergang und permanenter Bilddarstellung CSS3 Bildergalerie - prismatisch Eine Bildergalerie mit prismatischem Bildübergang, permanenter Bilddarstellung und Bildbeschreibung CSS3 Fotogalerie - transition-delay Eine Fotogalerie deren Bewegungsabläufe mit Zeitverögerungen gestaltet wurden CSS3 Bildergalerie - Vollbild Vollbild-Bildershow für alle Bildformate und alle Browserfenstergrössen CSS3 Bildergalerie - Lamellen Bildershow mit lamellenartigem Bildübergang CSS3 Bildergalerie - responsive Eine Fotogalerie im Stil des 'responsive Webdesign' CSS3 Bildergalerie - rollover Eine Fotogalerie mit 'Rollover-Effekt CSS3 Bildergalerie - rechts/links-Navigation Eine Fotogalerie mit rechts/links-Navigation und durch den Betrachter einstellbarer Bildgrösse CSS3 Bildergalerie - rechts/links-Navigation MKII Fotogalerie mit rechts/links-Navigation und Bildbeschreibung CSS3 Bildergalerie - schwenkend Fotogalerie mit rechts und links einschwenkenden Bildern CSS3 Bildergalerie - responsive MK II Eine Fotogalerie im Stil des 'responsive Webdesign'. Einfach anpassbar! CSS3 Bildergalerie mit Vollbildansicht Eine 'responsive' Fotogalerie mit automatischer Aufteilung und Formatanpassung! CSS3 Slideshow responsive MK II Eine 'responsive' Slideshow mit vertikal und horizontal zentrierten Bildern CSS3 Fotogalerie - Stacked Eine 'responsive' Bildergalerie mit 'dahingeworfenen Bildern' und Bildbeschreibung- CSS3 Umrandunggestalten mit dem 'border-image'
- CSS3 Spiegeleffektfür Text
- CSS3 Animationeiner Drahtseilbahn
- Info-Akkordeonfür eine mehrseitige Präsentation
- Personenbeschreibungz.B. ihrer Mitarbeiter
- Kompaktmenüist sehr dezent
Firefox 47.63%
Chrome 30.80%
Opera 0.23%
Safari 10.00%
IE 3.07%
Mobile 0.53%
sonstige 7.73%
