Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML] nietypowe ustawienie fotek
1q2w3e4r
post
Post #1





Grupa: Zarejestrowani
Postów: 238
Pomógł: 0
Dołączył: 6.05.2011

Ostrzeżenie: (10%)
X----

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.

Ten post edytował 1q2w3e4r 7.01.2013, 15:19:00
Go to the top of the page
+Quote Post
dudek90
post
Post #2





Grupa: Zarejestrowani
Postów: 44
Pomógł: 0
Dołączył: 18.07.2011

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
1q2w3e4r
post
Post #3





Grupa: Zarejestrowani
Postów: 238
Pomógł: 0
Dołączył: 6.05.2011

Ostrzeżenie: (10%)
X----

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?

Ten post edytował 1q2w3e4r 7.01.2013, 15:44:16
Go to the top of the page
+Quote Post
pehaperowiec
post
Post #4





Grupa: Zarejestrowani
Postów: 91
Pomógł: 8
Dołączył: 26.09.2011

Ostrzeżenie: (10%)
X----

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
Go to the top of the page
+Quote Post
johnny_b
post
Post #5





Grupa: Zarejestrowani
Postów: 30
Pomógł: 5
Dołączył: 3.12.2012

Ostrzeżenie: (0%)
-----

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 wink.gif 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ć smile.gif 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 
  1.  
  2. <html>
  3. <head>
  4. <style>
  5. #triangle-topleft { 
  6. 	width: 0; 
  7. 	height: 0; 
  8. 	border-top: 100px solid rgba(255,255,255, .3); 
  9. 	border-right: 100px solid transparent; 
  10. 	background-image: url('SCIEZKA DO JAKIEGOS ZDJECIA');
  11. 	overflow: hidden;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div id="triangle-topleft"></div>
  17. </body>
  18. </html>
  19.  
[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 smile.gif i odpowiednie pozycjonowanie divów i efekt zamierzony oraz oczywiście obsługa JS.
Go to the top of the page
+Quote Post
1q2w3e4r
post
Post #6





Grupa: Zarejestrowani
Postów: 238
Pomógł: 0
Dołączył: 6.05.2011

Ostrzeżenie: (10%)
X----

Dziękuję wszystkim za propozycje.
Gdyby ktoś znał jeszcze inne sposoby wykonania tego zadania chętnie je zobaczę.
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 07:24
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn