Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Jak zrobić galerie CSS?
sebenicz97
post
Post #1





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 9.04.2015

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


Witam.
Jako iż jestem zielony w sprawach CSS'a, potrzebuje pomocy ze zrobieniem przykładowej strony z samą galerią. Rozrysowałem to dokładnie jak to ma wyglądać. Po lewej stronie musi być pływająca ramka a w niej miniaturki zdjęć po których naciśnięciu ma sie pojawić powiększone zdjęcie z prawej strony. Zdjęcia podstawie sobie sam, ale bardzo prosiłbym o kod jak taką stronę zrobić. Z góry dzięki (IMG:style_emoticons/default/smile.gif) Jestem nowy na forum i jeżeli coś nie tak napisałem to sory.
Link do obrazka: http://obrazki.elektroda.pl/5060909600_1428594636.jpg
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
viking
post
Post #2





Grupa: Zarejestrowani
Postów: 6 381
Pomógł: 1116
Dołączył: 30.08.2006

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


Teoretycznie możesz w samym CSS choć zależy w jakich przeglądarkach ma działać.

  1. <ul>
  2. <li> <-- tutaj sobie powtórz li dla każdego obrazka
  3. <label for="${x}}">opis</label>
  4. <input type="radio" name="p" id="${x}"/> <-- checked dla pierwszego
  5. <img src="obraz1.png"/>
  6. </li>
  7. </ul>
  8.  
  9. ul label {
  10. display: block;
  11. cursor: pointer;
  12. }
  13.  
  14. ul input {
  15. display: none;
  16. }
  17.  
  18. ul input + img {
  19. height: 0;
  20. opacity: 0;
  21. overflow: hidden;
  22. position: absolute;
  23. top: 0;
  24. left: 280px;
  25. z-index: 99;
  26. }
  27.  
  28. ul input:checked + img {
  29. height: 200px;
  30. opacity: 1;
  31. -moz-transition: opacity 0.3s ease-in-out;
  32. -webkit-transition: opacity 0.3s ease-in-out;
  33. -o-transition: opacity 0.3s ease-in-out;
  34. -ms-transition: opacity 0.3s ease-in-out;
  35. transition: opacity 0.3s ease-in-out;
  36. }
Go to the top of the page
+Quote Post

Posty w temacie


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

 



RSS Aktualny czas: 31.12.2025 - 18:11