Trick # 531 | Dieser Beitrag beinhaltet 776 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Bilder auf der Website zu verwenden, ist eine einfache Übung. Heute versehen wir die dargestellten Bilder zusätzlich mit einem schönen Innenrahmen. So was habe ich unlängst auf der Website einer Kollegin entdeckt – sieht sehr hübsch aus. Musste ich gleich nachbauen.
Ein eingefügtes Bild kann sich auf der Website so präsentieren wie nebenan:
Wie wär’s, dieses Foto mit einem feinen Innenrahmen aufzuhübschen?
Dafür benötigen Sie einen kurzen CSS-Code. Falls Sie mit WordPress arbeiten fügen Sie den Block unter Design/Customizer/Zusätzliches CSS hinzu:
.image-container {
position: relative;
display: inline-block;
}
.image-container::before {
content: "";
position: absolute;
top: 2%; /* Oberen Rahmenabstand festlegen */
left: 2%; /* Linken Rahmenabstand festlegen */
right: 2%; /* Rechten Rahmenabstand festlegen */
bottom: 2%; /* Unteren Rahmenabstand festlegen */
border: 1px solid #ffffff; /* Rahmenstärke und -farbe definieren */
pointer-events: none;
}
.image-container img {
display: block;
max-height: 300px;
}Anzupassen sind allenfalls die Zeilen 8-12. Welchen Effekt die Werte haben, ersehen Sie aus den Kommentaren der jeweiligen Zeile. In Zeile 17 wird noch eine maximale Darstellungshöhe (hier 300 Pixel) festgelegt. Auch diesen Wert können Sie anpassen oder ihn gleich ganz weglassen.
Um das Bild mit Innenrahmen darzustellen, benötigen Sie nun noch ein wenig HTML. Der Code folgt unten – fügen Sie ihn in der HTML- oder Textansicht Ihres bevorzugten Editors ein:
<div class="image-container">
<img src="https://domain.ch/pfad-zu-ihrer-bilddatei/bilddatei.jpg" alt="Bildbeschreibung">
</div>Anpassen müssen Sie auf Zeile 2 den Pfad und den Namen der Bilddatei, welche verwendet werden soll.
Das Ergebnis zeigt sich dann in unserem Beispiel so wie nebenan:
Ziemlich adrett. Oder?
Werbung
Werbung
