Doorzichtige zwarte menu-bar

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Sylvio Lede

Sylvio Lede

25/02/2013 21:52:29
Quote Anchor link
Hallo allemaal,

Ik ben bezig met het maken van een website dmv Wordpress,
Nu wil ik mijn menu-bar, doorzicht zwart maken, zodat mijn background image er doorheen te zien blijft.
(zie voorbeeld: http://ringvemedia.com/)

Heeft iemand hier een oplossing voor?

Alvast bedankt!
 
PHP hulp

PHP hulp

31/01/2025 07:14:34
 
Eddy E

Eddy E

25/02/2013 22:09:43
Quote Anchor link
CSS transparency wellicht?
Dus even "CSS transparency" intypen in Google: https://www.google.nl/search?q=css+transparency
Tweede link (van CSS Tricks) voldoet prima.
Gewijzigd op 25/02/2013 22:11:22 door Eddy E
 
Wouter J

Wouter J

25/02/2013 22:13:18
Quote Anchor link
Die website gebruikt opacity, het enige nadeel daarvan is dat ook alles in dat element doorzichtig wordt.

Daarom raad ik je aan gewoon een background-color in te stellen en die color dan in het rgba formaat te doen. De RGB staan voor Red Green Blue en de A staat voor Alpha (doorzichtigheid).

Dit werkt alleen niet in IE8 en lager. Ik denk niet dat het nodig is om te zorgen dat het daarin ook werkt, het is slechts een kleine toevoeging, maar als je het niet hebt is het ook niet lelijk. Mocht je het wel lelijk vinden kun je Modernizr gebruiken om uit te zoeken of RGBa werkt en dan terug te vallen op een doorzichtige background-image of opacity (wat je dan filter: opacity(alpha=...%) moet worden, omdat IE8- ook geen opacity support).
 
Eddy E

Eddy E

25/02/2013 22:23:51
Quote Anchor link
Dat is inderdaad wel een nadeel ja.
Heb wel even een opzetje gemaakt: http://codepen.io/anon/pen/vpjmt
Gewijzigd op 25/02/2013 22:30:14 door Eddy E
 
Sylvio Lede

Sylvio Lede

25/02/2013 22:28:19
Quote Anchor link
Dank jullie wel voor het snelle reageren.
Welke website gebruikt opacity??

En ik ga uitzoeken hoe het rgba formaat in CSS precies werkt.

rgba{} werkt perfect, zoals ik het wilde hebben...
Enorm bedankt Wouter!
Gewijzigd op 25/02/2013 22:51:14 door Sylvio Lede
 
Wouter J

Wouter J

25/02/2013 22:35:02
Quote Anchor link
Sylvio, de website die jij gaf in je begin post.

Edit:

Ik heb ook even wat gebouwd wat gebruik maakt van rgba: http://jsbin.com/erevuq/1/watch
Gewijzigd op 25/02/2013 22:45:13 door Wouter J
 
Joey Drieling

Joey Drieling

25/02/2013 23:27:49
Quote Anchor link
Voor IE8 en lager is er een trucje met de grandient filter, die ondersteund wel alpha.
Zie: http://snipplr.com/view/37237
 
Sylvio Lede

Sylvio Lede

25/02/2013 23:40:39
Quote Anchor link
Wouter J op 25/02/2013 22:35:02:
Sylvio, de website die jij gaf in je begin post.

Edit:

Ik heb ook even wat gebouwd wat gebruik maakt van rgba: http://jsbin.com/erevuq/1/watch


De website http://ringvemedia.com/, die ik in het begin gaf in mijn post, was een voorbeeldsite..
De site waar ik nu mee bezig ben, is www.studionoordster.com

Ziet er heel mooi uit, wat jij snel even hebt gebouwd...
Gewijzigd op 25/02/2013 23:51:57 door Sylvio Lede
 
Wouter J

Wouter J

26/02/2013 11:20:36
Quote Anchor link
sylvio:
De website http://ringvemedia.com/, die ik in het begin gaf in mijn post, was een voorbeeldsite..
De site waar ik nu mee bezig ben, is www.studionoordster.com

Dat had ik al begrepen, ik wou alleen even aangeven hoe ringvemedia het deed.

sylvio:
Ziet er heel mooi uit, wat jij snel even hebt gebouwd...

Je mag het natuurlijk gebruiken. Open de CSS tab en haal dingen weg en kijk wat er gebeurd. Probeer zo het nu van alles te achterhalen, mocht je vragen hebben kun je die natuurlijk altijd stellen. Als je alles begrijpt kun je het toepassen op je eigen website.

joey:
Voor IE8 en lager is er een trucje met de grandient filter, die ondersteund wel alpha.

Vet, weer wat geleerd. Bedankt!
 
Sylvio Lede

Sylvio Lede

26/02/2013 13:16:07
Quote Anchor link
Thanks alot Wouter en ik ga er zeker mee 'stoeien' en mocht ik vragen hebben, dan weet ik je te vinden ;)

@Joey
Jij ook bedankt voor het trucje

Moet ik dan ipv selector #box, de selector gebruiken die ik voor mijn menu-bar hebt gebruikt??
 
Wouter J

Wouter J

26/02/2013 13:55:51
Quote Anchor link
sylvio, ik heb het voorbeeld wat bewerkt met Joey's trucje en wat uitleg: http://jsbin.com/erevuq/2/watch
 
Sylvio Lede

Sylvio Lede

26/02/2013 14:23:07
Quote Anchor link
Thanks Wouter J :D
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.