Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: technika dwa obazki a na stronie jeden
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
robert1974
jak to jest robione, bo spotkalem sie juz pare razy z czyms takim, ale nie bardzo czuje jak to jest robione ..., jakby po stronie CSS jakis trick.

pllk graficzny zawiera 2 obrazki jeden pod drugim, np. jeden czarny ikonca facebooka a drugi czerwony ta sama ikonka.

A na stronie wyswietla sie tylko jeden, rozny w zaleznosc czy myszka na niego najade czy nie.

trueblue
:hover i
background-position
robert1974
dzieki, tak, znalazlem: http://www.jacobtomlinson.co.uk/2012/09/18...-hover-flicker/
jutro przecwicze.
Kshyhoo
Cytat(robert1974 @ 10.12.2014, 22:36:20 ) *
jak to jest robione, bo spotkalem sie juz pare razy z czyms takim, ale nie bardzo czuje jak to jest robione ..., jakby po stronie CSS jakis trick.

pllk graficzny zawiera 2 obrazki jeden pod drugim, np. jeden czarny ikonca facebooka a drugi czerwony ta sama ikonka.

A na stronie wyswietla sie tylko jeden, rozny w zaleznosc czy myszka na niego najade czy nie.

PHP to ewidentnie zły dział...
SaMi
Odświżę troszkę i sprostuję, to o czym pisze @robert1974 to nic innego jak CSS Sprites
robert1974
czy idealnie to nie wiem, ale ogarnalem to w koncu w taki sposob w CSSsie:

  1. .facebook-social-icon {
  2. height: 24px;
  3. width: 11px;
  4. background-image: url(system/pics/facebook-icon2.png);
  5. background-position: 0px 0px;
  6. }
  7.  
  8. .facebook-social-icon:hover {
  9. background-position: 0px 25px;
  10. }
  11.  
  12. .twitter-social-icon {
  13. height: 24px;
  14. width: 32px;
  15. background-image: url(system/pics/twitter-icon2.png);
  16. background-position: 0% 0%;
  17. }
  18.  
  19. .twitter-social-icon:hover {
  20. background-position: 0px 25px;
  21. }
trueblue
Możesz wszystkie 4 ikony skleić w jeden plik. Wtedy trzeba zmienić background-position: X Y
robert1974
tak, widzialem ten trick gdzies na internecie, nawet lepsze bo 1 obrazek szybciej sie laduje niz kilka. dzieki.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.