Short Challenge

General Free Credits
by General Free Credits · 23 posts
10 years ago in Help & Requests
Posted 10 years ago · Author
I need this navigation bar to be transparent (faded look) in .css any one?

Code
<div class=" navbar navbar-static-top"> 
  <div class="navbar-inner">
   
    <a class="brand" href="#">Brand</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
     <li class="divider-vertical"></li>
     <li><a href="#">More</a></li>
      <li><a href="#">Options</a></li>
    </ul>
   
  </div>
  </div>
Posted 10 years ago
Welcome back to the family, nice to have you back.

What do you want to be transparent, The text? Other than that there's nothing to make transparent considering there's no border or background.


If you want to make the text transparent, do this:
Code
<style type="text/css">
   .navbar-inner a{
      opacity:0.4;
      filter:alpha(opacity=40); /* For IE8 and earlier */
   }
</style>


Hope that helps. If it's not what you want, let me know and I'll pump out some new code.
Posted 10 years ago · Author
Thanks for the welcome back... I didnt know I was gone though :twisted:

Any ways :D I dont want the text to be transparent, I just want the background to look faded like a lightly tinted car window. :D


P.S when running the code you will see that it has a background. :doubt:
Posted 10 years ago
General Free Credits wrote:
Thanks for the welcome back... I didnt know I was gone though :twisted:

Well, I hadn't see you post in a while or say anything ;)

General Free Credits wrote:
Any ways :D I dont want the text to be transparent, I just want the background to look faded like a lightly tinted car window. :D

Okay, I can do that.

General Free Credits wrote:
P.S when running the code you will see that it has a background. :doubt:

I ran the code and didn't see a background. I used this online tool: http://www.jmarshall.com/easy/html/testbed.html



Anyway, the only way to modify the background transparency without also modifying the content is to use css3:
Code
background-color: rgba(0,0,0,0.3);


Mess around with this code and see if you can get it how you wanted. It's a bit difficult to get the tinted window look, you'll have to mess with different rgba values.
Code
<html>
   <head>
      <style type="text/css">      
         .navbar-inner {
            background-color: gray;
         }
         
         .nav {
            background-color: rgba(0,0,0,0.3);
         }
      </style>
   </head>
   <body>
      <div class=" navbar navbar-static-top">
         <div class="navbar-inner">         
            <a class="brand" href="#">Brand</a>
            <ul class="nav">
               <li class="active"><a href="#">Home</a></li>
               <li><a href="#">Link</a></li>
               <li><a href="#">Link</a></li>
               <li class="divider-vertical"></li>
               <li><a href="#">More</a></li>
               <li><a href="#">Options</a></li>
            </ul>
         </div>
      </div>
   </body>
</html>
Posted 10 years ago · Author
Thanks D.M, but thats not what I want :(
I need you to use this to view the code http://www.bootply.com/61032#

you will see three menu bars with their html codes and .css

I can do like any thing with them but cannot get the background faded... every thing get faded when I try. :doubt:



P.S we using bootstrap method to code
and I've become a slave to work :( thats why I'm not here plus I dont remember my email I used to sign up for imvu and I forgot the imvu pass so I cant reset it :doubt:
Posted 10 years ago · Author
Yes I want the Navbar to be faded, not the buttons though... speaking of buttons maybe I'm going about this the wrong way <_<



I've tried all the .css skills I have for 12 hours yesterday and still I cant figure it out
Last edited by General Free Credits on Fri May 30, 2014 3:07 pm, edited 1 time in total.
Posted 10 years ago
General Free Credits wrote:
Yes I want the Navbar to be faded, not the buttons though... speaking of buttons maybe I'm going about this the wrong way <_<


Everything I have tried has resulted in the same results you're getting (faded background and content). The only way I think you will be able to accomplish this is by using a background image and repeating it.

EDIT: after reading articles and StackOverflow questions, I would say using an image is your best bet. Every work around I've heard would require a lot more code and effort than I think is worth it for this project.
Posted 10 years ago · Author
I know I could do that but :( I'm required to use .css to complete the task :(
Posted 10 years ago
General Free Credits wrote:
I know I could do that but :( I'm required to use .css to complete the task :(


Well according to every source I've read on the internet, it's impossible to have a transparent background without effecting child elements. Unless you resort to redundant code and tricky positioning.

However, this article claims to have a solution: http://robertnyman.com/2010/01/11/css-b ... d-filters/

Though it didn't work for me and it's not supported by all browsers.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in

Already have an account? Sign in here

SIGN IN NOW

Create an account

Sign up for a new account in our community. It's easy!

REGISTER A NEW ACCOUNT