CSS Faded Opacity Box

Discussion in 'CSS' started by Silver89, Apr 4, 2011.

0
  1. #1
    So I figured I'd try and recreate this image in just CSS..

    [​IMG]

    I have it perfected in Chrome and Internet Explorer 9 but issues in Firefox, anyone got any ideas on a fix?

    
<div style="width:100px; margin-left:100px; height:200px;background:#FF0000; overflow:hidden;">
          <div style="height:50px; background:#000; box-shadow:0px 0px 150px 70px #000;"></div>
</div>
    Code (markup):
     
    Silver89, Apr 4, 2011 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Yeah, you need to use the mozilla extension to make it work in Firefox, and you should also add the webkit extension.
    https://developer.mozilla.org/En/CSS/Box-shadow

    But it still doesn't work in IE8/7/6. No surprise! :rolleyes:

    
<html>
<head>
<style type="text/css">
#container {
	background:#FF0000; 
	height:200px;
	margin-left:100px; 
	overflow:hidden;
	width:100px; 
}

#box {
	background:#000; 
	box-shadow: 0px 0px 150px 70px #000;
	-moz-box-shadow: 0px 0px 150px 70px #000;
	-webkit-box-shadow: 0px 0px 150px 70px #000;
	height:50px; 
}
</style>
</head>
<body>
<div id="container">
	<div id="box"></div>
</div>
</body>
</html>
    HTML:
     
    Cash Nebula, Apr 4, 2011 IP
  3. Silver89

    Silver89 Notable Member

    Messages:
    2,243
    Likes Received:
    72
    Best Answers:
    0
    Trophy Points:
    205
    #3
    That still doesn't work in Firefox 4.0 for me, just get a black box with a red fading underneath :\
     
    Silver89, Apr 4, 2011 IP
  4. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Yeah, box-shadow is inconsistent across the browsers.
    Canvas gradient seems to work better, but it still doesn't work in IE8/7/6.
    
<!DOCTYPE html>
<html>
<head>
<title>Canvas Gradient Demo</title>
<script type="text/javascript">
    function drawBox() {
      var context = document.getElementById("canvas").getContext("2d");
        var gradient = context.createLinearGradient(0, 0, 0, 200);
        gradient.addColorStop(0, "black");
        gradient.addColorStop(1, "red");
        context.fillStyle = gradient;
        context.fillRect(0, 0, 100, 200);
    }
</script>
</head>
<body onload="drawBox()">
<canvas id="canvas" width="100" height="200"></canvas>
</body>
</html>
    HTML:
     
    Cash Nebula, Apr 4, 2011 IP
  5. Brunzig

    Brunzig Peon

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Nice i will start using this
     
    Brunzig, Apr 5, 2011 IP