Hi guys, I’m wondering the best way of creating an effect similar to this:
http://thebox.maxvoltar.com/ (if you look at the main image there’s a diagonal ‘sheen’ over the image)
Now what I’m looking to do is to mimic this look without the gradients, .25 opacity white would do it for me, what’s the best way of approaching this? I know that site uses the psuedo :after but is it possible to do this without using linear-gradient or is that still necessary?
Thanks
If you don’t want to use the linear gradients then you are probably limited to overlaying a transparent image that already has the diagonal stripe in place.
if you do want ti use the linear gradients then the relevant code from the demo is as follows.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.box {
width:400px;
height:400px;
margin:auto;
background:#999;
position:relative;
}
.box:after {
content: " ";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid rgba(255, 255, 255, .1);
border-bottom: 0;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
background: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
background: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
-webkit-background-origin: border-box;
-moz-background-origin: border;
background-origin: border-box;
}
</style>
</head>
<body>
<p class="box">test</p>
</body>
</html>
But you knew that anyway 
HI,
Just thinking about this you could do it using mitred borders and rgba transparency but it won’t work in IE8 and under though.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gradient overlay to image</title>
<style type="text/css">
h1,h2{color:#fff}
body{background:#000}
img{display:block}
div{
width:300px;
height:300px;
background:red;
position:relative;
}
div:after {
content: "";
display: block;
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
width:0;
height:0;
border:150px solid rgba(255, 255, 255, 0);
border-left:150px solid rgba(255, 255, 255, 0.3);
border-top:150px solid rgba(255,255, 255, 0.29);
}
</style>
</head>
<body>
<h1>Not IE8 and under or Safari</h1>
<h2>Uses transparent mitred borders</h2>
<div><img src="images/zimg6.jpg" alt="test" width="300" height="300" /></div>
</body>
</html>
Safari is also a little odd and places a line across the join which is a shame. Chrome is ok though.
Or you can use an image for better support using :after to place the image but you still lose iE7.
http://www.pmob.co.uk/temp/diagonal-gradient4.htm
Or if you nest a span you can support IE7 as well.
http://www.pmob.co.uk/temp/diagonal-gradient5.htm
IE6 doesn’t get to play although you could probably either use the alpha image loader filter or make a composite transparent image with one on and one off pixels but is too much work for a demo :).
Thanks for the reply Paul, will try that
Hi Paul,
I got that working (sort of) but my problem is that I can’t get the point top left to bottom right working, it’s as if it’s picking a random angle. I’ve posted the code and attached an image, hopefully it’s obvious what I’m doing wrong?
#headline contains two images within the section, with the :after I want to apply overlaying both of them
Thanks
#headline{
position: relative;
width: 792px;
height: 324px;
}
#headline:after{
content: " ";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: -webkit-gradient(linear, left top, right bottom, color-stop(.5, rgba(255, 255, 255, .3)), color-stop(.500, rgba(255, 255, 255, 0)));
}
Edit: I’ve kind of cheated and I’m using a 24 big png to overlay the effect, but I’m now having a problem that it’s blocking the link below it, any help with this would be appreciated.
Cheers
Hi,
Make sure that you set the z-index of the link to be higher than your overlay. You will need to add position:relative to the link in order for z-index to take effect.
.element{position;relative;z-index:99}
Regarding your original question then I think you can scale the linear gradients diagonally but it seems to be more trial and error than judgement.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#headline {
position: relative;
width: 792px;
height: 324px;
background:#ccc;
}
#headline:after {
content: " ";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid rgba(255, 255, 255, .1);
border-bottom: 0;
background: -webkit-gradient(linear, 0% 0%, 0% 80%, from(rgba(255, 255, 255, .25)), to(rgba(0, 0, 0, .45))), -webkit-gradient(linear, 0 0, 29% 172%, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
background:-moz-linear-gradient(0% 100% 112deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, .1), rgba(255, 255, 255, .3) 0%);
-webkit-background-origin: border-box;
-moz-background-origin: border;
background-origin: border-box;
}
</style>
</head>
<body>
<div id="headline"> test</div>
</body>
</html>
Or try one of the gradient tools.
Thanks I tried z-index but unfortunately the link covers the BG then, so stumped with that 
Do you mean you want the link under the gradient but still clickable? I don’t think that’s possible because its either under or its on top. You can’t have both
Maybe you can place another anchor on top of the BG so that there is something to click. Just absolutely place it into position and give it width and height but no content Then position over the other link.
I’d really need to see the page to debug further.
Thanks Paul, yeah it’s probably not possible. Trying to keep the code a semantic as possible, maybe I just need to do the effect in photoshop. Thanks for all the help!