Zaloguj się

Damian19 · (Ten post był ostatnio modyfikowany: 14-10-2011, 03:17 przez Damian19.)

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]

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.

Pedro84 · 12-10-2011, 23:39

CSS? Background i text-decoration.

Damian19 · (Ten post był ostatnio modyfikowany: 12-10-2011, 23:51 przez Damian19.)

(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.

Pedro84 · 13-10-2011, 00:23

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.

Damian19 · 13-10-2011, 00:29

Podałbyś te style na zaokrąglenie i gradient ??

mkas · 13-10-2011, 01:31

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

Damian19 · 13-10-2011, 01:36

Czyli jakim sposobem mam to zrobić ?

mkas · (Ten post był ostatnio modyfikowany: 13-10-2011, 01:41 przez mkas.)

Szukaj pod hasłem CSS sprite menu. Przykładowe tutoriale: http://skyje.com/2010/02/css-sprites/

Damian19 · (Ten post był ostatnio modyfikowany: 13-10-2011, 03:07 przez Damian19.)

**Kartofelek** · 13-10-2011, 03:26

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.

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie