Bild mit runden Ecken

AnnWolf

Hallo zusammen.

Es geht hier nur um meine Startseite (index). NUR diese möchte ich umgestalten.

Von "phil" und "elch" habe ich ja schon beste Hilfe erhalten, bezüglich eines Schattens um die Bilder.

Nun versuche ich mich mit einem Eckenradius bei den Bildern. Dazu habe ich innerhalb der <style> Angabe den border radius hinzugefügt, in der Annahme, dass auch nur die Bilder auf der Startseite betroffen sind. Ist es aber leider nicht. Nun haben alle Bilder einen Eckenradius. Ich habe das Ganze auch schon hinter "overflow: visible;" geschrieben, funktioniert aber auch nicht.

Wie kann ich das so erzeugen, dass nur die Bilder mit der CSS-Klasse "img-schatten" betroffen sind?

<style>

/* Erzeugt einen Schatten und Eckenradius bei Bildern mit CSS-Klasse img-schatten */

.img-schatten {-webkit-filter: drop-shadow(5px 8px 8px #000);

filter: drop-shadow(5px 8px 8px #000);

overflow: visible; /* Sorgt dafür, dass der Schatten nicht abgeschnitten wird */}

img {

border-radius: 10px;

}

</style>

phil-web

Hallo Wolfgang,

dafür musst du einfach nur die Eigenschaft "border-radius: 10px" beim Selektor ".img-schatten" angeben:

Code

<style>
/* Erzeugt einen Schatten und Eckenradius bei Bildern mit CSS-Klasse img-schatten */
.img-schatten {-webkit-filter: drop-shadow(5px 8px 8px #000);
filter: drop-shadow(5px 8px 8px #000);
overflow: visible; /* Sorgt dafür, dass der Schatten nicht abgeschnitten wird */
border-radius: 10px; /* Gibt dem Bild runde Ecken*/
}
</style>

Ansonsten bezieht es sich mit dem Selektor "img", wie du bemerkt hast, auf alle Bilder.

AnnWolf

Hallo Philipp.

Danke dir. Aber dabei werden die Ecken wieder eckig.

Ich habe auch noch nicht so ganz verstanden, das nicht innerhalb der <style> Angabe das nicht so ausgeführt wird, wie angegeben.

phil-web

Zitat von AnnWolf

Danke dir. Aber dabei werden die Ecken wieder eckig.

Ich habe auch noch nicht so ganz verstanden, das nicht innerhalb der <style> Angabe das nicht so ausgeführt wird, wie angegeben.

Ok, dann sollte folgender Code funktionieren:

Code

<style>
/* Erzeugt einen Schatten und Eckenradius bei Bildern mit CSS-Klasse img-schatten */
.img-schatten {
    -webkit-filter: drop-shadow(5px 8px 8px #000);
    filter: drop-shadow(5px 8px 8px #000);
    overflow: visible; /* Sorgt dafür, dass der Schatten nicht abgeschnitten wird */
}

.img-schatten img {
    border-radius: 10px; /* Gibt dem Bild runde Ecken*/
}
</style>

Alles anzeigen

Wenn du in ZP dem Artikel die CSS-Klasse "img-schatten" gibst, wendet ZP diese nicht auf das eigentliche Bild (den <img> Tag) an, sondern auf den das Bild umgebenden Container.

AnnWolf

Hallo Philipp.

Perfekt Das funktioniert. Update läuft

Bild mit runden Ecken

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?