Solved

complicated nav bar with trans gradient over abstract background

Posted on 2013-12-16
9
330 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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
 
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

776 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