Halbtransparente Flächen?

Halli,

kann mir jemand mit einem Tipp weiterhelfen und mir eine einfach Lösung nennen, wie ich eine Navigationsleiste so gestalten kann, dass das dahinter Liegende noch durchschimmert? Also so eine Art halbtransparenter Button in Richtung hellgrau oder besser milchig? Leider bekomme ich nur eine völlige Transparenz hin, ich hätte allerdings gerne eine farbige Halbtransparenz… (Habe selbst nur Kenntnisse in HTML und Style Sheet und a wengerl in ASP und Javascript)

Lieben und Dank!

Kim

Hallo Kim! (oder Corinne?)

kann mir jemand mit einem Tipp weiterhelfen und mir eine
einfach Lösung nennen, wie ich eine Navigationsleiste so
gestalten kann, dass das dahinter Liegende noch
durchschimmert? Also so eine Art halbtransparenter Button in
Richtung hellgrau oder besser milchig? Leider bekomme ich nur
eine völlige Transparenz hin, ich hätte allerdings gerne eine
farbige Halbtransparenz… (Habe selbst nur Kenntnisse in HTML
und Style Sheet und a wengerl in ASP und Javascript)

Das kommt drauf an, was und wie Du das bisher so vorbereitet hast.
(Vielleicht kannst Du den Link zur Test-Seite hier posten…)

Um so einen Effekt im Textbereich einer HTML-Seite zu erzeugen, könntest Du eine kleine GIF-Grafik verwenden: 2x2 Pixel … in etwa eine solche: http://marthinfranz.gmxhome.de/src/darkfade1.gif
oder diese: http://marthinfranz.gmxhome.de/src/darkfade2.gif

Das lässt sich dann auch per CSS-Stylesheet einbinden, aber es kommt sehr darauf an, wie Du bisher die Seite gebaut hast. Alternativ müsstest Du mit „MouseOver-Buttons“ arbeiten: Wenn der Cursor über dem Button steht, wird eine andere Grafik angezeigt.

Die CSS-Version für Links mit „getöntem Hintergrund“, wenn der Mauszeiger drüber steht (!) wäre z.B.:

\<!--
a:link { color:blue; background-color:#0000cc; }
a:visited { color:#6600ff; background-color:#0000cc; }
a:hover { color:yellow; background:url(darkfade1.gif); }
a:active { color:red; background:url(darkfade1.gif); }
--\>

Im umgekehrten Fall – wenn Du es mit Grafik und ohne JavaScript lösen willst – ist das schwieriger, um genau zu sein eigentlich sehr schwierig, weil dann die Grafik im Vordergrund stehen muss.
Ansonsten bliebe Dir, die Farben für a:link, a:visited usw. so anzupassen, dass es „milchig“ wirkt, sagen wir mal weisse Schrift auf hellgelbem Hintergrund

a:link { color:white; background:#ffffcc; }

Fragen? Dann bitte Posting oder Mail.

CU DannyFox64 :smile:

Hallo,

hey super - ganz lieben Dank!

Ich hab das meiste mit HTML gemacht, aber ich probier es jetzt einfach mal aus (leider ist eine Test-Seite noch nicht online). Ich hatte zwar auch mal von jemanden gesagt bekommen, dass ichs mal über eine Grafik probieren soll, aber ganz klar, war mir das noch nicht.
Nu hab ich wieder was zum Ausprobieren :smile:

Viele Grüße von Kim Corinne

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

ist aber nicht richtig standard, soll wohl in css3 definiert sein

.foo { 
 position:absolute;top:5px;left:5px;
 padding:20px;
 filter:Alpha(opacity=50, finishopacity=50); /\* ie \*/
 -moz-opacity:50%; /\* nn\>4 ? \*/
 background-color:#00ff00;
 }



abcd

 text 

ps: die meisten aktuellen browser koennen halbwegs brauchbar png anzeigen. da koennte man einen echten alphakanal einbinden - zum testen halt… wichtige infos wuerde ich da nciht drunter verstecken…

und was mir gerade noch einfaellt: wenn du nur das hintergrundbild durchscheinen lassen wilslt, kannst du ja in den zellhintergrund der navi auch einfach ein anderes hintergrundbild einbinden, dass dann tatsaechlich nur das abgesoftete haupt-hintergrundbild enthaelt…

und was mir jetzt noch einfaellt, bei dem kachelgif kommt es oftmals zu haesslichen moires oder anderen stufeneffekten…