Runde Hover Effect

[TickTack]

Hi,

ich bin gerade dabei meine Navi neu zu gestalten und nun ist mir gerade eine Idee gekommen und zwar würde ich gerne als Hover effekt einen Grünen Hintergrund haben (also so eine art Rechteck) mit Runden Ecken...

Ich könnte es natürlich als Grafik machen aber dafür müsste ich dann für jeden einzelnen Menüpunkt eins erstellen und auch wenn welche hinzukommen...


Kann man das nicht mittels CSS erstellen?


Lieben Gruß
TickTack

 

[Solla]

AW: Runde Hover Effect

Hallo,

klar kannst Du das mittels CSS machen einfach einen Grünen Button erstellen und diesen mittels:

a:hover{
font-weight:bold;
background-image:url(button.png)}

dem Hover zuweisen. Natürlich wirst Du mit der Größe und der genauen Positionierung des Buttons ein wenig "rumexperimentieren" lassen. Übrigens abgerundete Rechtecke lassen sich Prima in PS mit dem Formenwerkzeug erstellen. ich hoffe, das hilft Dir weiter!

B.G.
Solla

 

[pac_nrw]

AW: Runde Hover Effect

Google mal nach rounded corners, dann wirst du genügend beispiele für eine css-Lösung finden. Viele Beispiele findest du
gruß
pac

 

[TickTack]

AW: Runde Hover Effect

Hallo,

klar kannst Du das mittels CSS machen einfach einen Grünen Button erstellen und diesen mittels:

a:hover{
font-weight:bold;
background-image:url(button.png)}

dem Hover zuweisen. Natürlich wirst Du mit der Größe und der genauen Positionierung des Buttons ein wenig "rumexperimentieren" lassen. Übrigens abgerundete Rechtecke lassen sich Prima in PS mit dem Formenwerkzeug erstellen. ich hoffe, das hilft Dir weiter!

B.G.
Solla

Genau so sollte es nicht sein, ich will ja keine Grafiken sondern z.B. so was:

a:hover {
background: #fff;
padding: 5px 7px;
}

Also nur mit Hilfe von Farben, sodas ich keine Grafiken erstellen muss, da ich nicht für jeden Menüpunkt ein einzelnes erstellen muss, da die Größen ja unterschiedlich sind...

 

[FreddyX2]

AW: Runde Hover Effect

CSS:

für Firefox, Netscape, Mozilla:

-moz-border-radius:30px;

Für Safari, Konqueror:

-khtml-border-radius:30px;

Oder mit jQuery + PlugIn:



Die jQuery-Variante funktioniert auch mit dem IE8.


Edit: Hier noch eine interessante Site:

 

[Solla]

AW: Runde Hover Effect

Hallo,

diese Idee ist sicherlich nicht schlecht aber......

CSS:

für Firefox, Netscape, Mozilla:

-moz-border-radius:30px;

Für Safari, Konqueror:

-khtml-border-radius:30px;

Oder mit jQuery + PlugIn:



Die jQuery-Variante funktioniert auch mit dem IE8.


Edit: Hier noch eine interessante Site:

:uhm:

Damit schließt man aber alle älteren Browser aus. Das funktioniert doch nur mit Browsern, die das neue CSS beherrschen!
Da die alten Browser immer noch sehr stark verbreitet sind wäre ich bei so einer solchen Variante vorsichtig, aber das ist natürlich Ansichtssache! Warum aber nicht eine Hintergrundgrafik erstellen, die so lang ist dass alle Menüpunkte reinpassen?!

B.G.

 

[FreddyX2]

AW: Runde Hover Effect

Hallo,

diese Idee ist sicherlich nicht schlecht aber......


:uhm:

Damit schließt man aber alle älteren Browser aus. Das funktioniert doch nur mit Browsern, die das neue CSS beherrschen!
Da die alten Browser immer noch sehr stark verbreitet sind wäre ich bei so einer solchen Variante vorsichtig, aber das ist natürlich Ansichtssache! Warum aber nicht eine Hintergrundgrafik erstellen, die so lang ist dass alle Menüpunkte reinpassen?!

B.G.

Weil der TE nach einer Lösung OHNE Grafiken gefragt hat. Ich sehe es wie Du, maximale Kompatibilität zu den verschiedenen Browsern. Aber es war nach einer Lösung ohne Grafiken gefragt und ich habe Lösungen vorgestellt, die ohne Grafiken auskommen.