+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [CSS] Menu Sprite (/thread-css-menu-sprite--7870)
Strony:
1
2
[CSS] Menu Sprite - Damian19 - 12-10-2011
Witam.
Chciałbym zakodować pewne menu w taki sposób aby treść tekstowa buttonów była w <li>.
Buttony wyglądają następująco:
![[Obrazek: 38602872.png]](http://img717.imageshack.us/img717/4186/38602872.png)
Chciałbym aby po najechaniu było podkreślenie i zmiana tła na czerwony.
PS. Chciałem zrobić to sposobem wycięcia image przed najechaniem, w trakcie najechania i po najechaniu. Ale stwierdziłem ze to nie ma sensu bo jeden link by mial 3 img.
Proszę o pomoc jakim sposobem można to zrobić aby było o porządnie wykonane.
RE: [CSS] Menu a:hover - Pedro84 - 12-10-2011
CSS? Background i text-decoration.
RE: [CSS] Menu a:hover - Damian19 - 12-10-2011
(12-10-2011, 23:39)Pedro84 napisał(a): CSS? Background i text-decoration.
Nie wiesz o co mi chodzi.. przeczytałeś to co napisałem ?
Każdy element czyli button w moim menu ma inną szerokość i chodzi o to by za pomocą stylów po najechaniu zachować kształt zaokrąglenia w każdym buttonie. I żeby w każdym buttonie zmieniał się gradient na czerwony.
RE: [CSS] Menu a:hover - Pedro84 - 13-10-2011
Co z tego, że ma inną szerokość? W CSS są i zaokrąglenia i gradienty. W tak prostym menu nie ma sensu używać żadnych grafik, ni nic.
RE: [CSS] Menu a:hover - Damian19 - 13-10-2011
Podałbyś te style na zaokrąglenie i gradient ??
RE: [CSS] Menu a:hover - mkas - 13-10-2011
Zaokrąglone rogi i gradienty są w CSS, ale będziesz miał problem z dostosowaniem tego do starszych przeglądarek. Sam niedawno miałem podobny problem i zacząłem stosować technikę CSS sprite. Stosowane jest to na wielu stronach i obrazkowe wcale nie waży wiele - dla przykładu menu z allegro http://static.allegrostatic.pl/site_images/1/0/layout/menu-sprite.png 7.8kB
RE: [CSS] Menu a:hover - Damian19 - 13-10-2011
Czyli jakim sposobem mam to zrobić ?
RE: [CSS] Menu a:hover - mkas - 13-10-2011
Szukaj pod hasłem CSS sprite menu. Przykładowe tutoriale: http://skyje.com/2010/02/css-sprites/
RE: [CSS] Menu a:hover - Damian19 - 13-10-2011
RE: [CSS] Menu a:hover - Kartofelek - 13-10-2011
Css gradienty itp:
http://css3please.com/
Żeby wszędzie śmigało:
http://css3pie.com/
Zabawy z CSS3 dla topornych:
http://css3.mikeplate.com/
Jak masz adobe cs5 to sobie zobacz:
http://doman.art.pl/2011-02-27/show
Szukaj w google pod tym hasłem
google -> css sprite tutorial
Kolego tutoriali jest "milion pińset". Do css sprite używasz width, height, overflow:hidden i bacgrkoun-position z ujemnymi pozycjami. Width i height określa wymiary "wycinka". Overflow hidden powoduje że nie widać nic poza tym wycinkiem. A background-position ustawia tło w odpowiednim miejscu. Wystarczy je odpowiednio przesunąć. I tyle filozofii.
Jak napisałem - tutoriali jest "milion pińset". Nie warto tego tutaj powtarzać bo to tylko forum.