Tweet
looking to utilize css3 transitions to get the mouseover and mouseoff easing to work. not sure if this is doable or not.
i uploaded the code here: http://dynodealz.com/test.html
i uploaded the code here: http://dynodealz.com/test.html
-
-
Transitions go on the :hover pseudoclass.Blog | Twitter
Useful links: W3C HTML Validator | W3C CSS Validator | HTML 5 Guide
CF: HTML & CSS Resources/Tutorials Thread | HTML & CSS Posting Rules and Guidelines
Remember: no link, no code, no help!Comment
-
i tried moving that transition to div:hover and it still didn't work.Comment
-
should i take it that this is not doable with just css?Comment
-
You can transition certain background properties, but not just "background" i think.Comment
-
really? that's a bummer. so there is no way to deal with this with css3 then?Comment
-
if i change the code to this it sort of works but it seems a bit hacky and the hover gradient doesn't really work...
Code:<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Untitled</title> <style type="text/css"> div.test { width: 200px; height: 200px; background: -moz-linear-gradient(top, rgba(0,141,210,0) 0%, rgba(0,98,167,0.25) 75%, rgba(0,84,153,0.25) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,141,210,0)), color-stop(75%,rgba(0,98,167,0.25)), color-stop(100%,rgba(0,84,153,0.25))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,141,210,0) 0%,rgba(0,98,167,0.25) 75%,rgba(0,84,153,0.25) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,141,210,0) 0%,rgba(0,98,167,0.25) 75%,rgba(0,84,153,0.25) 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, rgba(0,141,210,0) 0%,rgba(0,98,167,0.25) 75%,rgba(0,84,153,0.25) 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00008dd2', endColorstr='#40005499',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, rgba(0,141,210,0) 0%,rgba(0,98,167,0.25) 75%,rgba(0,84,153,0.25) 100%); /* W3C */ } div.sss { width: 200px; height: 200px; -webkit-transition: background-color 0.25s ease; -moz-transition: background-color 0.25s ease; -o-transition: background-color 0.25s ease; transition: background-color 0.25s ease; } div.sss:hover { background-color: rgb(201,222,150); /* Old browsers */ background-color: -moz-linear-gradient(top, rgba(201,222,150,1) 0%, rgba(186,192,0,1) 100%); /* FF3.6+ */ background-color: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,222,150,1)), color-stop(100%,rgba(186,192,0,1))); /* Chrome,Safari4+ */ background-color: -webkit-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(186,192,0,1) 100%); /* Chrome10+,Safari5.1+ */ background-color: -o-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(186,192,0,1) 100%); /* Opera11.10+ */ background-color: -ms-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(186,192,0,1) 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#bac000',GradientType=0 ); /* IE6-9 */ background-color: linear-gradient(top, rgba(201,222,150,1) 0%,rgba(186,192,0,1) 100%); /* W3C */ } </style> </head> <body> <div class="test"><div class="sss"><a href="#">Test</a></div></div> </body> </html>Comment
Comment