[CSS][HTML] nietypowe ustawienie fotek


(1q2w3e4r) #1

Cześć,

Chcę zrobić z tego slider. Problem polega w tym, że fotki które będę wstawiał do niego nie będą ścięte tak jak na tym obrazku, a będą w całości - jak normalne zdjęcia.

Macie jakiś pomysł jak rozwiązać ten problem w CSS aby działało w każdej przeglądarce? A może jest gotowy jakiś przykład - wtedy nie trzeba będzie tworzyć koła na nowo.

Ten przykład jest z photoshopa:

sam_test.png

Proszę o pomoc.


(Drobok) #2

Nie da rady, a jak już da to tylko i wyłącznie w canvas (zapomnij o wsparciu dla starszych przeglądarek)

Div jest kwadratem, albo będziesz wstawiać zdjęcia ucięte (z przeźroczystością), albo przerobisz je w php(z jednego zdjęcia robisz 3, jedno ucięte z jednej strony, drugie z drugiej, a trzecie po kliknięciu)


(ziggurad) #3

prostokątem :wink:

Wiem że o tym wiesz, wiem że się czepiam.


(Pablo_Wawa) #4

A ja myślę, że to się da zrobić. :slight_smile:

Na przykładzie lewego obrazka: trzeba podzielić tę lewą część na kilka (kilkanaście) wierszy, w których będzie się znajdował kolejny fragment obrazka. Liczba wierszy zależeć będzie od ukośnego odstępu między oboma obrazkami (po prostu prawy brzeg obrazka będzie maskowany "ząbkowanymi" fragmentami IMG, które będą z lewej strony miały przezroczysty trójkątny fragment). Kolejne wiersze zawierające obrazek trzeba pozycjonować przez CSS.

Coś w tym stylu:

galeria2q.jpg

Przykład takiego pozycjonowania i wyświetlania obciętego fragmentu obrazka można zobaczyć u mnie:

Paski narzędziowe: http://programistrz.pl/projekty/toolbars/

Jeden obrazek rozbity na 3 niezależne kawałki: http://programistrz.pl/ciekawostki/przeplot/

Oczywiście powyższe przykłady nijak się mają do tego obrazka, chodzi mi tylko o pokazanie jak wyświetlać w danym ograniczonym obszarze pewien fragment grafiki.


(Drobok) #5

Bardzo dobry pomysł =D>


(slepciu) #6

Możesz tez pobawić się w układanie jednego obrazka na drugim - jak warstwy w programie graficznym i na samochody nałożyć obrazki, które są przezroczyste w środku, tam, gdzie ma być widać zdjęcia.


(Pablo_Wawa) #7

@slepciu: Widzisz, to właśnie nie jest możliwe z powodu tego, że obrazki są przedzielone ukośnie - wtedy część jednego z nich zasłoniłby część drugiego (naszła na jego fragment). Problem jest w zachodzeniu na siebie w pionie.


(slepciu) #8

@Pablo_Wawa: racja, nie przemyślałem tego do końca


(manieKMP) #9

@1q2w3e4r, jeśli nie zależałoby Tobie na obramowaniu jak w przykładzie, to możesz zastosować taki trik (jeśli działa na IE9 i Fx, to powinno zadziałać również na reszcie -w miarę nowych- przeglądarek :wink:).

Ewentualnie możesz zobaczyć jeszcze interaktywny przykład (opis wykonania), podobny z wyglądu do powyższego.


(Pablo_Wawa) #10

Nie żebym się czepiał, ale:

  • pierwsze rozwiązanie dotyczy się obrazków, które na siebie nie zachodzą;

  • drugie rozwiązanie bazuje na CSS3, a więc nie zadziała w Internet Explorerze 8.


(1q2w3e4r) #11

Dziękuję wszystkim za propozycje.

Gdyby ktoś znał jeszcze inne sposoby wykonania tego zadania chętnie je zobaczę.