Forum PHP.pl > [CSS][HTML] nietypowe ustawienie fotek

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML] nietypowe ustawienie fotek

Forum PHP.pl > Forum > Po stronie przeglądarki

1q2w3e4r

7.01.2013, 15:18:17

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:

Proszę o pomoc.

dudek90

7.01.2013, 15:34:04

Zrób z tych dwóch po prostu jedno zdjęcie i wrzuć jako całość.
Ewentualnie jeśli chcesz użyć CSS to poczytaj o: z-index

1q2w3e4r

7.01.2013, 15:43:57

Nie jest to takie proste jakby się mogło wydawać na początku.
Nie mogę dać to jako jedno zdjęcie ponieważ zdjęcia mają się przewijać z różną częstotliwością.
Znam z-index i użycie jego tutaj jest nieuniknione. Ale nie da się założyć jednego zdjęcia na drugie z ucięciem.
Czy macie może jakieś pomysły?

pehaperowiec

7.01.2013, 16:35:58

sposób 1:
pozycjonowanie relatyne, marginesy, z-index + obrazki jako png z przezroczystoscią wraz z obramowaniem + cieniami - zadziałą wszędzie

sposób 2:
pozycjonowanie relatywne dla rodzica, pozycjonowanie absolutne dla dzieci, marginesy i clip - to osotatnie nie zadziałą wszędzie

johnny_b

7.01.2013, 21:35:54

Cześć 1q2w3e4r!

pierwsze co przychodzi mi na myśl kiedy mam tworzyć nietypowe kształty to SVG, ale pojawia się tutaj element zdjęcia, więc Canvas i CSS3 również dają podobne możliwości, ale mają z kolei kilka innych ograniczeń. Również pamiętaj o wsparciu przeglądarek. Przyszło nam się cieszyć IE10

więc css3 wydaje się być ciekawą opcją, jednak nie jest to jeszcze standard ja to nazywam nadużywaniem przyzwyczajeń odbiorców. Sam css3 nie da takiego efektu.

Cytat

Ale nie da się założyć jednego zdjęcia na drugie z ucięciem. Czy macie może jakieś pomysły?

Pewnie, że się da, a jeżeli nie wiesz lub nie chcesz testować

zrób 2 divy, i ustaw każde zdjęcie jako background. - rozwiązanie kiepskie przy zmianie obrazków - chyba że zawsze będą te same wymiary.

Cytat

dudek90: Ewentualnie jeśli chcesz użyć CSS to poczytaj o: z-index

Z-index tak, ale jeżeli chodzi o CSS to figury aktualnie stosowane właściwości css3, operują w znacznej części na właściwościach border-rarius/after/before. Czyli Tło będzie na całej wielkości diva np.

[HTML] pobierz, plaintext 
 
<html>
<head>
<style>
#triangle-topleft { 
	width: 0; 
	height: 0; 
	border-top: 100px solid rgba(255,255,255, .3); 
	border-right: 100px solid transparent; 
	background-image: url('SCIEZKA DO JAKIEGOS ZDJECIA');
	overflow: hidden;
}
</style>
</head>
<body>
<div id="triangle-topleft"></div>
</body>
</html>
 
[HTML] pobierz, plaintext

Reasumując:
css3/svg/canvas -> jawnie nie dają takich możliwości.
Osobiście gdyby stanął przed takim zadaniem to utworzyłbym 2 divy, których tłem byłyby obrazki. Korzystając z png (wcięcia przezroczyste) oraz z-index

i odpowiednie pozycjonowanie divów i efekt zamierzony oraz oczywiście obsługa JS.

1q2w3e4r

11.01.2013, 20:07:13

Dziękuję wszystkim za propozycje.
Gdyby ktoś znał jeszcze inne sposoby wykonania tego zadania chętnie je zobaczę.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.