am facing one issue on gradient css on web and android devices text are visible but on Safari its not showing at all. Please have look on both the screen shots.
I've checked with caniuse.com, and both -webkit-text-fill-color and background-clip: text are said to be supported both in Safari/Desktop as well as Safari/iOS.
.gradient-effect {
background: linear-gradient(240.86deg, #ff8329 0%, #ff007a 66.41%);
-webkit-text-fill-color: transparent;
width: max-content;
background-clip: text;
-webkit-background-clip: text;
}
.mine-box-title {
font-family: Poppins;
font-style: normal;
font-weight: bold;
font-size: 40px;
line-height: 44px;
display: flex;
align-items: center;
letter-spacing: -0.01em;
}
<h2 class="mine-box-title gradient-effect">25 MILLION</h2>
There is an unresolved, open issue about this on the WebKit Bugzilla since 2017: background-clip:text doesn't work with display:flex. Apple has ignored this bug for 4 years, it will probably never be resolved.
Remove display: flex and it works:
.gradient-effect {
background: linear-gradient(240.86deg, #ff8329 0%, #ff007a 66.41%);
-webkit-text-fill-color: transparent;
width: max-content;
background-clip: text;
-webkit-background-clip: text;
}
.mine-box-title {
font-family: Poppins;
font-style: normal;
font-weight: bold;
font-size: 40px;
line-height: 44px;
letter-spacing: -0.01em;
}
<h2 class="mine-box-title gradient-effect">25 MILLION</h2>
Related
If I put "NEWS & EVENTS", the 'EVENTS' will disappear.
But if I change '&' to '#', it works fine. How can I use '&' without causing text disappearing
.title {
width: 1438px;
height: 142px;
left: 94px;
top: 201px;
font-family: "Eurostile";
font-style: normal;
font-weight: 900;
font-size: 180px;
line-height: 78.8%;
/* identical to box height, or 142px */
text-align: center;
text-transform: uppercase;
background: linear-gradient(95.99deg, #CE9B58 25.39%, #FFEC83 73.41%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<div class="background">
<h1 class="title">NEWS & EVENTS</h1>
<h1 class="title">NEWS # EVENTS</h1>
</div>
The & is wider than the #, so you can simply increase the width of your .title:
.title {
width: 1488px;
height: 142px;
left: 94px;
top: 201px;
font-family: "Eurostile";
font-style: normal;
font-weight: 900;
font-size: 180px;
line-height: 78.8%;
/* identical to box height, or 142px */
text-align: center;
text-transform: uppercase;
background: linear-gradient(95.99deg, #CE9B58 25.39%, #FFEC83 73.41%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<div class="background">
<h1 class="title">NEWS & EVENTS</h1>
<h1 class="title">NEWS # EVENTS</h1>
</div>
The width, height, top, left and font-style probably aren't necessary:
.title {
font-family: "Eurostile";
font-weight: 900;
font-size: 11.25rem;
line-height: 78.8%;
/* identical to box height, or 142px */
text-align: center;
text-transform: uppercase;
background: linear-gradient(95.99deg, #CE9B58 25.39%, #FFEC83 73.41%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<div class="background">
<h1 class="title">NEWS & EVENTS</h1>
</div>
You need to escape special characters in HTML. Try this instead: &
I'm trying to get an inset effect on buttons through CSS. In Firefox this looks like in the first image, in Chrome like the second. I do not understand why and how to resolve this. Can anybody please give me a hint on what's going on? Thanks.
Firefox
Chrome
Here's the markup:
<div id="controls">
<div class="musicStyles"><span class="btnLetter">S</span>
<input type="checkbox" class="box"data-value="Classic" data-key="83">
</div>
</div>
Here's the CSS:
.btnLetter {
font-family: 'Courier New', Courier, monospace;
font-size: 100px;
text-align: center;
display: inline-block;
margin: -7px 4px 0 0;
color: transparent;
background-clip: text;
text-shadow: 2px 4px 3px #805235;
background-color: black ;
font-weight: bold;
}
#controls {
width: 100%;
height: 200px;
text-align: center;
margin-top: 300px;
position: relative;
}
the problem is chrome is not understanding the background-clip in css portion.
So provide it like this
-webkit-background-clip: text;
-moz-background-clip: text;
instead of
background-clip: text;
What I want
Chrome
On Chrome, the input text looks normal.
What is happening
Firefox
Safari
As you can see, the input text is being slightly cut off at the bottom on Firefox and majorly cut off on Safari. How can I fix that?
If anyone could help w/ this it would be greatly appreciated!
Code
HTML
<div class="row page-header">
<div class="col-xs-10">
<div class="form-group">
<input type="text" name="Worksheet-Name" class="form-control input-lg" placeholder="Worksheet Name..." aria-label="Write worksheet name here"> </div>
</div>
</div>
CSS
/*Add borders when hover or click on input boxes*/
input[type="text"] {
outline: none;
box-shadow:none !important;
border: 1px solid white; /*make the borders invisble by turning same color as background*/
}
input[type="text"]:hover, input[type="text"]:focus{
border: 1px solid #cccccc;
border-radius: 8px;
}
/*Style input text boxes*/
input[type='text'][name='Worksheet-Name']{
font-size: 36px;
margin-top: 20px;
margin-left: 15px;
}
input[type='text'][name='Worksheet-Problem']{
font-size: 20px;
}
/*Change placeholder*/
input[type='text'][name='Worksheet-Name']::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-weight: 500;
font-size: 36px;
}
input[type='text'][name='Worksheet-Name']::-moz-placeholder { /* Firefox 19+ */
font-weight: 500;
font-size: 36px;
}
input[type='text'][name='Worksheet-Name']:-ms-input-placeholder { /* IE 10+ */
font-weight: 500;
font-size: 36px;
}
input[type='text'][name='Worksheet-Name']:-moz-placeholder { /* Firefox 18- */
font-weight: 500;
font-size: 36px;
}
/*Change placeholder*/
input[type='text'][name='Worksheet-Problem']::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-weight: 400;
font-size: 20px;
}
input[type='text'][name='Worksheet-Problem']::-moz-placeholder { /* Firefox 19+ */
font-weight: 400;
font-size: 20px;
}
input[type='text'][name='Worksheet-Problem']:-ms-input-placeholder { /* IE 10+ */
font-weight: 400;
font-size: 20px;
}
input[type='text'][name='Worksheet-Problem']:-moz-placeholder { /* Firefox 18- */
font-weight: 400;
font-size: 20px;
}
JSFiddle
Guys sometimes proposed solutions don't work with placeholders, here is more powerful approach:
input::placeholder {
overflow: visible;
}
You can reduce the bottom padding and/or the font size and that will fix your overflow issue.
input[type='text'][name='Worksheet-Name']{
font-size: 35px;//instead of 36
margin-top: 20px;
margin-left: 15px;
}
or
.input-lg {
height: 46px;
padding: 10px 16px 0;//change here to have 0
font-size: 18px;
line-height: 1.33333;
border-radius: 6px;
}
also possibly answered here with line-height:
Why is Firefox cutting off the text in my <input type="text"/>?
Fixed this with line-height:1 on the input
The cause is placing the line-height on the placeholder, if you remove that then it will no longer be cut
I'm hoping to achieve the effect in the following design.
Possible without using images?
fiddle: https://jsfiddle.net/8k66bwbk/
.blue-fade
{
font-size: 40px;
font-family: Helvetica,Arial,sans-serif;
font-weight: 100;
color: #1ba0d7;
}
Do you want something like that?
.blue-fade {
font-size: 40px;
font-family: Helvetica,Arial,sans-serif;
font-weight: 100;
background: -webkit-linear-gradient(#1ba0d7, #002d3f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<p class="blue-fade">
368%
</p>
https://jsfiddle.net/9dx4fcrz/
You can also change fade by opacity. Here is an example with hover.
.blue-fade
{
font-size: 40px;
font-family: Helvetica,Arial,sans-serif;
font-weight: 100;
color: #1ba0d7;
}
.blue-fade:hover {
opacity: 0.5;
}
<h2 class="blue-fade">
Subheadline
</h2>
Sadly, what you are asking for is not supported in Firefox, so in order for my example to work you must use Chrome.
Example
`
h1{ font-size: 72px;
background: -webkit-linear-gradient(#999, #222);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<h1>Text</h1>
HI i have a small Problem with my :hover CSS code. On IE8 my link hover just when i move mouse over text but outer text it doesn't work. I don't really know where my mistake is. Need some help!
html:-
text text text
CSS:-
.ctaBlock {
border: 1px solid #333;
font: 400 10px/43px arial,helvetica,sans-serif;
color: #333;
letter-spacing: .1em;
display: inline-block;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-transform: uppercase;
line-height: 42px;
width: 34%;
}
#content .ctaBlock:after {
font-size: 7px;
font-weight: 400;
line-height: 1;
font-family: iconFont;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: greyscale;
font-style: normal;
font-variant: normal;
letter-spacing: normal;
text-decoration: none;
text-transform: none;
content: '>';
display: inline;
margin-left: 3px;
}
#content .ctaBlock:hover {
background:rgb(255,255,255);
background: transparent\9;
background:rgba(255,255,255,0.3);
filter:progid:DXImageTransform.
Microsoft.gradient(startColorstr=#4cffffff,endColorstr=#4cffffff);
zoom: 1;
text-decoration: none;
cursor: pointer;
}
IE8 has some problems handling transparent parts of elements. I had the very same problem a while ago and I solved it by adding a transparent image (1px by 1px) as background in CSS:
background-image: url("transparent.png");
Or with a data-URL:
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wgUEhgsb9YM9wAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAADUlEQVQI12NgYGBgAAAABQABXvMqOgAAAABJRU5ErkJggg==);
I think an even simpler solution could be adding a non transparent background color to your link. But this depends on your needs of a transparent background. I havn't tested the second solution, but you could give it a try.
opacity property does not work in IE8. add this background:rgb(255,255,255); and then add opacity:0.8 separately at the end. Or it would be better if you use hash color code.