GoldenLine
Zaloguj się
Agata K.

Agata K. Ilustrator / Graphic
Designer

Temat: Jak zrobić cień pod obrazkiem?

Chciałabym za pomocą css zrobić białą 2 px ramkę wokół zdjęcia i żeby dookoła zdjęcia był cień (równy z każdej strony - distance: 0px). Czy to jest możliwe za pomocą kodu czy muszę jakoś wydziwiać z plikami graficznymi?
Link do wypowiedziLink

konto usunięte

Temat: Jak zrobić cień pod obrazkiem?

wujek Googel po zdaniu pytania odpowiedziawszy w ciągu 0,33 sek powiedział ;)

http://www.alistapart.com/articles/cssdropshadows/
http://www.1976design.com/blog/archive/2003/11/14/shad...
http://www.alistapart.com/articles/onionskin
http://phoenity.com/newtedge/drop_shadow/
http://www.webtoolkit.info/css-drop-shadow.html
Link do wypowiedziLink

konto usunięte

Temat: Jak zrobić cień pod obrazkiem?

Można też po nowemu - CSS3 Box Shadow...
Link do wypowiedziLink

konto usunięte

Temat: Jak zrobić cień pod obrazkiem?

ja osobiscie zrobilbym:
- diva
- wstawil mu plik samym cieniem (png)
- wstawikl do niego obrazek
- paddingiem sie upewnil ze jest odpowiednio ustawiony w boxie (albo marginem dla img, wsio ryba)

Dla IE6 mozna zapodac png hacka by miec pewnosc ze tam tez dziala cien poprawnie ;)

CSS3 - narazie mowimy stanowcze NIE :)
Link do wypowiedziLink
Agata K.

Agata K. Ilustrator / Graphic
Designer

Temat: Jak zrobić cień pod obrazkiem?

Z wujkiem google rozmawiałam wczoraj cały wieczór i naopowiadał mi już tyle, że mi się pomieszało wszystko w głowie. :P
Dziękuje wszystkim za pomoc. Zaraz wykorzystam porady w praktyce i zobaczę czy coś ruszy. :)

Kłopot w tym, ze te zdjęcia nie są jednej wielkości i muszę znaleźć jakąś uniwersalną metodę na wszystkie zdjęcia.
Link do wypowiedziLink
Agata K.

Agata K. Ilustrator / Graphic
Designer

Temat: Jak zrobić cień pod obrazkiem?

Pokażę wam o jaki efekt mi chodzi dokładnie. Te tutoriale z cieniami są bardzo fajne, ale to są efekty, gdzie cień przesuwa się w jakąś stronę, a mi chodzi o efekt cienia rozłożonego dookoła obrazka. Na dodatek zdjęcia nie są tej samej wielkości i chodzi o to żeby znaleźć jakieś rozwiązanie, które można podczepić pod każdy obrazek, bez względu na jego rozmiary.


Obrazek


O! I znalazłam jeszcze taką stronkę http://shapeshed.com/portfolio/
Tutaj właśnie widać ten efekt białego obramowania i delikatnego cienia pod spodem. Może uda mi się wyciągnąć ze źródła jak to zrobili. ;)Agata K. edytował(a) ten post dnia 30.04.10 o godzinie 09:55
Link do wypowiedziLink

konto usunięte

Temat: Jak zrobić cień pod obrazkiem?

Andrzej Winnicki:
CSS3 - narazie mowimy stanowcze NIE :)
Chyba mówisz? Czy jest Was dwóch?

No cóż - ja dla CSS3 mówię stanowcze TAK :)
Link do wypowiedziLink

konto usunięte

Temat: Jak zrobić cień pod obrazkiem?

Waldek Mazurek:
Andrzej Winnicki:
CSS3 - narazie mowimy stanowcze NIE :)
Chyba mówisz? Czy jest Was dwóch?

No cóż - ja dla CSS3 mówię stanowcze TAK :)

CSS3 nie jest wspierane przez wszystkie przegladarki - glownie fajne IE mam na mysli.. wiec narazie "NIE" dopoki IE rzadzi conajmniej polowa rynku ;) Niestety dla nas...
Link do wypowiedziLink

konto usunięte

Temat: Jak zrobić cień pod obrazkiem?

Andrzej Winnicki:
Waldek Mazurek:
Andrzej Winnicki:
CSS3 - narazie mowimy stanowcze NIE :)
Chyba mówisz? Czy jest Was dwóch?

No cóż - ja dla CSS3 mówię stanowcze TAK :)

CSS3 nie jest wspierane przez wszystkie przegladarki - glownie fajne IE mam na mysli.. wiec narazie "NIE" dopoki IE rzadzi conajmniej polowa rynku ;) Niestety dla nas...

"połowa rynku" ? masz nieaktualne informacje... już jakiś czas temu udział przeglądarek MSIE przekroczył próg 30%: http://ranking.pl/pl/rankings/web-browsers-engines.html - i ciągle maleje :D
Link do wypowiedziLink

konto usunięte

Temat: Jak zrobić cień pod obrazkiem?

Piotr Lewandowski:

"połowa rynku" ? masz nieaktualne informacje... już jakiś czas temu udział przeglądarek MSIE przekroczył próg 30%: http://ranking.pl/pl/rankings/web-browsers-engines.html - i ciągle maleje :D

Na stronach nad ktorymi pracuje, odwiedizny lacznie to conajmniej 50%. W te 30% za cholere nie wierze. Fakt udzial maleje, ale dopoki nie osiagnie 10% albo mniej, to nie uwazam ze powinno sie tych uzytkownikow ignorowac.

Dla skrajnego przykladu - Taiwan ma prawie 90% odwiedzin przez IE!!! :)
inne przylady za ostatni miesiac:
US - 50.08%
DE - 40.14%
PL - 30.25%
UK - 51.76%
Nadal za duzo by uzyc CSS3, bez wyswietlenia tej samej tresci tak naprawde inaczej dla IE vs non-IE.
Link do wypowiedziLink

konto usunięte

Temat: Jak zrobić cień pod obrazkiem?

Proponuję wydzielić jakiś wątek o popularności przeglądarek i nie zaczynać tej dyskusji za każdym razem gdy ktoś wspomni o cieniach albo zaokrąglonych rogach.

A w temacie - wszystko zostało powiedziane(stały background z obrazka, siatka divów albo css3) więc przepraszam, ale nie mam nic do dodania :)
Link do wypowiedziLink

konto usunięte

Temat: Jak zrobić cień pod obrazkiem?

Agata K.:
O! I znalazłam jeszcze taką stronkę http://shapeshed.com/portfolio/
Tutaj właśnie widać ten efekt białego obramowania i delikatnego cienia pod spodem. Może uda mi się wyciągnąć ze źródła jak to zrobili. ;)Agata K. edytował(a) ten post dnia 30.04.10 o godzinie 09:55

Nie chcę Cię martwić ;)
-moz-border-radius:10px 10px 10px 10px;
-moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.5);
Link do wypowiedziLink
Agata K.

Agata K. Ilustrator / Graphic
Designer

Temat: Jak zrobić cień pod obrazkiem?

Piotr Dudzic:
Agata K.:
O! I znalazłam jeszcze taką stronkę http://shapeshed.com/portfolio/
Tutaj właśnie widać ten efekt białego obramowania i delikatnego cienia pod spodem. Może uda mi się wyciągnąć ze źródła jak to zrobili. ;)

Nie chcę Cię martwić ;)
-moz-border-radius:10px 10px 10px 10px;
-moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.5);

No niestety zmartwiłam się sama trochę wcześniej. :P
Nadal nie wiem jak to wszystko zrobić i chyba w końcu zrezygnuję z tych cieni, chociaż bardzo mi się podobają. :(Agata K. edytował(a) ten post dnia 30.04.10 o godzinie 16:37
Link do wypowiedziLink
Paweł Steckiewicz

Paweł Steckiewicz PM

Temat: Jak zrobić cień pod obrazkiem?

BOX SHADOW rozwiazanie dla IE http://www.smashingmagazine.com/2010/04/28/css3-soluti... moze pomoze cos
Link do wypowiedziLink

konto usunięte

Temat: Jak zrobić cień pod obrazkiem?

Zrobiłem coś, co nie jest może bardzo ładne (bo ma zbędne elementy html), ale działa w IE7 i 8, Firefoksie i Operze. Chroma nie sprawdzałem:

http://pdu.110mb.com/

Może się przyda ;)
Pomysł zaczerpnięty ze strony, której adresu już nie pamiętam ;]

Z racji wykorzystywania atrybutu 'filter', pod IE zadziała tylko przy włączonym javascripcie. To samo z 'behavior', który też jest stosowany do symulowania CSS3 w ie (lub obsługi png w ie6 i różnych innych rzeczy).

Takie właśnie rozwiązanie z wykorzystaniem behavior można znaleźć na http://code.google.com/p/box-shadow/
Link do wypowiedziLink
Agata K.

Agata K. Ilustrator / Graphic
Designer

Temat: Jak zrobić cień pod obrazkiem?

O! Bardzo dziękuję. :) Naprawdę ładne są te ramki, ciekawa jestem czy u mnie to zadziała.

DOPISEK: Działa! Działa! :DAgata K. edytował(a) ten post dnia 01.05.10 o godzinie 21:34
Link do wypowiedziLink

konto usunięte

Temat: Jak zrobić cień pod obrazkiem?

Pisanie kodu pod każdą z przeglądarek osobno i stosowanie vml ...
- IMO zabawa z grafiką i sprite'ami jest lepszym rozwiązaniem
Link do wypowiedziLink
Sandra Madalińska-Piórk owska

Sandra
Madalińska-Piórk
owska Webmaster

Temat: Jak zrobić cień pod obrazkiem?

najnowsze IE wspiera przynajmniej cienie i zaokrąglenia, nie wiem jak z innymi bajerami [nie miałam okazji jeszcze testować]...
a co do starszych wersji... no cóż... nawet starsze wersje FF, Opery etc nie wspierają CSS 3.0 [to jednak jest dość nowy twór, więc trzeba czasu]

Ja też mówię stanowcze TAK [wygodniejsze to]

PS. a jak ktoś korzysta z Windy Pirata jego broszka, a jak ma legala to może zaktualizować do najnowszej wersji IE - system nawet sam mu to zaproponuje, sam zaktualizuje [jak ma domyślne ustawienia]
Link do wypowiedziLink

konto usunięte

Temat: Jak zrobić cień pod obrazkiem?

Sandra Madalińska-Piórkowska:
Gratuluje odgrzania 1.5 rocznego kotleta :D
Link do wypowiedziLink

konto usunięte

Temat: Jak zrobić cień pod obrazkiem?

Andrzej Winnicki:
Sandra Madalińska-Piórkowska:
Gratuluje odgrzania 1.5 rocznego kotleta :D

"wraz z rozwojem technologicznym społeczeństwa jego inteligencja maleje" (vide czytanie ze zrozumieniem, umiejętność odczytywania dat, itp)Piotr L. edytował(a) ten post dnia 30.01.12 o godzinie 01:08
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj