ohbrother Posted May 27, 2014 Share Posted May 27, 2014 Hello there, total newbie here im afraid and in need of a bit of help, all i want to do is have some centralised text in h1 but with a gradual fade, the most important thing is that it must work in firefox. Hope my plea makes sense and thank you. Link to comment Share on other sites More sharing options...
davej Posted May 28, 2014 Share Posted May 28, 2014 That should be pretty trivial Javascript... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>title</title><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>var g={};//globalswindow.onload = fadeaway;function fadeaway(){var elem = document.getElementById('fadeout');if (typeof g.opacity === 'undefined'){g.opacity = 1;elem.style.opacity = '1';elem.style.filter = 'alpha(opacity=100)';setTimeout(fadeaway,1000);}else if (g.opacity>0){g.opacity -= 0.05;elem.style.opacity = g.opacity;elem.style.filter = 'alpha(opacity=' + g.opacity*100 + ')';setTimeout(fadeaway,100);}else{elem.style.opacity = 0;elem.style.filter = 'alpha(opacity=' + 0 + ')';}}</script></head><body><h1 id="fadeout">Old soldiers never die, they just fade away</h1></body></html> 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 28, 2014 Share Posted May 28, 2014 I think he means gradient for example from top, black to transparent or white/grey 1 Link to comment Share on other sites More sharing options...
ohbrother Posted May 28, 2014 Author Share Posted May 28, 2014 Ah yes, i did actually mean what dsonesuk said but i can see now how it reads otherwise, im really sorry for the confusion especially after the hard work you put it. Link to comment Share on other sites More sharing options...
davej Posted May 28, 2014 Share Posted May 28, 2014 Well, that looks trickier. CSS3 seems to focus on gradient backgrounds rather than gradient filled text, so your best options may be using the Canvas or SVG. Link to comment Share on other sites More sharing options...
ohbrother Posted May 28, 2014 Author Share Posted May 28, 2014 (edited) Ah right, as soon as i find out what that means i'll look into it haha ps i just started the book 'css web design for dummies' but the author clearly works for Microsoft as he endlessly promotoes IE. Anyway, the query arose from chapter one about filters which includes the code <html><head><style>div.box {width: 300px; height: 200px; padding: 30px; font: 46pt times new roman;}</style></head><body><div class="box" style=" filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100,FinishOpacity=0, Style=1, StartX=0, FinishX=0, StartY=0,FinishY=100)">Hey...you can modify opacity.</div></body></html> but it only works for IE and digging around on the internet i couldn't find anything to make it work on firefox, perhaps i was putting it in the wrong place. Thanks again for your help by the way. Edited May 28, 2014 by ohbrother Link to comment Share on other sites More sharing options...
dsonesuk Posted May 29, 2014 Share Posted May 29, 2014 http://sysmagazine.com/posts/159017/ <h1> <svg> <defs> <linearGradient id="textgradient" x1="0%" x2="0%" y1="0%" y2="100%"> <stop stop-color="#999" offset="0%"/> <stop stop-color="#111" offset="100%"/> </linearGradient> </defs> <text x="0" y="80" fill="url(#textgradient)" stroke="none">Gradient</text> </svg> </h1> you use css to adjust size etc, but not colour obviously, as svg will control that now. h1 {font-size: 4em; color: red;} http://css-tricks.com/using-svg/ Link to comment Share on other sites More sharing options...
ohbrother Posted May 29, 2014 Author Share Posted May 29, 2014 Thank you very much, i shall experiment. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now