Bild mit Schatten

AnnWolf

Hallo zusammen.

Kann man mit ZP Bordmitteln ein Bild mit einem Schatten im Hintergrund erzeugen?

Also so, dass das Bild so ein wenig erhaben wirkt.

phil-web

Hallo,

soweit ich weiß, ist das nur mit CSS möglich. Am einfachsten wäre sicherlich Inline-CSS, z.B. box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1)

elch

Hallo AnnWolf

Also, ich habe dies für meine Zwecke mittels "Filter" gelöst. Dies hat(te) in meinem Beispiel den Vorteil, dass bei PNG-Grafiken - mit Figuren auf transparentem Hintergrund - der Schatten hinter. bzw. rund um die Figuren zu liegen kommt und bei allen anderen Bildern leigt der Schatten so (dann einfach) rund ums ganze Bild.

Unter Einstellung -> CSS (z.B.) diesen Code einfügen.

Code

<style>
.img-schatten {-webkit-filter: drop-shadow(0px 0px 10px #000); filter: drop-shadow(0px 0px 10px #000);}
</style>

Evt. Werte anpassen.

(Ob das Browser-Präfix "-webkit" heutzutage noch immer nötig ist, kann ich nicht sagen.)

Danach das entsprechende Widget mit dem Bild öffnen.

Auf das "Schieber-Symbol" klicken und danach auf "Mehr".

Im Feld CSS-Klasse: diese "Class"-Bezeichung einfügen.

Code

img-schatten

Danach: OK -> OK

Sollte so eigentlich funktionieren.

Gute Tage und viele Grüsse

elch

AnnWolf

Hallo elch & phil-web.

Danke für das Input.

@ elch: Wenn ich es so mache, dann hat aber jedes Bild solch einen Effekt, oder?

Ich habe vor meine Startseite „umzubauen“. Und (nur) da möchte ich die Bilder mit diesem Schatten haben.

phil-web

Zitat von AnnWolf

@ elch: Wenn ich es so mache, dann hat aber jedes Bild solch einen Effekt, oder?

Nein, dann haben nur die Bilder mit der CSS Klasse "img-schatten" diesen Effekt. Alle anderen Bilder werden normal ohne Schatten angezeigt.

AnnWolf

Ah, ok.

Dann werde ich mal „basteln“.

AnnWolf

Hallo elch.

Top

So hatte ich mir das vorgestellt. Das soll auch so mit dem von dir angegeben Code so bleiben.

Aus reinem Interesse,- was passiert, wenn ich die Werte verändere? Oder andersherum, was besagen die drei Werte 0px 0px 10px

Es steht ja im Code:

Code

.img-schatten {-webkit-filter: drop-shadow(0px 0px 10px #000); filter: drop-shadow(0px 0px 10px #000);}

Ich hoffe, du verstehst, was ich meine...

phil-web

Hallo AnnWolf,

die ersten beiden Angaben 0px 0px geben die Verschiebung des Schattens in x und y Richtung an. Der dritte Wert gibt die Unschärfe des Schattens an, je größer der Wert, desto größer und sanfter wird der Schatten. Du kannst die Werte einfach mal abändern und schauen, was passiert

AnnWolf

Danke

AnnWolf

Ich hatte mich nur gewundert, dass es zweimal auftaucht. Aber einmal heißt es ja "-webkit Filter"

AnnWolf

Hallo zusammen.

Ich habe das Ganze mal hochgeladen,- und dabei festgestellt, dass das zuvor runde Bild ("Wir über uns") nicht mehr rund, sondern oval dargestellt wird.

Hat das ev. etwas mit der durchgeführten Änderung zu tun.

Auf der alten Sicherung ist es noch rund.

Zudem sieht der Schatten in der mobilen (Handy) Ansicht abgeschnitten aus.

Das könnte ich aber mit dem Verstellen der Werte hinbekommen, oder?

elch

Hallo AnnWolf

_{(... Bin nach Abwesenheit wieder da)}

Zitat

... dass das zuvor runde Bild ("Wir über uns") nicht mehr rund, sondern oval dargestellt wird.

Für kreisrunde Bilder benötigst Du ein quadratisches Bild. -> Bild-Widget -> "Bearbeiten" -> Auf Vorschaubild "Klick zum Ändern" klicken -> "Bearbeiten" wählen -> "Zuschneiden" -> "Quadrat".

Zitat

Zudem sieht der Schatten in der mobilen (Handy) Ansicht abgeschnitten aus.

Das kann ich mit "meinen" Browsern so nicht erkennen (was nichts heissen muss).

Einen schönen Sonntag und gute Tage.

Viele Grüsse

elch

AnnWolf

Hallo elch.

Danke für das "Wachrütteln". Natürlich, das kreisrunde Bild benötigt eine quadratische Vorlage.

Zu dem abgeschnittenen Schatten.

Hier ist es so, dass die ZP eigene Vorschau alles gut anzeigt. Hier kann ich ja umschalten zur Handyansicht.

Aber die Wirklichkeit auf meinem Handy (Apfel 14) sieht dann anders aus. Hier wird dann der Schatten links und rechts abgeschnitten.

Jetzt werde ich aber noch ein paar Sachen versuchen.

Es kann z.B. sein, dass die Anzahl der Bilder nebeneinander, bei mir, zu viel sind. Anstatt jetzt vier nebeneinander reduzieren auf drei nebeneinander.

Das werde ich in den nächsten Tagen mal austesten.

phil-web

Hallo AnnWolf,

das Problem mit dem abgeschnittenen Schatten sollte sich durch eine kleine Anpassung deiner CSS-Klasse img-schatten lösen lassen:

CSS

.img-schatten {
    -webkit-filter: drop-shadow(0px 0px 10px #000); 
    filter: drop-shadow(0px 0px 10px #000); 
    overflow: visible; /* Sorgt dafür, dass der Schatten nicht abgeschnitten wird */
}

overflow: visible "erlaubt" dem Bild, dass es bzw. der Schatten auch über den Container hinausgehen kann. Normalerweise ist das die Standardeinstellung, diese wurde aber von ZP überschrieben. Vermutlich, weil das an gewissen Stellen Probleme mit manchen Layouts geben kann.

PS: Es hängt aber davon ab, wo du das Bild anbindest, ob eventuell noch weitere CSS Regeln greifen und diese dann überschreiben oder beeinflussen.

AnnWolf

Hallo Philipp.

D.h.,- ich muss das bisherige CSS komplett ersetzen, mit dem oben aufgeführte. Richtig?

In der Zwischenzeit habe ich mal mit dem Bild "Über uns" verschiedene Varianten getestet. Ich kann das Bild verkleinern/vergrößern, wie ich will, der abgeschnittene Schatten bleibt.

Hier mal mein bisheriges CSS komplett:

<style>

/* Schriftgröße, Schriftfarbe und Schriftgewicht für alle H4-Überschriften, außer diese sind extra definiert */

h4 {

font-size: 1.25rem;

color: #D9452B;

font-weight: normal

}

/* z-index für den Header */

#headerslider{

z-index: 1;

}

/* Zeilenhöhe für H2 Überschriften im Header */

.flex-caption h2{

line-height: 1.1;

}

</style>

<style>

/* Erzeugt im Standard einen Button mit runden Ecken */

input.button {border-radius: 5px;}

</style>

<style>

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

.img-schatten {-webkit-filter: drop-shadow(0px 0px 10px #000); filter: drop-shadow(0px 0px 10px #000);}

</style>

phil-web

Zitat von AnnWolf

h.,- ich muss das bisherige CSS komplett ersetzen, mit dem oben aufgeführte. Richtig?

Korrekt, bzw. den Teil overflow: visible; nach dem filter: drop-shadow(0px 0px 10px #000); (vor der schließenden Klammer) hinzufügen

AnnWolf

Perfekt. Danke

Jetzt hat das Bilder "über uns" auch auf dem Handy keinen abgeschnittenen Rand mehr.

Die anderen Bilder sehen auch etwas besser aus. Aber noch nicht so ganz, wie ich es haben möchte.

Aber, s.o., da versuche ich noch etwas.

AnnWolf

Hallo zusammen.

Eine Frage bleibt noch.

Kann man innerhalb des Styles noch eine Angabe hinzufügen, sodass die Bilder abgerundete Ecken bekommen?

Ich hab ja schon so etwas für die Buttons.

Der Schatten selbst hat ja leicht abgerundete Ecken.

nemessis

Hier kann man das gut lernen - CSS border-radius | mediaevent.de

AnnWolf

Ich danke dir

Bild mit Schatten

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?