phpnoob Posted April 10, 2010 Share Posted April 10, 2010 I made this CSS3 gradient background last night.But now i need help i try and try but i cant make a good webkit version. help meps. if you think, this moz version need a little fix, that fix it.Thxforum.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /><title>Untitled Document</title><link href="csspage.css" rel="stylesheet" type="text/css"/></head><body><div class="mainbox"><div class="forumheader">111</div><table width="730" align="center"> <tr align="center"><td height="27" width="40" class="gradiS1"></td><td width="380" class="gradiU">Forum name</td><td class="gradiU">Last post</td> <td width="53" class="gradiU">Topic</td> <td width="60" class="gradiU">Post</td> </tr> <tr align="center" valign="middle"> <td class="gradiS2"> </td> <td bgcolor="#a6ccdf">2</td><td bgcolor="#a6ccdf">3</td><td bgcolor="#a6ccdf">1234</td><td bgcolor="#a6ccdf">12345</td></tr> <tr align="center" valign="middle"> <td class="gradiS2"> </td> <td bgcolor="#a6ccdf">2</td><td bgcolor="#a6ccdf">3</td><td bgcolor="#a6ccdf">1234</td><td bgcolor="#a6ccdf">12345</td></tr> <tr align="center" valign="middle"> <td class="gradiS2"> </td> <td bgcolor="#a6ccdf">2</td><td bgcolor="#a6ccdf">3</td><td bgcolor="#a6ccdf">1234</td><td bgcolor="#a6ccdf">12345</td></tr> <tr align="center"> <td height="15" class="gradiS3"> </td><td class="gradiB"> </td><td class="gradiB"> </td> <td class="gradiB"> </td> <td class="gradiB"> </td> </tr></table></div></body></html> csspage.css .mainbox{width: 770px;margin-right: auto;margin-left: auto;}.forumheader{background-color: #0000FF;height: 20px;width: 726px;margin-right: auto;margin-left: auto;}.gradiB{background:#0099FF;background:-moz-linear-gradient(0% 60% 90deg,#0099FF, #A6CCDF);}.gradiU{background:#0099FF;background:-moz-linear-gradient(0% 45% 270deg,#0099FF, #A6CCDF);}.gradiS1{background:#0099FF;background:-moz-linear-gradient(100% 50% 315deg,#0099FF, #A6CCDF);}.gradiS2{background:#0099FF;background: -moz-linear-gradient(75% 0% 0deg,#0099FF, #A6CCDF);}.gradiS3{background:#0099FF;background:-moz-linear-gradient(100% 50% 60deg,#0099FF, #A6CCDF);} Link to comment Share on other sites More sharing options...
jeffman Posted April 10, 2010 Share Posted April 10, 2010 Have you tried the -webkit-gradient property?webkitsafari Link to comment Share on other sites More sharing options...
phpnoob Posted April 11, 2010 Author Share Posted April 11, 2010 Have you tried the -webkit-gradient property?webkitsafari Ups i accidentally Del that partYes i can make a gradient graphics, but not a similar one, look my moz version, and you know what a meaning. Link to comment Share on other sites More sharing options...
jeffman Posted April 11, 2010 Share Posted April 11, 2010 In Mozilla, you specify an angle by using an angle. In webkit, you identify start and finish coordinates, and these create an angle.These two seem to be exactly the same. .mz90 { background: #0099FF; background: -moz-linear-gradient(0% 60% 90deg, #0099FF, #A6CCDF);}.wk90 { background: #0099FF; background: -webkit-gradient(linear, 0% 60%, 0% 0%, from(#0099FF), to(#A6CCDF));} These two are very close. Changing the first set of coordinates might get you closer. I'm not sure: .mz315 { background:#0099FF; background:-moz-linear-gradient(100% 50% 315deg,#0099FF, #A6CCDF);}.wk315 { background: #0099FF; background: -webkit-gradient(linear, 50% 50%, 100% 100%, from(#0099FF), to(#A6CCDF));} Link to comment Share on other sites More sharing options...
phpnoob Posted April 11, 2010 Author Share Posted April 11, 2010 thx :)i cant believe it Link to comment Share on other sites More sharing options...
phpnoob Posted April 11, 2010 Author Share Posted April 11, 2010 Done thx .gradiB{background:#0099FF;background:-moz-linear-gradient(0% 60% 90deg,#0099FF, #A6CCDF); background: -webkit-gradient(linear, 0% 20%, 0% 50%, from(#A6CCDF), to(#0099FF))}.gradiU{background:#0099FF;background:-moz-linear-gradient(0% 45% 270deg,#0099FF, #A6CCDF);background:-webkit-gradient(linear, 0% 90%, 0% 50%, from(#A6CCDF), to(#0099FF));}.gradiS1{background:#0099FF;background:-moz-linear-gradient(100% 50% 326deg,#0099FF, #A6CCDF);background: -webkit-gradient(linear, 95% 95%, 85% 85%, from(#A6CCDF), to(#0099FF));}.gradiS2{background:#0099FF;background: -moz-linear-gradient(75% 0% 0deg,#0099FF, #A6CCDF);background: -webkit-gradient(linear, 95% 0%, 75% 0%, from(#A6CCDF), to(#0099FF));}.gradiS3{background:#0099FF;background:-moz-linear-gradient(99% 54% 54deg,#0099FF, #A6CCDF);background:-webkit-gradient(linear, 90% 35%, 97% 10%, from(#0099FF), to(#A6CCDF));} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.