I've seen this technique used quite a lot. Like say a separator border (like bottom border for stackoverflow header) which fades at both ends. How do I achieve this with compass? I've searched their documentation and google and can't find any examples of how to do this.
I've never used Compass CSS, but how about mixing CSS and SVG?
Your SVG file:
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="div" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255, 255, 225);stop-opacity:0"/>
<stop offset="50%" style="stop-color:rgb(153,153,153);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255, 255, 225);stop-opacity:0"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#div)" />
</svg>
The CSS:
div.separator
{
width: 80%;
height: 16px;
background-image: url(gradient_file.svg);
}
Related
I am using a gradient to fill an svg path.
like this:
<svg viewBox="0 0 40 40">
<defs>
<linearGradient id="progress-gradient" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="var(--offset-empty)" stopColor="var(--color-empty)" />
<stop offset="var(--offset-full)" stopColor="var(--color-full)" />
</linearGradient>
</defs>
<path d="..removed" fill="url(#progress-gradient)" />
</svg>
and I am styling it with css:
#progress-gradient {
--color-empty: #ffffff;
--color-full: #ff0000;
--offset-empty: 50%;
--offset-full: 100%;
}
I am trying to set the offsets dynamically to create a kind of progress within the SVG icon.
But this isn't working. Colors are working, but not offset.
Is there any other way I can dynamically set the offset positions with CSS?
many thanks
I'm trying to add some style to a QSlider I want to use a custom image as the handle that the user drags back and forth. While I've figured out how to use style sheets to have a custom icon drawn where the handle should be, the image is being drawn much too small and I cannot figure out how to make it larger.
Setting width and height seem to do nothing. I've tried using image, border-image and background-image, but none give me the ability to set the size of the handle image. Does anyone know how to do this?
This is the style sheet that I've been adding to my QSlider in QtDesigner:
QSlider::handle:vertical {
image: url(:/data/icons/mixer-slider-handle.svg);
width:64px;
height:64px;
}
This is the SVG:
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="30"
height="45"
viewBox="0 0 7.9374997 11.90625"
version="1.1"
id="svg8"
>
<defs
id="defs2">
<linearGradient
id="linearGradient844"
inkscape:collect="always">
<stop
id="stop840"
offset="0"
style="stop-color:#cecece;stop-opacity:1;" />
<stop
id="stop842"
offset="1"
style="stop-color:#ffffff;stop-opacity:1" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient824">
<stop
style="stop-color:#cecece;stop-opacity:1;"
offset="0"
id="stop820" />
<stop
style="stop-color:#ffffff;stop-opacity:1"
offset="1"
id="stop822" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient824"
id="linearGradient826"
x1="-3.9103179"
y1="297.24557"
x2="-3.8304768"
y2="285.38882"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.8683302,0,0,0.96503255,7.3827223,9.9179025)" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient844"
id="linearGradient838"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.86322913,0,0,0.81935486,7.5301966,52.317886)"
x1="-3.8119318"
y1="285.99686"
x2="-3.7885454"
y2="296.82458" />
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-285.09375)">
<rect
style="fill:url(#linearGradient826);fill-opacity:1;stroke:#0e0e0e;stroke-width:0.1373108;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect818"
width="5.157938"
height="11.397007"
x="1.453124"
y="285.36124"
ry="2.866178" />
<rect
style="opacity:1;fill:url(#linearGradient838);fill-opacity:1;stroke:none;stroke-width:0.12615089;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect828"
width="4.6027613"
height="8.9100981"
x="1.7161824"
y="286.60291"
ry="2.184411" />
<path
style="fill:none;stroke:#000000;stroke-width:0.24780074px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 1.8804469,291.0695 4.3266789,0.047"
id="path846"
inkscape:connector-curvature="0" />
</g>
</svg>
Looks like the answer is to set the margin attribute for both the groove and the handle to reflect the size of the handle you are using.
This worked for me:
.QSlider::groove:vertical {
border: 1px solid #111;
background-color: #333;
width: 6px;
margin: 24px 12px;
}
.QSlider::handle:vertical {
image: url(:/data/icons/mixer-slider-handle.svg);
margin: -24px -12px;
height: -30px;
}
I'm using this bit of code in an .svg file to apply a opacity fade out gradient on an element. The following code works well, but fades from left to right instead of vertically from top to bottom.
What code change would I need to make to achieve this? Thanks for the help!
SVG file:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
baseProfile="full">
<mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<linearGradient id="g" gradientUnits="objectBoundingBox" x2="1">
<stop stop-color="white" offset="0"/>
<stop stop-color="white" stop-opacity="0" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="1" height="1" fill="url(#g)"/>
</mask>
</svg>
CSS:
mask: url(/mypath/mask.svg#m1);
You set the direction of a gradient with the x1,y1,x2 and y2 attributes.
For a vertical gradient starting at the top and going down you need to go from (0,0) to (0,1).
<linearGradient id="g" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="white" offset="0"/>
<stop stop-color="white" stop-opacity="0" offset="1"/>
</linearGradient>
Essentially I'm trying to create an gradient alpha mask in using SVG and CSS (like this), and since the mask property is no longer on the standards track I'm exploring the filter route.
I've created a vertical alpha mask in Sketch, with the top being 0% #000000 and the bottom being 100% #000000, then exported it as an SVG and tweaked it using guidance from this O' Reilly article. It now looks like this:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!-- Start by creating our vertical linear gradient -->
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="alphaLinear">
<stop offset="0%" style="stop-color: #000000; stop-opacity: 0%;" />
<stop offset="100%" style="stop-color: #000000; stop-opacity: 100%;" />
</linearGradient>
<!-- Create a rectangle and apply the gradient as its fill -->
<rect id="boxRect" x="0" y="0" width="100%" height="200" style="fill: url(#alphaLinear);" />
<!-- Using that rectangle, we'll create a filter -->
<filter id="alphaGrad">
<feImage xlink:href="#boxRect" result="grad"/>
<feDisplacementMap scale="10" xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="grad"/>
</filter>
</defs>
<use id="gradientBox" fill="url(#alphaGradient)" xlink:href="#boxRect"></use>
</svg>
My knowledge of SVG isn't the greatest so I'm suspecting this is where I've gone wrong.
Next, I applied the filter using filter (and -webkit-filter) along with referencing the filter ID #alphaGrad:
-webkit-filter: url('http://blahblah.com/alphagradient.svg#alphaGrad');
But, of course, this it doesn't work. Can anyone help me get the hang of this? Or is this even possible? If not, can someone recommend a method of how to achieve this?
Thanks in advance!
Update: here's a pretty basic fiddle of what I'm doing...
There are many errors and misconceptions in your example (why did you think a displacementMap would help you?)
Why don't you start from the code below - pure SVG using an SVG mask and an SVG image.
<svg width="600px" height="600px" viewbox="0 0 600 600">
<defs>
<linearGradient id="alphaLinear">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0%" />
<stop offset="100%" stop-color="#999999" stop-opacity="100%" />
</linearGradient>
<mask id="Mask">
<rect x="0" y="0" width="600" height="600" fill="url(#alphaLinear)" />
</mask>
</defs>
<image xlink:href="http://upload.wikimedia.org/wikipedia/commons/7/71/Anadama_bread_(1).jpg" width="600" height="600" x="0" y="0" preserveAspectRatio="xMinYMin meet" mask="url(#Mask)"/>
</svg>
Few remarks:
SVG (and CSS) opacity value is not percertentual range but 0.0 - 1.0 range.
Mentioned mask property appears to be just prefixed in Webkit and unprefixed in Gecko.
If your target environment is HTML + CSS, you might not necessarily need SVG: you could get similar effect using linear-gradient and RGBA
background-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%); on some overlay (pseudo) element. pointer-events: none; could be useful then.
Ive been creating css3 text gradients. They work perfectly find in browsers, but when you view them on the web. there is always a line or a box around the text. Similar to what happens on this page: http://www.paulund.co.uk/playground/demo/css_text_gradient/
Is this a webkit bug?
Thanks to Michael's advice using an svg bg over a css3 generated one fixes the mobile issue.
Here is the code for the css:
background:url(../img/grad.svg) 0 -116px;
background-size: 100% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
And then the grad.svg:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="60">
<linearGradient id="normal" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#000000"/>
</linearGradient>
<rect x="0" y="0" width="100%" height="60" fill="url(#normal)" />
</svg>