ROZWIĄZANE jak dodać cień pod zdjęciem CSS

Proszę uprzejmie o informację jak dodać np.cień pod zdjęciem.Chodzi mi o taki efekt jakby zdjęcie było położone na powierzchni

 

Szybki przykład:

HTML:

<div style="width: 250px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);text-align: center;">
<img src="katalog/obrazek.jpg" alt="jakiś opisujący krótki tekst" style="width:100%">
</div>

Przykład można powiedzieć, że podaje prawie z pamięci (nie sprawdzałem go bezpośrednio w sklepie), ale powinien działać. Zamiast parametru width:250px usta taką szerokość obrazka, jaka ma być wyświetlana. Zamiast katalog/obrazek.jpg wpisz lokalizację obrazka na swoim serwerze (np. możesz go wysłać do katalogu na serwerze FTP). Kod cały natomiast dodajesz w tym miejscu, w którym chciałbyś, aby ten obrazek był wyświetlany.

@pawel a może chcesz dodać cień pod wszystkimi zdjęciami produktów za pomocą jednego kodu? Napisz, bo może źle Cię zrozumiałem.

 

Chcę dodać cień pod wszystkimi zdjęciami.Podsyłam link .O taki efekt mi chodzi.
https://www.spielgeraete-discount.de/sortiment/kinderspielhaus/

 

tam masz cień jako grafikę pod grafiką główną:

Code:

.product-item-shadow {
    background: rgba(0, 0, 0, 0) url("../img/signature/list-item-shadow.png") no-repeat scroll 0 0;
    height: 20px;
    margin-bottom: -10px;
    width: 280px;

można by było to w sumie zrobić samym cssem ale ten sposób jest o wiele szybszy.

 

dziękuję a grafikę gdzie zapisać chodzi mi o te tła

 

nie wiem jak to zamiescic na serwerze zeby działalo

 

@pawel masz dwie możliwości: skorzystać z kodu @TheL - musisz w tym celu posiadać odpowiednią grafikę podobną do tej podanej przez Ciebie stronie. Następnie plik trzeba wysłać na serwer sklepu i skorzystać z kodu podanego przez Thela.

Druga możliwość to podanie we Własnym stylu CSS poniższego kodu:

Code:

.products.viewphot .product .prodimage .img-wrap img {
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 4px 10px 0 rgba(0, 0, 0, 0.05);
}

Powinien on spowodować, że obrazki produktów (np. na stronie głównej będą posiadały cień). Uważam jednak, że sposób zaprezentowany przez użytkownika @TheL jest lepszy. W przypadku drugiego sposobu cienie pod obrazkami mogą się różnić w zależności od wielkości obrazków produktów.

 

Plik z grafiką nazwałem cien-duży.png a kod który wkleilem w własny styl css to:

Code:

.product-item-shadow {
    background: rgba(0, 0, 0, 0) url("../images/user/cien-duzy.png") no-repeat scroll 0 0;
    height: 20px;
    margin-bottom: -10px;
    width: 280px;
}

i zero efektu .O co tu chodzi co robie żle.Drugim sposobem próbowałem i nawet było ok ale faktycznie nie wszystkie zdjęcia mialy taki sam cień.

 

Jeśli wrzucisz obrazek z cieniem do odpowiedniej lokalizacji u Ciebie w sklepie, to cień według instrukcji @TheL powinien się poprawnie wyświetlać.