Solved

complicated nav bar with trans gradient over abstract background

Posted on 2013-12-16
9
320 Views
Last Modified: 2013-12-23
Client wants me to implement their website design.  Here is a screen shot of what they want to do for their navigation

http://screencast.com/t/vVtMhCj1

The teal is a mouseover color.  Yes, they want it to extend beyond the right margin.  They also want to have a graduation of orange/yellow with a transparency so that you see the gray swoosh in the background.  Is this something that can be done?  Maybe I am overthinking it.  In case you are wondering, I did try to talk her out of this but she didn't budge.
0
Comment
Question by:nsitedesigns
  • 4
  • 4
9 Comments
 
LVL 8

Accepted Solution

by:
Adrian Crabtree earned 251 total points
ID: 39722532
Hi nsitedesigns,

You can try something I did on code pen: http://codepen.io/anon/pen/qpKLr

The gradients use rgba so you can control the opacity. Also, I set the width the the li to 100% and added a 100px padding-right. Just one way to go about doing this. I hope this helps you a little.

I used this resource to create the gradients: http://www.colorzilla.com/gradient-editor/
0
 

Author Comment

by:nsitedesigns
ID: 39722566
that is pretty close!  How do i set the transparency?  I never did that before on a website.
0
 
LVL 8

Assisted Solution

by:Adrian Crabtree
Adrian Crabtree earned 251 total points
ID: 39722586
RGBA stand for Red, Green, Blue, Alpha. Alpha is where you can set the opacity (anything from 0-1). In the example that I showed you, I set the opacity to .7 (or 70%). So below, you can see that the yellow color is set to rgba(255,214,33,.7) , and the darker orange is set to rgba(237,115,59,.7). Does that clear it up a bit?

background: linear-gradient(to right,  rgba(255,214,33,.7) 0%,rgba(237,115,59,.7) 100%);

Open in new window

0
 
LVL 14

Assisted Solution

by:Pierre Cornelius
Pierre Cornelius earned 249 total points
ID: 39723613
I put this example together for you.
Replace 'images/image0011.jpg' with your image path and filename
you can adjust opacity under the #menu css, I set it to 0.85


<!DOCTYPE html>
<html>
<head>	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>	
	<style>
		#container 
		{
			width:190px; 
			height:305px;
			overflow:hidden;
			
			/* background generated using: http://www.colorzilla.com/gradient-editor/  */
			background: #888b8c url('images/image0011.jpg'); 			
		}
		#menu 
		{
			position:relative;
			top: 10px;
			left: 20px;
			width:120px; height:275px;
			border: 2px solid #f2f2f2;
			padding-right: 10px;
			color: #f2f2f2;
			text-align:right;
			opacity:0.85;
			
			/* background generated using: http://www.colorzilla.com/gradient-editor/  */
				background: #bba474; /* Old browsers */
				/* IE9 SVG, needs conditional override of 'filter' to 'none' */
				background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYTQ3NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5OTZmNTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
				background: -moz-linear-gradient(left,  #bba474 0%, #996f57 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#bba474), color-stop(100%,#996f57)); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(left,  #bba474 0%,#996f57 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(left,  #bba474 0%,#996f57 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(left,  #bba474 0%,#996f57 100%); /* IE10+ */
				background: linear-gradient(to right,  #bba474 0%,#996f57 100%); /* W3C */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bba474', endColorstr='#996f57',GradientType=1 ); /* IE6-8 */


		}
		#menu ul {padding:0;}
		#menu li {list-style:none;text-align:right; padding-right:0px; margin-bottom:10px;}
		#menu li:hover {background-color:teal;padding-left:-20px;margin-left:20px;padding-right:120px;margin-right:-120px;}
		#menu a {text-decoration:none; color:white;font-size:10pt; }
		
	</style>
</head>
<body>

	<div id="container">
		<div id="menu">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Audio</a></li>
				<li><a href="#">Home Theater</a></li>
				<li><a href="#">Home Automation</a></li>
				<li><a href="#">Security</a></li>
				<li><a href="#">Structured Wiring</a></li>
				<li><a href="#">Telecom and Networking</a></li>				
				<li><a href="#">Contact Us</a></li>
			</ul>
		</div>
	</div

	<script>
		
	</script>
	
</body>
</html>

Open in new window

0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 14

Assisted Solution

by:Pierre Cornelius
Pierre Cornelius earned 249 total points
ID: 39723632
If you run into cross browser opacity issues, here is a good link to check out:
http://css-tricks.com/snippets/css/cross-browser-opacity/

It shows how to also cater for older browsers.
0
 
LVL 8

Assisted Solution

by:Adrian Crabtree
Adrian Crabtree earned 251 total points
ID: 39723851
If you go the route of using opacity/filter, it will add an opacity to the whole wrapping div (including text). This may not be ideal, so what you could do is add an extra div to take care of your background.

If you take a look at the pen I created, I added a div for the background and set positioning of that div to absolute. Then by adding a position relative to the wrapping nav div, I was able to keep the background div contained within the nav div.

Going this route will allow you to cater to older browsers, IE8, 7, etc.

http://codepen.io/anon/pen/Ltjca
0
 
LVL 14

Assisted Solution

by:Pierre Cornelius
Pierre Cornelius earned 249 total points
ID: 39724025
Good point acrab, but no need to add another div for that, the text parts are anchor elements, simply apply opacity:1 to them.

So in my example one would need to add opacity:1 to the css rule:

#menu a {text-decoration:none; color:white;font-size:10pt; opacity:1;}
0
 
LVL 8

Assisted Solution

by:Adrian Crabtree
Adrian Crabtree earned 251 total points
ID: 39724348
Hey PierreC, the way I've understood opacity is that if you place an opacity of .5 on the wrapping div, everything within that div would be .5. If you were to make an element opacity of 1 within that div, it would just return 100% of 50%, so the element would still be at 50%.  

I created a pen to illustrate what I am talking about: http://codepen.io/anon/pen/FLbks

You can see the wrapping div is set to an opacity of .5, and even though the inner div is set to an opacity of 1, the red color is still faded to .5 opacity.

Is there another way you were speaking of?
0
 
LVL 14

Assisted Solution

by:Pierre Cornelius
Pierre Cornelius earned 249 total points
ID: 39726067
You are right acrab. I guess it depends what the asker wants. If they don't want the text using opacity as well then it would have to be placed outside of the div where opacity is set.

below is my example revised to have the text opaque, not using opacity.
<!DOCTYPE html>
<html>
<head>	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>	
	<style>
		#container 
		{
			width:190px; 
			height:305px;
			overflow:hidden;
			position:absolute;
			
			/* background generated using: http://www.colorzilla.com/gradient-editor/  */
			background: #888b8c url('images/image0011.jpg'); 			
		}
		#menu_bkg 
		{
			position:absolute;
			top: 10px;
			left: 20px;
			width:120px; height:275px;
			border: 2px solid #f2f2f2;
			padding-right: 10px;
			color: #f2f2f2;
			text-align:right;
			opacity:0.85;
			
			/* background generated using: http://www.colorzilla.com/gradient-editor/  */
				background: #bba474; /* Old browsers */
				/* IE9 SVG, needs conditional override of 'filter' to 'none' */
				background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYTQ3NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5OTZmNTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
				background: -moz-linear-gradient(left,  #bba474 0%, #996f57 100%); /* FF3.6+ */
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,#bba474), color-stop(100%,#996f57)); /* Chrome,Safari4+ */
				background: -webkit-linear-gradient(left,  #bba474 0%,#996f57 100%); /* Chrome10+,Safari5.1+ */
				background: -o-linear-gradient(left,  #bba474 0%,#996f57 100%); /* Opera 11.10+ */
				background: -ms-linear-gradient(left,  #bba474 0%,#996f57 100%); /* IE10+ */
				background: linear-gradient(to right,  #bba474 0%,#996f57 100%); /* W3C */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bba474', endColorstr='#996f57',GradientType=1 ); /* IE6-8 */


		}
		#menu 
		{
			position:absolute;
			top: 10px;
			left: 20px;
			width:120px; height:275px;
			border: 2px solid #f2f2f2;
			padding-right: 10px;
			color: #f2f2f2;
			text-align:right;
			opacity:1;
			background:none;
		}
		#menu ul {padding:0;}
		#menu li {list-style:none;text-align:right; padding-right:0px; margin-bottom:10px;}
		#menu li:hover {background-color:teal;padding-left:-15px;margin-left:15px;padding-right:120px;margin-right:-120px;}
		#menu a {text-decoration:none; color:white;font-size:10pt; opacity:1; font-weight:bold;}
		
	</style>
</head>
<body>

	<div id="container">
		<div id="menu_bkg"></div>
		<div id="menu">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Audio</a></li>
				<li><a href="#">Home Theater</a></li>
				<li><a href="#">Home Automation</a></li>
				<li><a href="#">Security</a></li>
				<li><a href="#">Structured Wiring</a></li>
				<li><a href="#">Telecom and Networking</a></li>				
				<li><a href="#">Contact Us</a></li>
			</ul>
		</div>
	</div

	<script>
		
	</script>
	
</body>
</html>

Open in new window

0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
how to create a tile layout 1 20
Urgent need help ASAP With CSS 5 24
Phone Dialer 5 38
increase words that display in widget 6 22
Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now