×

Message

"Special gradients" is now your active project.

Tasks

/* Using only background gradients */

 

.one { 

    width: 400px;

    padding: 20px 25px;

    border-top: 5px solid #000;

    margin: 40px auto;

    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));

    background-image: -webkit-linear-gradient(#000, transparent);

    background-image:

        -moz-linear-gradient(#000, transparent),

        -moz-linear-gradient(#000, transparent)

    ;

    background-image:

        -o-linear-gradient(#000, transparent),

        -o-linear-gradient(#000, transparent)

    ;

    background-image: 

        linear-gradient(#000, transparent),

        linear-gradient(#000, transparent)

    ;

    -moz-background-size:5px 100%;

    background-size:5px 100%;

    background-position:0 0, 100% 0;

    background-repeat:no-repeat;

}

 

/* Using pseudo-elements and background gradients */

 

.two {

    position: relative;

    width: 400px;

    padding: 20px;

    border: 5px solid transparent;

    border-top-color: #000;

    margin: 40px auto;

}

 

.two:before,

.two:after {

    content: "";

    position: absolute;

    top: -5px;

    bottom: -5px;

    left: -5px;

    width: 5px;

    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));

    background-image: -webkit-linear-gradient(#000, transparent);

    background-image: -moz-linear-gradient(#000, transparent);

    background-image: -o-linear-gradient(#000, transparent);

    background-image: linear-gradient(#000, transparent);

}

 

.two:after {

    left: auto;

    right: -5px;

}