4

enter image description here

I need box whose opacity will be lower near the edge of the box (Ref. image, the red marked box having box whose opacity is getting low from right to left)

I used 

.waterMark
{
background-color: #FFFFFF;    
float: right;    
opacity: 0.6;
position: absolute;
width: 80%;
z-index: 999;
}

<div class="waterMark">

<p>SOME NAME</p>

</div>

i have used float :right but still it is aligned to left.

SML
  • 2,172
  • 4
  • 30
  • 46
  • 1
    Use CSS3 transparency gradients, like outlined in [this Stackoverflow answer](http://stackoverflow.com/questions/2293910/css3-transparency-gradient) – Stefano Sanfilippo May 06 '13 at 14:00
  • 1
    You can also do this with a transparent .png, which is a little more cross-browser reliable than CSS gradients. – ralph.m May 06 '13 at 14:08
  • @esseks it is not working on firefox. – SML May 06 '13 at 14:10
  • 1
    As ralph.m is saying, using a painted PNG is compatible with almost any browser on this planet, see [this matrix](http://caniuse.com/#feat=png-alpha) for comparision. Optimize the PNG and appropriately cache the resources or you will consume bandwidth. – Stefano Sanfilippo May 06 '13 at 14:13
  • i will check that , thanks for your valuable replies. – SML May 06 '13 at 14:18

1 Answers1

4

You need to use CSS3 transparency and Gradient feature both at the same time.

some thing like below css:

.gradient{
        background-image: -webkit-gradient(
          linear, center center, left center, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

see this fiddle (it includes support for all the browsers. Am not sure of IE, cause I don't have it :))

  • 2
    You can also use [this tool](http://www.colorzilla.com/gradient-editor/#d1d1d1+0,ffffff+100&1+0,0+100;Custom) to generate CSS gradients easily. – Drewman May 06 '13 at 14:17
  • @Drewman , this is the amazing thing i ever seen for css building. – SML May 06 '13 at 14:20
  • @Sunil Lohar don't be tempted to put gradients everywhere though :) – Drewman May 06 '13 at 14:25