I was wondering if there is a way to apply a text gradient in Firefox? I can get it to work in Chrome and Safari and the code goes like:
h1 {
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#000000));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
text-transform: uppercase;
font: bold 4em "Lucida Grande", Lucida, Verdana, sans-serif;
}
But there doesn't seem to be anything out there for Mozilla.
Unfortunately, I think only WebKit-based browsers implement the text-fill-color property. As far as I'm aware, there is no workaround for Mozilla yet.
FireFox does now appear to support the webkit parameters, aliasing -webkit-background-clip as background-clip (webkit doesn't alias it, hence the most compatible way at present appears to be to use -webkit-backgroup-clip as both FF and WK understand it)
Related
I have multiple backgrounds with a gradient, and its working for Firefox, Chrome and Safari, with certain media querys for mobile devices.
As usual the problem is Internet Explorer. I used to have a conditional stylesheet for IE where I just loaded a single background image, but as far as I know, IE10 wont support < !--If IE--> in my CSS.
Ideally I would like to get the css3 gradient and separate background images working on all browsers, I'v been happy to use a single background image for all IE browsers, but so far the single background image wont work for IE.
CSS in main style.css
body{
font:14px 'questrialregular', Arial, Helvetica, sans-serif;
margin:0;
width:100%;
color:#797979;
background-image:
url(../img/bknd_img1.png),
url(../img/bknd_img2.png),
url(../img/bknd_img3.png),
url(../img/bknd_img4.png),
url(../img/bknd_img5), -webkit-gradient(radial, 50% 20%, 0, center center, 500, from(#c0deff), to(#509deb));
background-image:
url(../img/bknd_img1.png),
url(../img/bknd_img2.png),
url(../img/bknd_img3.png),
url(../img/bknd_img4.png),
url(../img/bknd_img5.png), -moz-radial-gradient(center center, circle contain, #c0deff, #509deb);
background-attachment:fixed;
background-position:top right, top left, center bottom, bottom right, left bottom;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-color:#509deb;
display:block;}
CSS for Internet Explorer: style-ie.css
font:14px 'questrialregular', Arial, Helvetica, sans-serif;
margin:0;
width:100%;
color:#797979;
background-image: url('img/bknd_full_img.jpg');
background-attachment:fixed;
background-position:center top;
background-repeat: no-repeat;
background-color:#fff;
display:block;
}
The problem is that you only give the gradient and multiple background to WebKit (using the old syntax) and Firefox (using the slightly newer syntax). There is no way that either IE or Opera can display the gradients or multiple backgrounds as you don't supply their prefixes or the none prefixed version.
IE10 implements gradients using the latest and final syntax, without prefixes. The latest Opera does too, and so does recent Firefox. IE10 doesn't need your conditional comment code, as it will work the same way as the other browsers.
The radial gradient should become something like:
background-image:
url(../img/bknd_img1.png),
url(../img/bknd_img2.png),
url(../img/bknd_img3.png),
url(../img/bknd_img4.png),
url(../img/bknd_img5.png),
radial-gradient(circle closest-side at center, #c0deff, #509deb);
More details on the syntax changes can be found on the IE blog [0] and the spec [1]
[0] http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx ,
[1] http://dev.w3.org/csswg/css3-images/#radial-gradients
This CSS produce different results in latest browsers:
input {
border:1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
The radius size in IE is smaller:
How do I fix this?
The versions of IE till 8.0 doesnot support Border-radius as far as i know. So I used transparent PNG images which I have created instead of Div's which needs border-radius and also it solved the browser compatibility issues.
EDIT For IE9: you may be using quirks mode that's why it is not compatible.
Change the IE specific value by 1px,
border-radius: 4px; (instead of 3px)
My background-image transition is working fine in Chrome, but does nothing in Firefox. I am new to CSS3 transitions. Did research and my syntax seems to be correct. From what I have read FF should support this. I am on FF 12.0. How come this CSS3 transition does not work in Firefox.
No javascript. No workarounds. Just an explanation of why this is failing would be wonderful.
http://jsfiddle.net/VCdGt/3/
a.call_to_action
{
text-decoration: none;
display: block;
color: #232744;
font-size: 20px;
font-weight: bold;
height: 47px;
width: 185px;
overflow: hidden;
margin: 10px auto 15px auto;
text-align: center;
border: none;
background: yellow;
background-image: url(http://www.pslover.com/images/thumb/2751.jpg);
-webkit-transition: background-image .5s linear;
-moz-transition: background-image .5s linear;
}
a.call_to_action:hover {
background: orange;
background-image: url(http://www.tutorialdash.com/avatars/3b1f70c20325d8676ce1f56cb9b43f17.gif);
color: #4F4246;
}
Found the answer in the MDN docs.
http://oli.jp/2010/css-animatable-properties/#background-image
background-image
This is still a little up in the air, with “only gradients” in the
current Working Draft, no background-image at all in the current
Editor’s Draft, and “Animatable: no” for background-image in CSS
Backgrounds and Borders Module Level 3 Editor’s Draft. However,
support has appeared in Chrome 19 Canary, and this is something that
designers want. Until widespread support arrives this can be faked via
image sprites and background-position or opacity.'
At this time I have found that nobody actually supports gradients (Chrome 17, FF 12, IE9). Only Chrome supports background-image (that's why it doesn't work in FF for me).
It is 2014 and background-image property is still not animatable:
http://dev.w3.org/csswg/css-backgrounds/#background-image
Works fine in webkit but not in Firefox. It seems that the only way to make some animation is to use jQuery fallback for Firefox.
I'm having a problem with justify alignment of list items (<li>) in an ordered list (<ol>) in Opera. There are different spacings in front of the lines.
Opera version:
Version: 11.62
Build: 1347
Platform: Win32
System: Windows 7
Screenshots:
(reproduced at jsfiddle.com)
Test code:
http://jsfiddle.net/ySmJZ/
ol {
list-style: decimal;
margin: 16px 0px;
padding: 0px 0px 0px 40px;
text-align: justify;
}
It's a known bug in Opera (CORE-41499). There isn't really a workaround, except to avoid using text-align:justify.
Yes, this is a known bug in Opera (even in 12.01 (x86)), but there IS a workaround, written by deathshadow here:
http://my.opera.com/community/forums/topic.dml?id=1424852&t=1347118644&page=1#comment12696422
Citing:
"One workaround (until/if they fix it) is an extra SPAN or DIV inside the LI wrapping all the content set to display:inline-block; vertical-align:top;"
I tried it, and it really works (at least in Opera 12.01 (x86)):
http://jsfiddle.net/Sk8erPeter/ySmJZ/10/
BEFORE
AFTER
What I'm trying to accomplish is creating a gradient using only css... What I'm doing works in all browsers except firefox 3.5...here's the code:
#gradient {
color: #fff;
height:50px;
padding:0;
width:940px;
margin:0 auto;
background: -moz-linear-gradient(top, #CFE782 0%, #9BCB2A 2%,#5DA331 97%, #659635 100%);/* For Mozilla/Gecko (Firefox etc) */
}
I left out the background for the other browsers... SO here's my question...
Does anyone know why this is not working in Firefox 3.5 and what would work???
As far as I know, the reason why its not working is because -moz-linear-gradient was only introduced in Firefox 3.6.