Solved

complicated nav bar with trans gradient over abstract background

Posted on 2013-12-16
9
335 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Jqeury/JS: Mutiplying the difference in 2 dates and comparing to another number 2 30
replica website 2 35
Asp in script 6 39
Media Queries  not Firing 6 19
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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.

828 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