I want to make a gradient text-shadow (like this)
Is it possible to do that with CSS or/and Javascript?
Thanks for help.
You can try it with a linear gradient, like in the example snippet below. Please note, that this does not work in Internet Explorer and Edge. I tested it successfully in Chrome, Firefox and Opera, and have no option to test it with Safari.
div {
font-size: 128px;
background: linear-gradient(90deg, #ff0000 5%, #00B053 15%, #1BAADA 30%);
-webkit-background-clip: text;
-webkit-text-stroke: 12px transparent;
color: #000;
}
<div>
Text
</div>
Related
This question already has answers here:
Use CSS3 transitions with gradient backgrounds
(19 answers)
Closed 15 days ago.
I tried to make some text darker in CSS when you hover over it, but sadly it doesn't work correctly.
I want a smooth transition, however it just goes from one to the other.
Browser: Chrome
OS: Windows 11 64 bit
Here's my code:
.maintext {
font-size: 50px;
background: linear-gradient(to right, #f32170, #ff6b08, #cf23cf, #eedd44);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.maintext:hover {
background: linear-gradient(to right, #b11b54, #9b4104, #7e177e, #867d28);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
transition: 0.3s;
}
<p class="maintext">Hello, World!</p>
Currently, transitioning between gradients in CSS is not easy. It requires using CSSPropertyRule, which at the moment, has limited browser support.
However, if your goal is to simply make the gradient darker when you hover over it, you can accomplish this by applying the brightness CSS filter.
.maintext {
font-size: 50px;
background: linear-gradient(to right, #f32170, #ff6b08, #cf23cf, #eedd44);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
filter: brightness(1);
transition: filter 0.3s;
}
.maintext:hover {
filter: brightness(0.5);
}
<p class="maintext">Hello, world!</p>
HTML CODE
<div class="pageHeader">
<span class="coolStyleUnderline">Change Password</span>
</div>
CSS CODE
.pageHeader {
text-align: center;
color: #750000;
font-family: "MedievalSharp";
font-weight: bold;
font-size: 60px;
}
.coolStyleUnderline {
background: -webkit-linear-gradient(black, #750000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border-image: linear-gradient(to right, black, #750000);
border-image: -webkit-linear-gradient(right, #750000, black);
border-image-slice: 1;
display: inline-block;
line-height: .9;
border-bottom: 6px solid #750000;
}
Things I have tried
Setting the padding to 0
Setting appearance (including webkit, etc.) to "none"
Setting the line-height to 1
Setting the border to none BEFORE the border-bottom attribute
Devices With Issue
iPad Pro 12.9in (Safari and Chrome)
iPhone X (Safari and Chrome)
iPhone 6s (Safari and Chrome)
I have attached two photos. The first one is what the border is supposed to look like (taken on Windows Chrome) and the second one is what I am getting on my apple devices. Any help is much appreciated. Thank you!
No Issue Photo
Issue Photo
I figured it out boys. All I had to do was specify the border image width. This was done by adding the following to .coolStyleUnderline :
border-image-width: 0px 0px 6px 0px;
Thank you to everyone that tried! Have a great day!
I have some rules for my div "Border" It works in all other browsers but not in IE 10.
Anybody have any idea why this could be happening?
Thank you.
.border {
background: white;
border: 8px solid transparent;
-moz-border-image: -moz-linear-gradient(top left, white 50%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top left, white 50%, #3a4ed5 100%);
border-image: linear-gradient(to bottom right, white 50%, #3a4ed5 100%);
border-image-slice: 1;
}
.border {
background-color: white;
display: block;
height: 50px;
width: 150px;
text-align: center;
transform: skewX(-15deg);
}
<div class="border">
<div>
You said that you have the meta tag set to emulate IE10.
Border images are not supported by IE10, only IE11. (You can confirm here: http://caniuse.com/border-image/embed/.)
So if you set IE11 to emulate IE10, it will stop supporting border images.
To resolve the problem, you need to remove the IE10 emulation. The best thing to do here is to explicitly tell IE to use it's best available mode. This can be done as follows:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Simply swap out your existing meta tag for this one, and the border image problem will be solved.
However, before you make that change you should check to confirm if there is any other reason why your site might have wanted to be in IE10 mode. I'm guessing there isn't any reason, but it's worth checking.
I am a novice when it comes to css and am creating a custom audio player using a mixture of css and jquery. The progress bar of this audio player is a ring, which uses circle sectors to display progress. The sector is created using linear-gradient, like so:
background-image:
linear-gradient(-75deg, black 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, white 50%);
In firefox this works perfectly, but in both chrome and ie, a very slim white line is visible on the outside of half of the circle, presumably where part of the linear-gradient is supposed to cover.
I have created a jsfiddle that displays the issue, https://jsfiddle.net/9dagsrzz/
Is there something that I am doing wrong that causes this, or is there a fix I can apply that removes this line?
Thank you for your time.
Edit - it has been over a month and I thought I would update and say that I have still not been able to find a complete solution to this problem. The best way of dealing with the issue is to include a covering border, as suggested by Pustur below.
Samiskeen,
I'm no CSS expert either but I do know that each browser has its required prefixes when dealing with gradients:
-moz- is for Mozilla Firefox
-webkit- is for Apple Safari, Google Chrome, and also for ios and Android
-o- is for Opera
-ms- is for Microsoft IE and presumably Edge
You can have all of these present on their own line and the browser will pick the correct one.
Example:
background-image:
-moz-linear-gradient(-75deg, black 50%, transparent 50%),
-moz-linear-gradient(90deg, transparent 50%, white 50%);
-webkit-linear-gradient(-75deg, black 50%, transparent 50%),
-webkit-linear-gradient(90deg, transparent 50%, white 50%);
-o-linear-gradient(-75deg, black 50%, transparent 50%),
-o-linear-gradient(90deg, transparent 50%, white 50%);
-ms-linear-gradient(-75deg, black 50%, transparent 50%),
-ms-linear-gradient(90deg, transparent 50%, white 50%);
The website http://caniuse.com lists the major CSS rules, attributes and whether browser specific versions are required.(Nixon, p. 439).
Play around with the prefixes, they should help correct your problem.
Good Luck.
Jim
Not sure if this is a definitive solution or the best, but it seems to work fine at least on chrome.
HTML:
<!-- divs instead of spans -->
<div id="container">
<div id="position_indicator"></div>
<div id="inside"></div>
</div>
CSS:
#container {
width: 100px;
height: 100px;
background-color: black;
position: relative;
padding: 20px;
}
#inside {
width: 90px;
height: 90px;
background-color: black;
border-radius: 100%;
position: absolute;
margin-left: 5px;
margin-top: 5px;
}
#position_indicator {
border: 1px solid black; /* Fix the border issue! */
margin-left: -1px; /* Compensate for the new border */
margin-top: -1px; /* Compensate for the new border */
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
background-color: black;
background-image: linear-gradient(-75deg, black 50%, transparent 50%), linear-gradient(90deg, transparent 50%, white 50%);
}
Fiddle
<div class="firstname">
<p class="names">DANIEL</p>
</div>
The above is the html.
h1.method1 {
background: -webkit-linear-gradient(top, #878787, #000);
background: linear-gradient(top, #878787, #000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
h1.method2 {
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.5) 50%, rgba(0,0,0,1));
-webkit-mask-image: linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.5) 50%, rgba(0,0,0,1));}
The above is what i tried to do using .names selector, and the .firstname .names selector, and i tried a.names selector, I am not sure if the method doesnt work or i am using the wrong selector. But overall i just want to have the text to have a little bit of gradient to look good.
Use the text-shadow css property with inset at the end of the rule. This is the most cross browser way to do it. IE9 may not support it but that's it.
Use rgba color for greater control and edit the alpha channel in your browser (like firebug)
source: http://css-tricks.com/snippets/css/gradient-text/
This is WebKit only, but is the cleanest way to accomplish it as the text remains editable and selectable web text.
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}