I'm having trouble coming up with a pure CSS mechanism to get a particular background pattern happening.
What I'm looking for is a horizontal gradient that is also repeated vertically, with a gap between each instance. Example:
(source: howsfamily.net)
I can get the horizontal effect easily enough
background: linear-gradient(to left, white, red, white); background-size: 100% 50px; background-repeat: no-repeat; }
I can get the vertical effect (without the horizontal gradient)
background: linear-gradient(to bottom, red 0px, red 50px, transparent 50px, transparent 100%); background-size: 100% 150px; background-repeat: repeat-y;
Does anyone know how to combine the two?
Extending from comment:
Since you're already going for linear-gradient, I would suggest using an SVG for more freedom and better compatibility.
Example: http://dabblet.com/gist/6632969
The SVG that is used (beautified):
<?xml version="1.0"?>
<svg width="10" height="100" viewBox="0 0 10 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="l">
<stop offset="0%" stop-color="white" />
<stop offset="50%" stop-color="red" />
<stop offset="100%" stop-color="white" />
</linearGradient>
</defs>
<rect x="0" y="0" width="10" height="50" fill="url(#l)" />
</svg>
You can tweak the height and viewBox here and background-size in CSS to fit your need.
The preserveAspectRatio attribute here is crucial, otherwise the background image may not stretch.
Related
I will like to achieve something like this
I have tried using clip path, but I am struggling achieving the desired result. Any help will be appreciated
You need mask for this:
.box {
--h: 50px; /* height of the element */
--b: 60%; /* height of the bar */
width: 200px;
height: var(--h);
background: linear-gradient(90deg,red, blue);
-webkit-mask:
linear-gradient(#000 0 0)
50%/calc(100% - var(--h)) var(--b) no-repeat,
radial-gradient(calc(var(--h)/2) at calc(var(--h)/2) 50%, #000 96%, #0000)
0 50%/calc(100% - var(--h)) 100% repeat-x;
}
<div class="box"></div>
<div class="box" style="width:300px;--b:45%;"></div>
Honestly, you'd probably be better off using an SVG (https://developer.mozilla.org/en-US/docs/Web/SVG) instead of a clip-path if you need something like that. Here's one I did really quickly in Illustrator but you can make SVGs in several other apps as well. Not saying you necessarily couldn't use a clip-path to accomplish this but it seems like it would be more work than the 5 minutes it took to make the SVG and map the gradient.
svg {
fill: url(#gradient);
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="250px" viewBox="0 0 500 250">
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#00ff77" />
<stop offset="100%" stop-color="#ffef00" />
</linearGradient>
</defs>
<path d="M350.333,84.055c-15.52,0-28.956,8.881-35.531,21.833H105.531C98.957,92.937,85.52,84.055,70,84.055
c-22,0-39.833,17.834-39.833,39.833c0,22,17.834,39.834,39.833,39.834c15.52,0,28.956-8.881,35.531-21.833h209.271
c6.574,12.952,20.011,21.833,35.53,21.833c21.999,0,39.833-17.834,39.833-39.834C390.166,101.889,372.332,84.055,350.333,84.055z" />
</svg>
Problem:
The following svg code not work in browsers:
<svg width="207" height="209" viewBox="0 0 207 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M96.2318 8.29356C149.379 4.30837 195.684 44.2918 199.657 97.599C203.631 150.906 163.767 197.351 110.62 201.336C57.473 205.321 11.1677 165.338 7.19452 112.031C3.2213 58.7234 43.0847 12.2787 96.2318 8.29356Z" stroke="url(#paint0_angular)" stroke-width="2"/>
<defs>
<radialGradient id="paint0_angular" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(103.426 104.815) rotate(-94.2626) scale(96.7891 96.5016)">
<stop stop-color="#FF7870"/>
<stop offset="1" stop-color="#FF7870" stop-opacity="0"/>
</radialGradient>
</defs>
</svg>
If replace stroke atribute in path fragment of svg with simple color (for example #f00) - it works, but with radial gradient - not works.
Question:
Is there a way to make this svg valid for browsers?
OR
Is there a way to make this element with HTML & CSS?
All information, that I've found not solves the problems, because:
Background of circle must be transparent
Gradient has grades around the circle (not from top to bottom)
P. S. Expected view of svg:
You can do this using mask and conic-gradient
.box {
width: 200px;
height: 200px;
margin: 20px auto;
border-radius: 50%;
background: conic-gradient(#0000, red);
-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 calc(100% - 9px));
mask: radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 calc(100% - 9px));
}
body {
background: url(https://picsum.photos/id/100/1000/1000) center/cover;
}
<div class="box">
</div>
I'm trying to put a radialGradient background in a SVG circle and nothing will work. It only works in Internet Explorer. Even just a solid color background won't work. I must have setup my document incorrectly. Maybe this is due to cloning from a hidden copy? The actual project can be seen here. I have it hosted here. To see the problem circle click "New Player". I'm trying now in HTML5, but I believe that I've also had this problem in xhtml.
index.html:
<!doctype html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body style="background-color:#EEEEEE;">
<div>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 225 140" preserveAspectRatio="xMidYMid slice"
id="d00" class="svg">
<defs>
<radialGradient cx="20%" cy="20%" id="gearShift">
<stop offset="0%" style="stop-color:white;"/>
<stop offset="80%" style="stop-color:black;"/>
</radialGradient>
<style type="text/css"><![CDATA[
.gear {
background: radial-gradient(ellipse at 20% 20%, white 20%, black 80%);
}
]]></style>
</defs>
<circle id="gear00" class="gear" cx="70" cy="20" r="10" style="stroke:black;" fill="url(#gearShift)" />
</svg>
</div>
</body>
</html>
styles.css:
.gear{
stroke:black;
background: radial-gradient(ellipse at 20% 20%, white 20%, black 80%);
background-color:red;
background-image:-webkit-gradient(linear, left top, right top, from(red), to(#f06d06));
background-image:-webkit-linear-gradient(left, red, #f06d06);
background-image:linear-gradient(to right, red, orange);
}
I've commented out the following rule in styles.css which shows the Player 0 that all the other players are copied from. This allows the background of the circle to be shown. Once you've added Player 1 when switching between players, whenever Player 0 is hidden, the background on all copies of this circle are hidden.
#_00, #sort00, #playertab00, .hidden {
/*display:none !important;*/
}
Sorry, this might be a duplicate of this question. It seems like the issue stems from the fact that the background in the defs section is linked to the circle by an ID. I was cloning it and creating multiple radialGradients with the same ID.
I've fixed this by splitting the def into its own svg element.
<body>
<svg xmlns="http://www.w3.org/2000/svg" id="svgDefs" class="svgDefs">
<defs>
<radialGradient cx="35%" cy="35%" id="gearShift">
<stop offset="0%" style="stop-color:white;stop-opacity:1"/>
<stop offset="50%" style="stop-color:black;"/>
</radialGradient>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 225 140" preserveAspectRatio="xMidYMid slice"
id="d00" class="svg">
<circle id="gear00" class="gear" fill="url(#gearShift)" cx="70" cy="20" r="10" style="stroke:black;"/>
</svg>
</body>
I have a problem here. I need something to be implemented onclick of a button. I searched on the net and found out that SVG was an easier way to do it rather than CSS stylesheets.
I have an HTML5 canvas (which is basically a snapshot from a video stream that I have taken and drawn on to the HTML 5 canvas using drawImage()). On click of a button, I want the image with the following effect to come on the canvas instead of the original image.
My problem is that I am able to replicate the effect if I apply the effect on just an image. However, on the canvas it gives me the mask separately and the image separately. This is the code that I am using for the SVG
<svg height="0">
<defs>
<mask id="mask-radial">
<rect width="500" height="500" fill="url(#g1)"></rect>
<radialGradient id="g1" cx="80%" cy="80%" r="100%">
<stop stop-color="black" offset="50%"/>
<stop stop-color="white" offset="110%"/>
</radialGradient>
</mask>
<!--<mask id="mask-linear">
<rect width="400" height="300" fill="url(#l1)"></rect>
<linearGradient id="l1" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="white" offset="0%"/>
<stop stop-color="black" offset="30%"/>
<stop stop-color="white" offset="100%"/>
</linearGradient>
</mask> -->
<filter id="filtre1">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
<!-- <filter id="filtre2">
<feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
</filter> -->
</defs>
</svg>
This is how I am calling it in CSS
.effet{
width: 500px; height: 500px;
margin: 0 auto 50px auto;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
}
.effet img{
position: absolute;
}
.filtre--r{
-webkit-mask: -webkit-radial-gradient( center, closest-side, transparent 50%, black 80%);
-webkit-mask: radial-gradient( closest-side at center, transparent 50%, black 80%);
-webkit-filter: blur(40px);
mask: url('#mask-radial');
filter: url('#filtre1');
}
and these are my HTML elements.
<div class="effet">
<img src="/static/images/noEffect.png" alt="" />
<img class="filtre filtre--r" src="/static/images/noEffect.png" alt="" />
</div>
Can somebody please tell me how I can recreate the effect for my canvas? Thanks in advance.
I researched and found that HTML5 Canvas radial gradient was an effective solution.
var lightSize = 100;
var x = 200;
var y = 200;
var radialGradient = context.createRadialGradient(x, y, 0,x, y, lightSize);
radialGradient.addColorStop(0, "#FFFF99"); // color at start circle
radialGradient.addColorStop(0.9, "#FFFF99"); //color at offset 0.9
radialGradient.addColorStop(1, '#7D7D5C');// color of finish circle
context.globalCompositeOperation = "multiply";
context.fillStyle = radialGradient;
Was able to recreate the effect totally.
Does Opera browser supports linear-gradient? What is syntax?
Thanks
No, Oper does not support linear gradient of CSS3. But, you can use svg for backgrounds. Here is content of simple svg file with gradient:
<svg xmlns="http://www.w3.org/2000/svg" version="1.0">
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0%" style="stop-color: #9c0000;"/>
<stop offset="100%" style="stop-color: #590000;"/>
</linearGradient>
</defs>
<rect x="0" y="0" fill="url(#gradient)" width="100%" height="100%" />
</svg>
No, but it has been announced that it will very soon. My guess would be March.
AS of Aug 2011 YES, Opera does support linear gradients.
At Gradients in Internet Explorer 9 you can see the how using it.
Briefly:
/* Opera */
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);
Hope it helps you.
No but here's the best solution.
Go to photoshop, make a big ass gradient in whatever direction lets say 2560px x 20px
Use "save for website" as a jpg, using and any % of quality but save it as 2560px x 1px instead.
Use it as a background image with repeat-x or repeat-y whatever repeat is required to extend the 1px width/height....And it will barely cost you a KiloByte or two.