How do you put this type of code into jsfiddle?

http://css3pie.com/demos/gradient-patterns/

background-color: silver;
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
background-image: -webkit-linear-gradient(115deg, #b00 23px, transparent 23px),
                  -webkit-linear-gradient(295deg, #d00 23px, transparent 23px),
                  -webkit-linear-gradient(115deg, #b00 23px, transparent 23px),
                  -webkit-linear-gradient(295deg, #d00 23px, transparent 23px);
background-image: -moz-linear-gradient(115deg, #b00 23px, transparent 23px),
                  -moz-linear-gradient(295deg, #d00 23px, transparent 23px),
                  -moz-linear-gradient(115deg, #b00 23px, transparent 23px),
                  -moz-linear-gradient(295deg, #d00 23px, transparent 23px);
background-image: linear-gradient(335deg, #b00 23px, transparent 23px) 0 2px,
                  linear-gradient(155deg, #d00 23px, transparent 23px) 4px 35px,
                  linear-gradient(335deg, #b00 23px, transparent 23px) 29px 31px,
                  linear-gradient(155deg, #d00 23px, transparent 23px) 34px 6px;
-pie-background: linear-gradient(335deg, #b00 23px, transparent 23px) 0 2px / 58px,
                 linear-gradient(155deg, #d00 23px, transparent 23px) 4px 35px / 58px,
                 linear-gradient(335deg, #b00 23px, transparent 23px) 29px 31px / 58px,
                 linear-gradient(155deg, #d00 23px, transparent 23px) 34px 6px / 58px,
                 silver;
behavior: url(/pie/PIE.htc);

Let’s try this one instead:

How would I put it into jsfiddle?

background-color: #026873;
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;

Got it.


<style>
#grad1 {
    height: 200px;
background-color: #026873;
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;
}
</style>


<div id="grad1"></div>
3 Likes

The idea with JSFiddle, CodePen etc. is that you post the CSS in the CSS panel, the HTML in the HTML panel etc.

5 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.