validation errors W3c - html

I am getting the error
Parse Error progid:DXImageTransform.Microsoft.gradient(startColorstr='#007db9e8', endColorstr='#cc000000', GradientType=0) }
here is the code
.surgeryCategory .card-title.gradient {
display: block;
width: 100%;
background: linear-gradient(to bottom, rgba(125, 185, 232, 0) 0, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007db9e8', endColorstr='#cc000000', GradientType=0)
}


I forget to put semicolon at the end of the line
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007db9e8', endColorstr='#cc000000', GradientType=0);


Here's the correct code. You forgot to add semicolon at the end of the second last line.
.surgeryCategory .card-title.gradient {
display: block;
width: 100%;
background: linear-gradient(to bottom, rgba(125, 185, 232, 0) 0, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007db9e8', endColorstr='#cc000000', GradientType=0);
}

Related

Align text to bottom in a button and in front of background

How can I align the text in the button to the bottom?
I tried to set line-height and vertical-align: bottom; in my CSS but neither worked.
UPDATE:
Also, I want the text to be in front of the background. I have set back gradients in the normal, hover and active states, so I my white text to be in front of that.
Code:
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
color: white;
}
.img-panel:after {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
}
.img-panel:hover:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(40%, rgba(0, 0, 0, 0.3)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
}
.img-panel:active:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(40%, rgba(0, 0, 0, 0.6)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
<div class="col-md-4 img-panel-container">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
Hello
</button>
</div>
</div>
For some reason bootstrap is not working in the code snippet

You can create a child element in your button (here a span) that you position to the bottom of the button.
Because the button is position: relative, the span with position: absolute will be position according to the button.
We also create a child element to display the background, via the ::before pseudo-element selector.
To resolve which child will be display on top, between two position: absolute elements, the browser use the HTML/DOM order. So a ::before element will be displayed below the others, while a ::after will be displayed on top.
You also can force the stacking order with the z-index property.
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
}
.img-panel::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to bottom, transparent 40%, black 100%);
}
.img-panel:hover::before {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 40%, black 100%);
}
.img-panel > span {
position: absolute;
left: 0; right: 0; bottom: 0;
text-align: center;
color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
<span>Hello</span>
</button>

You could use vertical-align: bottom; but to do this you need to apply a display:table to the container and display:table-cell to the button and give him some specific height.
Take a look to this examples: http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html

Try adding this:
<style>
span{
position: absolute;
bottom: 0;
}
</style>
And in html markup add:
<span>Hello</span>

Try this
.img-panel {
display: flex;
flex-direction: column-reverse;
align-items: center;
}

If your button's height is 300px, you can try with a padding-top property :
CSS:
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
color: white;
padding-top:250px;
}
Bootply : http://www.bootply.com/AHSl2MVDIy

Place your button text in a span, give it absolute positioning and set bottom to 0:
See the .img-panel span.button-title rule.
Update:
To place the text above the background, just add a higher z-index for the button text. A low number will do it.
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
color: white;
}
.img-panel:after {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
}
.img-panel:hover:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(40%, rgba(0, 0, 0, 0.3)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
}
.img-panel:active:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(40%, rgba(0, 0, 0, 0.6)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
}
.img-panel span.button-title {
position: absolute;
bottom: 0;
z-index: 10;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
<div class="col-md-4 img-panel-container">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
<span class="button-title">Hello</span>
</button>
</div>
</div>

HTML gradients and CSS classes

For an assignment I need to make a small website, I wanted to make a navbar that had a gradient run through the whole thing. But when I add it, I has a space where the words are.
How can i make it do through the whole bar?
.navlist {
list-style-type: none;
width: 100%;
height: auto;
padding: 15px;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(91, 91, 91, 1)));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#5b5b5b', GradientType=0);
}
.navlist li {
float: right;
width: 16.666%;
}
<ul class="navlist">
<li>What's on</li>
<li>History</li>
<li>Special offers</li>
<li>contat us</li>
<li>other stores</li>
</ul>

Which is because of floated li elements.A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accommodate the floats Reference.Put overflow:auto or hidden to the parent which is having floated elements or try some clearfix hack. Here your snippet
.navlist {
list-style-type: none;
width: 100%;
padding: 15px;
overflow:hidden;
margin:0;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(91, 91, 91, 1)));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#5b5b5b', GradientType=0);
}
.navlist li {
float: right;
width: 16.666%;
}
<ul class="navlist">
<li>What's on</li>
<li>History</li>
<li>Special offers</li>
<li>contat us</li>
<li>other stores</li>
</ul>

You should add float left to .navlist because you use float right to your li.
You can also use:
.navlist li{
display:inline;
width:16.666%;
margin: 0 5%; /*it depends on what margin you want*/
}

CSS Opacity Fade

I'm trying to take this as a CSS background on a div, but I'd like to have the image start fading in to the background at around 200px like this (black background used for example). Is there a CSS only method of doing this?
I plan on wrapping this project in NodeWebkit, so as long as it works in Chrome I'm not worried about other browsers.
Thanks in advance!
HTML:
<div class="profileBox">
...
</div>
CSS:
.profileBox {
background-image: url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg');
background-repeat: no-repeat;
width: 300px;
}

Try this solution, no modification of your HTML is required and not JS.
Basically you can create your gradient using -webkit-linear-gradient adding property url for your image.
http://jsfiddle.net/0kj8t1zq/6/
<div class="profileBox"></div>
.profileBox {
position: absolute;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
s-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
width: 308px;

You have already answers to fade it to black.
If you want to fade it to transparent, you need masking. It doesn't have much support, but it works in Chrome
.profileBox {
background-image: url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg');
background-repeat: no-repeat;
width: 300px;
height: 400px;
-webkit-mask-image: linear-gradient(0deg, transparent 100px, black 200px);
border: solid 2px white;
}
body {
background-color: blue;
}
<div class="profileBox"></div>
Changed body background to blue to see it is really transparent

For the fade effect, you can use rgba in webkit-gradient.
To get an image AND a gradient as background you can play with opacity. But there is no CSS property background-opacity, so you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it (source).
.profileBox {
width: 300px;
height: 300px;
display: block;
position: relative;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0))); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* FF3.6+ */
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* IE10 */
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* Opera 11.10+ */
background-image: linear-gradient(top bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* W3C */
}
.profileBox::after {
content: "";
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background-repeat: no-repeat;
background-image: url(http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg);
}
<div class="profileBox">
</div>

Create a hr radial-gradient below the line

There is a wonderful hr gradient here in the answer (the jsfiddle he links to shows an updated css) - Create a beautiful horizontal line with CSS only. It is exactly what I am after but I would like the gradient to appear below then line instead of above it.
The html is very simple -
hr.fancy-line {
border: 0;
height: 1px;
position: relative;
margin: 0.5em 0;
/* Keep other elements away from pseudo elements*/
}
hr.fancy-line:before {
top: -0.5em;
height: 1em;
}
hr.fancy-line:after {
content: '';
height: 0.5em;
/* half the height of :before */
top: 1px;
/* height of hr*/
}
hr.fancy-line:before,
hr.fancy-line:after {
content: '';
position: absolute;
width: 100%;
}
hr.fancy-line,
hr.fancy-line:before {
background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: -webkit-gradient(radial, center center, 0px, center center, 75%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(75%, rgba(0, 0, 0, 0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}
body,
hr.fancy-line:after {
background: #f4f4f4;
}
<hr class="fancy-line"></hr>
I have tried various different things but cannot get it to work, plus whenever I change it, the line itself disappears.
Please can someone help... thank you

hr.fancy-line:after {
content:'';
height: 0.5em;
top: -8px; /*change or bottom:0; */
}
hr.fancy-line {
border: 0;
height: 1px;
position: relative;
margin: 0.5em 0;
}
hr.fancy-line:before {
top: -0.5em;
height: 1em;
}
hr.fancy-line:after {
content: '';
height: 0.5em;
top: -8px; /*or bottom:0; */
}
hr.fancy-line:before,
hr.fancy-line:after {
content: '';
position: absolute;
width: 100%;
}
hr.fancy-line,
hr.fancy-line:before {
background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: -webkit-gradient(radial, center center, 0px, center center, 75%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(75%, rgba(0, 0, 0, 0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75%);
}
body,
hr.fancy-line:after {
background: #f4f4f4;
}
<hr class="fancy-line"></hr>

linear gradient div using CSS3

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>

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%);
}

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%);
}