how go creating irregular border variable colours 1 in screenshot?
i considered creating border image in graphics editor , using border-image property described in docs.
however, technique not allow me achieve effect of multiple background colours (grey , white in screenshot) entering border "waves".
another solution produce whole background white , grey in photoshop, , use on website. wanted avoid performance reasons, , prefer produce grey, checked pattern fragment , repeat it.
moreover, can see in screenshot, dark fragment image carousel - images come in different colours applying border-image carousel container not solution either.
i appreciate advice. thanks.
using svg:
you can using svg. pretty complex because approach uses patterns repeating circles, mask pattern fill produce transparent cuts. mask applied image produce full effect. in opinion closest want , has browser support. works fine in ie10+, edge, firefox, chrome, opera , safari.
there couple of points note though - (1) have somehow carousel work svg image because otherwise mask have no effect (2) radius of circles change width of container change , you'd either have use fixed size container (or) assign width of container viewbox attribute using js (or find setting prevent radius change happening, don't know of any) .
.masked { position: relative; height: 175px; width: 100%; background: linear-gradient(60deg, #eee 35%, white 35.5%), linear-gradient(300deg, #eee 35%, white 35.5%); background-size: 51% 100%; background-repeat: no-repeat; background-position: 0% 0%, 100% 0%; padding-top: 100px; } .masked svg { position: absolute; top: 0px; left: 0px; height: 100px; width: 100%; } path { fill: #fff; } image { mask: url("#mask"); }<div class='masked'> <svg viewbox='0 0 1200 100' preserveaspectratio='none'> <defs> <pattern id="circles" patternunits="userspaceonuse" width="10" height="100"> <path d="m0,0 l10,0 10,95 a5,5 0 0,0 0,95 l0,0" /> </pattern> <mask id="mask"> <rect height="100%" width="100%" fill="url(#circles)" /> </mask> </defs> <image xlink:href='http://lorempixel.com/1200/100/nature/1' x="0" y="0" height="100%" width="100%" /> </svg> lorem ipsum dolor sit amet... </div>using css:
this can done using css masks unfortunately browser support feature terrible. supported in webkit powered browsers. if other browsers need not supported wonderful option. need create radial gradient (that repeats in x axis) mask in below snippet, give required size , position accordingly.
.masked { position: relative; height: 175px; width: 100%; background: linear-gradient(60deg, #eee 35%, white 35.5%), linear-gradient(300deg, #eee 35%, white 35.5%); background-size: 51% 100%; background-repeat: no-repeat; background-position: 0% 0%, 100% 0%; padding-top: 80px; } .masked:before { position: absolute; content: ''; top: 0px; height: 80px; width: 100%; background: url(http://lorempixel.com/1000/100/nature/1); -webkit-mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle @ 50% 100%, transparent 50%, black 55%); -webkit-mask-size: 100% calc(100% - 12px), 12px 12px; -webkit-mask-position: 0% 0%, 0px 68px; -webkit-mask-repeat: repeat-x; }<div class="masked">lorem ipsum dolor sit amet</div>
Comments
Post a Comment