Hi guys, i'm a really noob in web design and just start my first project. What i intent was make a really nice nav bar with opacity and a solid color's text. In the illustrator looks like very good but when i try to put that in code i just can't isolate the text and all the thing looks opaque. I apologyze for my very poor english. Thanks a lot. Ronaldo
ronald, it would greatly help to see some code or a link, but I'll take a stab in the dark that you're using the opacity property, which controls the text as well as the background. Remove that and use rgba or hsla background color.
i'm a really noob in web design and just start my first project. What i intent was make a really nice nav bar with opacity and a solid color's text. In the illustrator looks like very good but when i try to put that in code i just can't isolate the text and all the thing looks opaque.
I apologyze for my very poor english.
Thanks a lot.
Ronaldo
You're right. I'm using the opacity property and just forget to put some code.
Thanks a lot.
HOME
#mainNav {
background-color: #42210B;
height: 54px;
width: 961px;
opacity: 0.27;
border-radius: 10px;
margin: 20px auto;
font-size: 12pt;
font-weight: normal;
color: #FFF;
font-family: "Arial Black", Gadget, sans-serif;
text-align: justify;
}
#mainNav {
background-color: rgba(66, 33, 11, 0.27);
height: 54px;
width: 961px;
border-radius: 10px;
margin: 20px auto;
font-size: 12pt;
font-weight: normal;
color: #FFF;
font-family: "Arial Black", Gadget, sans-serif;
text-align: justify;
}
and you should add in the browser specific border-radius properties:
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
I don't put the browser's properties compatibility yet, but I will.