text gradient on safari makes some bug which doesn't exist on Firefox or Chrome. I use Safari 13.0.5. See screenshot
Screenshot of problem
I am trying to put a gradient on some text with that code:
.vs-plus-text {
max-height: 500px;
width: auto;
visibility: visible;
padding: 25px;
overflow: hidden;
z-index: 100;
}
.p1 {
background: -webkit-linear-gradient(#ab1d5b, #d92c48);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
<div class="vs-plus-text hover-plus-vs12 hover-plus-res">
<p class="p1">Lorem ipsum</p>
</div>
Tried to add some margin, padding, line-height etc, but when I remove this "top border or left border
" I get border on other side. Border property doesn't affect on it.
I found similar or almost exact problem but there is no solution.
Link to similar problem
Thanks for help.
I just solved the same problem by using svg to render my gradient text.
React Demo
<div className="countdown">
<svg
style={{
width: '100%',
height: '100%',
}}>
<defs>
<linearGradient id="gradient" x1="0" x2="0%" y1="0" y2="100%">
<stop stopColor="#ffe19b" offset="0%" />
<stop stopColor="#f3cb6f" offset="100%" />
</linearGradient>
</defs>
<text
fill="url(#gradient)"
dominantBaseline="middle"
textAnchor="middle">
<tspan x="50%" y="50%">
{seconds}
</tspan>
</text>
</svg>
</div>
Code Pen Demo
Related
I drew a circle with svg (which is also positioned absolute) and I would like to put text into the middle of the circle. It's is no problem if the text is 1 character long, but the content of the page may change dynamically and the text width could be 2 or 3 characters long as well:
<div id="someDivWrap" style="position:relative">
<svg id="someCircle" style="position:absolute;left:200px;right:300px">
...
</svg>
<span id="textInMidOfCirc" style="position:absolute;left:245px;right:341px">X</span>
</div>
But text in the middle of the circle could be X or XX or XXX.
EDIT:
here is the complete code:
<div id="someDivWrap" style="position:relative;width:174px;height:434px;border: 4px solid #525878;background-image: linear-gradient(#5bb8ff, #5f80e4); margin-left:255px">
<svg id="someCircle" style="position:absolute;left:-120px;top:300px" width="120" height="240">
<defs>
<linearGradient id="CalenderGradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#f8e498" />
<stop offset="100%" stop-color="#d2811d" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="0" fill="url(#CalenderGradient)" />
<circle cx="50" cy="50" r="15" stroke="black" stroke-width="0" fill="black" />
</svg>
<span id="textInMidOfCirc" style="position:absolute; left:-75px; top:341px; color:lime; font-weight:bold">X</span>
</div>
Yes, and I need the circle as an SVG.
If I get this right you want this.
There are more ways to do this but you can add width and height to the container and a display flex to position (center) the text. Position the SVG absolute and keep the text relative.
Keep in mind I added a background-colour and border radius to the container that you can remove, it's only there for demo purposes.
<div id="someDivWrap" style="position:relative; width: 300px; height: 300px; display: flex;
align-items: center; justify-content: center; background-color: aqua; border-radius: 50%;">
<svg id="someCircle" style="position:absolute; top: 0;
left: 0; width: 100%; height: 100%;">
...
</svg>
<span id="textInMidOfCirc">X</span>
</div>
So I have a logo for a website I'm making with React and Express. The SVG path is returned from a function which is called in both Desktop and Mobile components. Here's my default.css (which stands for default style, applied to both mobile and desktop, I'm only changing color stuff here.
svg {
fill: url(#logo-gradient);
}
#logo-gradient {
--color-stop-1: rgba(242, 68, 132, 1);
--color-stop-2: rgba(237, 136, 173, 1);
--color-stop-3: #fbbed4;
}
Here's how it works well on Desktop view:
Not working on Mobile:
However, if I use fill: red; it shows on mobile as expected, of course, in red:
I have no idea what could be wrong, It should just work. Any help would be appreciated!
Edit: Responding to "somethinghere", I thought it would be irrelevant to include svg code since it's returned by a function and the same function is called on both mobile and desktop components... But here it is:
getLogo = () => {
return (
<svg
viewBox="0 0 250 50"
width="250"
height="50"
version="1.1"
id="svg3785">
<defs>
<linearGradient id="logo-gradient">
<stop offset="0%" stop-color="var(--color-stop-1)" />
<stop offset="77%" stop-color="var(--color-stop-2)" />
<stop offset="100%" stop-color="var(--color-stop-3)" />
</linearGradient>
</defs>
<path d="M 17.699219 8.7597656 ... really long path"/>
</svg>
)
}
And in component (including only parent divs):
<div className="logo-container">
{this.getLogo()}
</div>
And for the Mobile:
<div className="nav-resp-logo-container">
{this.getLogo()}
</div>
I have tried to simplify your code to something testable, and it all seems to be working fine across devices on my end:
:root {
--g1: red;
--g2: green;
--g3: blue;
}
#definitions {
position: fixed;
top: 0;
left: 0;
transform: translate(-100%,-100%);
opacity: 0;
pointer-events: none;
}
#logo text {
fill: url(#logo-gradient);
}
<svg
viewBox="0 0 250 50"
width="250"
height="50"
id="definitions"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="logo-gradient">
<stop offset="0%" stop-color="var(--g1)" />
<stop offset="77%" stop-color="var(--g2)" />
<stop offset="100%" stop-color="var(--g3)" />
</linearGradient>
</defs>
</svg>
<svg
id="logo"
viewBox="0 0 250 50"
width="250"
height="50"
xmlns="http://www.w3.org/2000/svg">
<text x="0" y="40" style="font-size: 40px; font-weight: bold;">Hello World</text>
</svg>
Which means your problem might not be in the code you are showing us. Maybe the logo is accidentally hidden on mobile? What browsers are you testing this on? Which devices?
The only advice I could give your is to ensure that you have a defined XMLNS, or XML namespace. If you do not, funky things can happen on certain browsers - mostly older ones. So make sure your <svg> tags at least contain this:
xmlns="http://www.w3.org/2000/svg"
I need to develop the next style:
The gradient around the image has diferents colors and can be uncompleted.
How can I do that and set the % of it?
For people that ask for code:
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #222;
}
.module-border-wrap {
max-width: 250px;
padding: 1rem;
position: relative;
background: linear-gradient(to right, red, purple);
padding: 3px;
}
.module {
background: #222;
color: white;
padding: 2rem;
}
I believe you'll need to use SVGs. Here is a gradient you can apply to a path. You can use stroke-dasharray and stroke-offset to get the semi circle as well.
<svg height="150" width="150">
<defs>
<radialGradient id="grad1" cx="80%" cy="20%" r="100%" fx="100%" fy="50%">
<stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,200,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="100" cy="100" rx="30" ry="30" stroke="url(#grad1)" stroke-width="10" fill="none" stroke-linecap="round" stroke-dasharray="1000" stroke-dashoffset="840"/>
</svg
The stroke-dashoffset="" is the number you can adjust to increase or decrease the size of the circle. This works because you are creating a dashed line, that has very far apart dashes, so it is only showing part of one dash. If you offset that dash you can move it along the path.
I've created a simple outlined triangle. The problem i need to solve - is to create animation of filling the gap between triangles from bottom to top.
When i am using the fill option for polygons, the fill area overlaps the other triangle, so that there is no "hole" in the shape.
body{
background: #7085EA;
}
.triangle-container{
width: 500px;
margin: auto;
text-align:center;
}
.triangle {
stroke: #fff;
fill: transparent;
}
<div class="triangle-container">
<svg height="500" width="500">
<polygon points="250,100 100,400 400,400" class="triangle"/>
<polygon points="250,180 160,360 340,360" class="triangle"/>
</svg>
</div>
Initial codepen is here.
The area that needs to be filled is shown on screenshot here
Any help is appreciated. Thanks in advance!
Based on the advices here, and an another SO issue, came up with the following solution:
body{
background: #7085EA;
}
.triangle-container{
width: 500px;
margin: auto;
text-align:center;
}
.triangle {
stroke: #fff;
}
<div class="triangle-container">
<svg height="500" width="500">
<linearGradient id="loading" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="40%" stop-opacity="1" stop-color="#fff">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/>
</stop>
<stop offset="40%" stop-opacity="0" stop-color="#fff">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/>
</stop>
</linearGradient>
<path d="M250,100 L100,400 400,400 250,100 M250,180 L340,360 160,360 250,180z" class="triangle" fill="url(#loading)"></path>
</svg>
</div>
I am currently working on a scrollbar which looks just like this. If this text is to long for you just skip to the example!
There will be arrows at the left and right side to scroll either left or right. The color of the scrollbar is not grey as it seems but rgba(0,0,0,0.6). So its a transparent black, which will be used in front of images.
Now I want the last few letters in the line to fade out like in this example. To accomplish that I am using a div overlay with:
background-image: linear-gradient(to right, rgba(255,255,255,0), black)
But if I would do that with a transparent scrollmenu, it would mess up the background-color of the scrollmenu (if you don´t know what I mean look here).
So I found a solution by combining two divs with linear-gradients on the very right, which, if you lay them over each other, create exactly the background color of the scrollmenu. One of these lays behind the font, one of them overlays the font. That way I can achieve some transparency on the font. Here is an example for you guys:
#rightPart, #leftPart{
width:200px; height:50px;
position:absolute; top:0;left:0;
color: white;
}
#rightPart{
z-index:-1;
background:linear-gradient( to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
#leftPart{
background:linear-gradient( to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
<div id="rightPart"> Slight Transparency effect on this </div>
<div id="leftPart"></div>
The problem is that the transparency effect is limited to the background transparency of 0.5. Therefore the transparency effect can´t get as strong as I want it to be.
Now I am asking for a solution, with which I could achieve a stronger transparency effect. I would appreciate your suggestions.
Please remember that I can´t just make a specific word in the end transparent, since there is always a different word in the end of the scrollbar! Consequently I would need to make the font itself in a specific area transparent. And I personally don´t know how to do that (especially if it is supposed to work on all of the newest browser versions - including IE9+).
<svg> filters are just what your looking for.
IE9 here to ruin your day CAN I USE IT?
Now to adjust the filter simply change the offset of the stop elements inside the linearGradiant.
offset to determine where the effect takes place
stop-color and stop-opacity to determine what the effect should be
example:
<br>
<svg height="40" width="200" viewbox="0 0 100 20" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="endfade" x1="0%" y1="0%" x2="100%" y2="0">
<stop offset="50%" stop-opacity="1" />
<stop offset="90%" stop-opacity="0" />
</linearGradient>
</defs>
<text id="spesial" fill="url(#endfade)" x="0" y="15">Your text here</text>
</svg>
<br>Color?
<br>
<svg height="40" width="200" viewbox="0 0 100 20" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="pinkblue" x1="0%" y1="0%" x2="100%" y2="0">
<stop offset="25%" stop-opacity="1" stop-color="pink" />
<stop offset="50%" stop-opacity="1" stop-color="aqua" />
<stop offset="90%" stop-opacity="0" stop-color="aqua" />
</linearGradient>
</defs>
<text id="spesial" fill="url(#pinkblue)" x="0" y="15">Your text here</text>
</svg>
Well, I can not offer a solution with full browser support.
But since there isn't any other answer, may be it can be useful
First, let's create a base div that will hold the semitransparent color.
Above it, let's set a div with the text. overlayed by a gradient from transparent to gray. this makes the right side of the div fully gray.
The trick is to set for this div a mix-blend-mode of hard-light. This makes gray behave as transparent, keeping black as black
#base {
left: 0px;
width: 200px;
height: 50px;
position: relative;
background: rgba(0,0,0,0.5);
}
#text {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
mix-blend-mode: hard-light;
}
#text:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
background: linear-gradient(90deg, transparent 30%, gray 80%);
}
#base:nth-child(2) {
background: rgba(0,0,0,0.25);
}
#base:nth-child(3) {
background: rgba(0,0,0,0.125);
}
<div id="base">
<div id="text"> Slight Transpareny effect on this </div>
</div>
<div id="base">
<div id="text"> Slight Transpareny effect on this </div>
</div>
<div id="base">
<div id="text"> Slight Transpareny effect on this </div>
</div>