Home > DeveloperSection > Forums > how i can create right gradient between two divs
Samuel Fernandes
Samuel Fernandes

Total Post:156

Points:1096
Posted on    April-08-2013 3:03 AM

 CSS-CSS3 CSS-CSS3 
Ratings:


 2 Reply(s)
 900  View(s)
Rate this:
Hi Every one!

I have two blocks http://imageshack.us/a/img203/9351/555el.png

how i can create gradiend between these blocks like this http://imageshack.us/a/img521/1866/8585.png

this is my css and html code

<style type="text/css">
  div.fx6p1 {
  width: 580px;
  height: 721px;
  background: #EDEDED;
  margin: 40px 0 0 40px; 
  padding: 9px;
  }
div.fx6Ra {
    width: 200px;
    background: #333333;
    height: 560px;
    margin: 170px 0 0 589px;
}
</style>
<div class="fx6p1">
  <div class="fx6Ra">
  </div>
</div>

Thank you!


AVADHESH PATEL

Total Post:604

Points:4228
Posted on    April-08-2013 7:54 AM

Hi!

you can create gradiend using below css

div.fx6Ra:before,
div.fx6Ra::before {
    content:' ';
    display:inline-block;
    position:absolute;
    top:219px;
    left:633px;
    height:560px;
    width:15px;
    background-image:-webkit-linear-gradient(right,black,transparent);
    background-image:-moz-linear-gradient(to left,black,transparent);
    background-image:-ms-linear-gradient(to left,black,transparent);
    background-image:-o-linear-gradient(to left,black,transparent);
    background-image:linear-gradient(to left,black,transparent);
}

Vijay Shukla

Total Post:100

Points:700
Posted on    April-08-2013 8:09 AM

Hi!

replace below code from your css and html code

<style type="text/css">
  div.fx6p1 {
  width: 580px;
  height: 721px;
  background: #EDEDED;
  margin: 40px 0 0 40px; 
  padding: 9px;
  }
div.fx6Ra {
    width: 200px;
    background: #333333;
    height: 560px;
    margin: 170px 0 0 589px;
    box-shadow: -10px 0 4px 0 #888888;
}
</style>
<div class="fx6p1">
  <div class="fx6Ra">
  </div>
</div>

Don't want to miss updates? Please click the below button!

Follow MindStick