Short Challenge

General Free Credits
by General Free Credits · 23 posts
10 years ago in Help & Requests
Posted 10 years ago · Author
Just read the article, I dont think it will work for me in bootstrap 3.0 :( so Thanks any ways D.M :D I'm going to have to fold on this one and go with the opacity png img :evil:... unless I can find a website with what I want and steel the code with Firebug :twisted:
Posted 10 years ago
General Free Credits wrote:
Just read the article, I dont think it will work for me in bootstrap 3.0 :( so Thanks any ways D.M :D I'm going to have to fold on this one and go with the opacity png img :evil:... unless I can find a website with what I want and steel the code with Firebug :twisted:


If you do manage to get it working, please share your code.
Posted 10 years ago · Author
:twisted: Will do! I'm currently working on a project to create a one page website with the latest coding techniques :mrgreen:
Posted 10 years ago
General Free Credits wrote:
:twisted: Will do! I'm currently working on a project to create a one page website with the latest coding techniques :mrgreen:


Sounds cool. I've been practicing that too. Sadly though I have to make sure my pages work cross browser including old versions of IE :( Been learning jquery too. Gonna try making some web games for the forums and more web tools for the tools page: https://www.imvumafias.org/imvu/Tools.html
Posted 10 years ago · Author
8) It's cool! lol! I use google link for jquery. When I get some time I will help on the games :twisted: Just have t finnish this project first :doubt:
Posted 10 years ago
Did you ever figure out the transparency code? will gave a go at this...lol...should prob go check out bootstrap first...
Gradient opacity?
Code
.navbar-custom1 .navbar-inner {
background: -moz-linear-gradient(top,  rgba(177,0,0,0.65) 0%, rgba(255,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(177,0,0,0.65)), color-stop(100%,rgba(255,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(177,0,0,0.65) 0%,rgba(255,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(177,0,0,0.65) 0%,rgba(255,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(177,0,0,0.65) 0%,rgba(255,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(177,0,0,0.65) 0%,rgba(255,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6b10000', endColorstr='#00ff0000',GradientType=0 ); /* IE6-9 */
}
Posted 10 years ago · Author
I've finally figure it outt :twisted: :twisted: :twisted: sooo this is the html code and the .css :twisted:

<div class="navbar-wrapper">
<div class="navbar navbar-transparent navbar-static-top">
<div class="container">
<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>
</div>
</div>





.page-header {
margin-top:0;
}

.panel-body {
padding-top:0;
}

/* Navigation bar*/
.navbar-inner {
background:rgba(0,0,0,.75)

}


.navbar-text {
color: #fff;
font-size:13px;

}

.navbar .brand{
color:#fff;

}

.navbar .nav >li>a{
color:#fff;

}

.nav-container {
padding-top: 2%;

}



.menu-nav {
float: none;

}





-- Mon Jun 02, 2014 1:30 am --

xhynrae wrote:
Did you ever figure out the transparency code? will gave a go at this...lol...should prob go check out bootstrap first...
Gradient opacity?
Code
.navbar-custom1 .navbar-inner {
background: -moz-linear-gradient(top,  rgba(177,0,0,0.65) 0%, rgba(255,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(177,0,0,0.65)), color-stop(100%,rgba(255,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(177,0,0,0.65) 0%,rgba(255,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(177,0,0,0.65) 0%,rgba(255,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(177,0,0,0.65) 0%,rgba(255,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(177,0,0,0.65) 0%,rgba(255,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6b10000', endColorstr='#00ff0000',GradientType=0 ); /* IE6-9 */
}



That wont do what I want it to do.... but yes... after hours of thinking and hitting dead ends... I've finally figure it out lol!
Posted 10 years ago
Hmm...that is not at all what I thought you were trying to do. In my mind, I thought you were trying to go for an aero glass effect for the background.
Posted 10 years ago · Author
:doubt: For real? :shock: oh my :evil: I thought I had explained my self properly.. I need a kick for that :lol:
Posted 10 years ago
General Free Credits wrote:
:doubt: For real? :shock: oh my :evil: I thought I had explained my self properly.. I need a kick for that :lol:


I must not understand very well. I loaded the code you posted into bootstrap and it looks likes a list with a gray background, did I do something wrong? I don't see any transparency.

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