Coole Thumbnails für die Bildergalerie
Im Artikel Runde Bilder zeigen wir, wie Sie mit einer simplen CSS-Anweisung runde Bilder auf Ihre Webseiten zaubern. Im vorliegenden Artikel nutzen wir diesen Trick nun für runde Vorschaubilder. Aber damit nicht genug: Wir basteln uns auch einen coolen Maskeneffekt und versehen das Ganze noch mit einem feinen Schatten (mehr dazu auch im Artikel Bilderrahmen).
Hinweis
Die in diesem Artikel verwendeten CSS-Regeln hinterlegen Sie am einfachsten im CSS-Code für Ihr Projekt auf der Registerkarte "Global", siehe hierzu: Eigenen CSS-Code für ein Projekt hinterlegen.
Wenn Sie die Thumbnail-Effekte nur für ausgesuchte Bildergalerien verwenden wollen, dann lesen Sie auch: Eigene CSS-Klassen für Absätze verwenden.
Wenn Sie die Thumbnail-Effekte nur für ausgesuchte Bildergalerien verwenden wollen, dann lesen Sie auch: Eigene CSS-Klassen für Absätze verwenden.
Runde Vorschaubilder
Für alle Bildergalerien im Projekt
.imageGallery img, .imageGallery li, .imageGallery a {
border-radius: 50%;
}
border-radius: 50%;
}
Nur für bestimmte Bildergalerien
In dieser Variante möchten Sie nur die Vorschaubilder ausgewählter Absätze mit dem gewünschten Effekt versehen. Hierzu weisen Sie den Absätzen in den Absatz-Eigenschaften auf der Registerkarte CSS/HTML die CSS-Klasse rounded zu.
.imageGallery.rounded img, .imageGallery.rounded li, .imageGallery.rounded a {
border-radius: 50%;
}
border-radius: 50%;
}
Vorschaubilder mit Maskeneffekt
Für alle Bildergalerien im Projekt
.imageGallery img {
border-radius: 50%;
}
border-radius: 50%;
}
Nur für bestimmte Bildergalerien
In dieser Variante möchten Sie nur die Vorschaubilder ausgewählter Absätze mit dem gewünschten Effekt versehen. Hierzu weisen Sie den Absätzen in den Absatz-Eigenschaften auf der Registerkarte CSS/HTML die CSS-Klasse masked zu.
.galleryParagraph.masked img {
border-radius: 50%;
}
border-radius: 50%;
}
Für alle Bildergalerien im Projekt
.imageGallery li {
box-shadow: 2px 2px 1px rgba(0,0,0,0.25);
}
box-shadow: 2px 2px 1px rgba(0,0,0,0.25);
}
Nur für bestimmte Bildergalerien
In dieser Variante möchten Sie nur die Vorschaubilder ausgewählter Absätze mit dem gewünschten Effekt versehen. Hierzu weisen Sie den Absätzen in den Absatz-Eigenschaften auf der Registerkarte CSS/HTML die CSS-Klasse shadow zu.
.imageGallery.shadow li {
box-shadow: 2px 2px 1px rgba(0,0,0,0.25);
}
box-shadow: 2px 2px 1px rgba(0,0,0,0.25);
}
Die Rahmenfarbe
Zur Erinnerung: Die Rahmenfarbe für die Vorschaubilder ändern Sie direkt in den Farb-Einstellungen des Designs; zu erreichen über das Hauptmenü Projekt -> Farben.
In den vorliegenden Beispielen sind die Farben wie folgt gesetzt:
In den vorliegenden Beispielen sind die Farben wie folgt gesetzt:
Hinweis
Die Bildergalerien auf dieser Seite sind alle zentriert. Wie das geht, zeigt dieser Artikel: Wie zentriere ich den Bildgalerie-Absatz?.