complicated nav bar with trans gradient over abstract background

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.
nsitedesignsAsked:
Who is Participating?
 
Adrian CrabtreeConnect With a Mentor Commented:
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
 
nsitedesignsAuthor Commented:
that is pretty close!  How do i set the transparency?  I never did that before on a website.
0
 
Adrian CrabtreeConnect With a Mentor Commented:
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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Pierre CorneliusConnect With a Mentor Commented:
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
 
Pierre CorneliusConnect With a Mentor Commented:
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
 
Adrian CrabtreeConnect With a Mentor Commented:
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
 
Pierre CorneliusConnect With a Mentor Commented:
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
 
Adrian CrabtreeConnect With a Mentor Commented:
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
 
Pierre CorneliusConnect With a Mentor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.