Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

complicated nav bar with trans gradient over abstract background

Posted on 2013-12-16
9
Medium Priority
?
364 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 1004 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 1004 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 14

Assisted Solution

by:Pierre Cornelius
Pierre Cornelius earned 996 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 996 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 1004 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 996 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 1004 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 996 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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone 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

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 …
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

927 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