yaharga yaharga - 6 months ago 54
CSS Question

Transition from black to another color through gradient (gradually) from a point with CSS only

states are closed and opened.

Closed: Color is black (there is no light and they are folded onto each other).

Opened: Color is red (there is light and they are in full view).

I want the color to fade from the point between the two elements, to show that the shadow starts from the pivot, until they close.

$('button').on('click', function() {

ul {
width: 320px;
height: auto;
margin: 0 auto;
max-height: 0;
transition: max-height .75s ease-in-out;
overflow: hidden;
li {
width: 100%;
height: 50px;
background: #2c3e50;
color: #fff;
text-align: center;
list-style: none;
vertical-align: center;
line-height: 3;
transition: transform .75s ease-in-out, margin .75s ease-in-out, background .75s ease-in-out;
button.active + ul {
max-height: 100px;
button.active + ul > li {
transform: perspective(320px) rotateX(0deg);
background: #e74c3c;
margin: 0;
li.odd {
transform: perspective(320px) rotateX(-90deg);
transform-origin: top;
margin-bottom: -100px;
li.even {
border-top: 1px dashed #bf2718;
transform: perspective(320px) rotateX(90deg);
transform-origin: bottom;
margin-top: -100px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="odd">Lorem</li>
<li class="even">Ipsum</li>


Easiest way I could see to do this was absolutely positioned 'before' pseudo-element with the gradient applied to it, and the opacity set to 0 when active. I've also added a toggle on the ul itself for the sake of ease.

Easiest to give you the jsfiddle:


I've added this to the styles:

li:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    opacity: 1;
    transition: all 0.35s ease;

.active li:before {
    opacity: 0;

li.even:before {
    transform: rotate(180deg);

and this for the sake of ease:


It needs some polish but it does the job. Basically when the ul is active, opacity on the gradient is set to 0, when the active class is removed, the gradient layer's opacity is animated back to 1.