linear gradient div using CSS3

Question

Please help me how I can make div using css like below image path.

Here is my code that is so far... http://jsfiddle.net/L8FfE/

<table class="screenheader" cellspacing="0" cellpadding="0" width="100%" style="padding-top: 5px;">
    <tr style="font-family: Calibri, Arial, Sans-Serif; font-size: 40pt; font-weight: bold;
    color: #fff; background: repeating-linear-gradient(180deg, #23538A , #A7CFDF 5px, #23538A  5px, #A7CFDF 10px);">
        <td width="100%" style="padding-bottom: 5px;">
            <div id="meetingname" width="100%" style="padding-left: 20px; text-align: left;">
                HI Test
            </div>
        </td>
        <td width="100%" style="padding-left: 20px; text-align: left;">
        </td>
    </tr>
</table>

You can add images inline and you should put your markup in the question. — Marcel Korpel
– Marcel Korpel, Commented Mar 14, 2013 at 12:30
I have a 1 reputation so i can't put image. please help me to design div like my image — giriraj
– giriraj, Commented Mar 14, 2013 at 12:41

Papagaai35 · Accepted Answer · 2013-03-14 13:28:27Z

Is this what you mean (beside the colors, I can't get those right)?
http://jsfiddle.net/L8FfE/2/

Html:

<div id="background">
    <div id="overlay"></div>
</div>

CSS:

div#background {
    width: 100%;
    height: 50px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#053F63), to(#105C97));
    background: -webkit-linear-gradient(#053F63 0%, #105C97 100%);
    background: -moz-linear-gradient(#053F63 0%, #105C97 100%);
    background: -o-linear-gradient(#053F63 0%, #105C97 100%);
    background: linear-gradient(#053F63 0%, #105C97 100%);
}
div#overlay {
    font-family: Calibri, Arial, Sans-Serif;
    font-size: 40pt;
    font-weight: bold;
    color: #fff;
    width: 100%;
    height: 50px;
    background:    -moz-repeating-linear-gradient(rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 5px, rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 10px);
    background: -webkit-repeating-linear-gradient(rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 5px, rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 10px);
    background:         repeating-linear-gradient(rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 5px, rgba(35, 83, 138, 1) 5px, rgba(167, 207, 223, 0) 10px);
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0)), color-stop(0.4, rgba(0, 0, 0, 0)), color-stop(0.6, rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 1)));
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
            mask-image:    -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
            mask-image:      -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
            mask-image:         linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
}

po228 · Accepted Answer · 2013-03-14 14:37:35Z

That's not quite right. You'll need another div to achieve both the left gradient and vertical gradient. I've written this for Chrome only, and you'll also have to change the #colors to rgba, but you can see in the JS fiddle here it looks much more like the jpeg.

HTML

<div class="rightGradient">
    <div class="horizontal stripes"></div>
    <div class="topGradient"></div>
</div>

CSS

.stripes {
    position: relative;
    height: 100px;
    width: 375px;
    -webkit-background-size: 100% 6px;
}

.horizontal {
    background-color: transparent;
    background-image: -webkit-linear-gradient(top, #0f5b97 50%, transparent 50%, transparent);
}

.rightGradient {
    position: absolute;
    height: 100px;
    width: 375px;
    background-image: -webkit-linear-gradient(right, #074166  20%, #0f5b97 70%);
}

.topGradient {
    position: absolute;
    top: 0px;
    height: 100px;
    width: 375px;
    background-color: transparent;
    background-image: -webkit-linear-gradient(286deg , #074166 -20%, transparent 70%);
}

Collectives™ on Stack Overflow

linear gradient div using CSS3

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related