css - How can I draw this background without a real BG image (using canvas/css3?) -
im building app using ionic2 , need add background (light blue lines) app background: , don't want import image (using html5 canvas &/or css3).
anyone can me it?
here css:
{ width: 100%; height: auto; background-repeat: no-repeat; background-size: 100% 100%; background-color: #01c4cd; }
thank you!
you don't need canvas or background image. can achieve css gradients:
#background { width: 300px; height: 400px; background-image: /* line 1 */ linear-gradient(45deg, rgba(255,255,255,0) 63%,rgba(255,255,255,0.1) 64%,rgba(255,255,255,0) 65%), /* line 2 */ linear-gradient(45deg, rgba(255,255,255,0) 78%,rgba(255,255,255,0.1) 79%,rgba(255,255,255,0) 80%), /* blue background gradient */ linear-gradient(45deg, #1f579b 0%,#7bdce5 100%); }
<div id="background"></div>
there's few different ways achieve this, in example there's 1 div full-size blue gradient in background, , 2 overlaying, smaller white gradients creating lines. can add more lines, change color etc. effect you're looking for.
you combine linear-gradient
statements keep file size smaller, they're separately here improved readability.
Comments
Post a Comment