Gradient does not cover full text - html

I have made a gradient text using this method ;
.warn
background: linear-gradient(0deg, rgba(153,0,0,1) 17%, rgba(255,0,0,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
But when I look at the gradient on the page, it is like this:
Does anyone know why this happens? Thanks.
P.S. The text is italic and uses Ubuntu Italic font.

Related

Linear gradient not appearing in firefox even though correct prefix is used

Recently I have been coding a clicker game, and have found the need to use a meter to display progress. I wanted the meter to have a gradient that goes from light pink to cyan, and it works perfectly on chrome. However, when I used my home computer and booted up firefox; the gradient was no longer displayed; and the meter was a dull shade of green.
.pastrymeter::-webkit-meter-optimum-value {
background : linear-gradient(90deg, lightpink, cyan);
}
This is the styling for the meter; and nothing that I have changed fixes it. I tried adding the moz prefix to the background tag; which did nothing. I also tried changing background to background-image to see if it was an element thing; but that also did nothing.
What can I do to fix this?
Looks like you are targeting a non-standard feauture -webkit-meter-optimum-value, that isn't supported in Firefox.
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-meter-optimum-value
Try this, it is cross-browser compatible.
background: -moz-linear-gradient(90deg, lightpink, cyan);
background: -webkit-gradient(linear, left top, left bottom, from(#cfddac), to(#fff));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfddac', endColorstr='#ffffff');
background: -o-linear-gradient(rgb(207,221,172),rgb(255,255,255));
Change the values as you may require
Can you try this second method ?
<div style="background-image: -webkit-linear-gradient(bottom, #FE1C4A 22%, #AB244A 61%);
background-image: -moz-linear-gradient(bottom, #FE1C4A 22%, #AB244A 61%);
width: 200px; height: 100px; text-align: center;">
</div>

Applying Gradient to Text Shadow [duplicate]

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>

How do I change gradient color of text inside the Jumbotron?

I have been looking everywhere for the correct code to change only the text (title) within the Jumbotron.
Here's what I got:
<div class="jumbotron">
<div class="container text-center">
<h1 class="method2">Title here</h1>
<p>Sub-heading</p>
</div>
I want to change the gradient coloring of this title. I saw a css code somewhere that went like this:
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 problem I'm facing is that the bottom portion of my "Title here" bit seems cut off a bit, so I tried re-adjusting the bottom margin but it didn't work that way either. All that did was push the sub-heading further below.
I am also not sure how exactly this gradient pattern works. There doesn't seem many explanations about font gradient coloring for bootstrap.
Can someone explain if I'm doing something wrong and how this works?
Thank you.
If you downloaded the css and you have it in your folder, go find the line
.jumbotron .h1
in there just paste the code that you posted
-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));
and that's it, if you're importing the css from their website you're going to have to overwrite it

How do you add text gradient using css?

<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;
}

CSS, can i use two different colors in one table cell? (for example dark purple and light purple)

Doen anyone know how to use two colors in one table cell (td) and how to let them overflow inc each other?
For examble. For my website (www.ericversteeg.nl) i want to use in my guest book title columns light purple in the top of the cell and dark purple in the bottom.
I think i have to assign a class in the td.
But how do i make my class in CSS?
Greetings Eric
The CSS 3 drafts introduce gradient colours.
e.g.
background: linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%);
Note that browser support is not universal.
I found this tool quite helpfull: CSS3 Gradient Generator. The code it produces isn't the most beutiful but it works!
There are a couple ways to do this. The first is to have a div on top and a div on bottom, each with the different color.
<td class="multi_purple">
<div class="top">
</div>
<div class="bottom">
</div>
</td>
and style the two divs with their respective colors.
A "better" option would be to just use a background image of the right colors. This will be cross browser supported, but doesnt do well if your table grows or shrinks in size.
The newest option would be to add a gradient. check out http://www.css3please.com to see the syntax for this.
but its something like this
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: -webkit-linear-gradient(top, #444444, #999999);
background-image: -moz-linear-gradient(top, #444444, #999999);
background-image: -ms-linear-gradient(top, #444444, #999999);
background-image: -o-linear-gradient(top, #444444, #999999);
background-image: linear-gradient(to bottom, #444444, #999999);
with of course your purple shades in place.
This degrades into a solid color for browsers that dont support gradients (lookin at you ie 6/7?)
You could use a background gradient like was suggested, or using a background image that has both colors in it.
If you know that your cells are going to be say, 30px tall, make a 30px tall by 1px wide image that is split where you want it, and have both colors in it. Then using css:
td {
background-image: url(colors.png);
background-repeat: repeat-x;
}
To tile it horizontally, thus getting the effect you're after.
Is this what you're looking for?
http://jsfiddle.net/4NXRx/2/
It uses a background gradient and you don't need to call any image resources. You also don't have to worry about updating the image.
There's a back-up color for browsers that don't support gradients. It's an effect that isn't crucial to all visitors, so it's no big deal if some visitors don't see a gradient.
Note, that I have made the stops at 49%, so there is no gradual change. I don't know if that's what you want. Obviously, you'll have to choose nicer colors.
table td {
padding: 10px;
background-color: #CEC3FA;
background-image: linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -o-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -moz-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -webkit-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -ms-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -webkit-gradient(
linear,
right 49%,
right 50%,
color-stop(0.08, #CEC3FA),
color-stop(0.51, #B9AAD1)
);