2014-08-30, 06:02 PM
Pages: 1 2
2014-08-30, 06:25 PM
Add transition in css!
Eg:
transition: 0.5s;
Eg:
transition: 0.5s;
2014-08-30, 06:42 PM
Transitions in both ways, example:
Quote:.test a:link, .test a:visited {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.test a:hover, .test a:active {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
2014-08-30, 06:59 PM
Thanks Guys! i was wondering with transitions is there anything else they can be used for on forum?
2014-08-30, 07:33 PM
sorry for going off topic but this means that 1.8 has been released?.
2014-08-30, 07:59 PM
No, this means, there has been created a support section for the mybb 1.8. Mybb 1.8 seems to be released tomorrow.
2014-08-30, 08:04 PM
(2014-08-30, 06:59 PM)Billie Joe Armstrong Wrote: [ -> ]Thanks Guys! i was wondering with transitions is there anything else they can be used for on forum?
You can create buttons with opacity 0.5 and then, when you hover, put opacity 1 and add this effect, try it =).
2014-08-30, 08:22 PM
(2014-08-30, 08:04 PM)eNvy Wrote: [ -> ](2014-08-30, 06:59 PM)Billie Joe Armstrong Wrote: [ -> ]Thanks Guys! i was wondering with transitions is there anything else they can be used for on forum?
You can create buttons with opacity 0.5 and then, when you hover, put opacity 1 and add this effect, try it =).
If i wanted the fade in and out effect on buttons would i just add the same code?
And thank you!
2014-08-30, 09:02 PM
(2014-08-30, 06:42 PM)eNvy Wrote: [ -> ]Quote:.test a:link, .test a:visited {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.test a:hover, .test a:active {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
and to add a nice movement to :hover
just add
margin-left: 5px;
(2014-08-30, 08:22 PM)Billie Joe Armstrong Wrote: [ -> ]If i wanted the fade in and out effect on buttons would i just add the same code?
yes , and you can play with it
as @eNvy was sain` you can give to :link , :visited {opacity: 0.5;} and to :hover , :active { opacity: 1;} , so when you hover the button it will lighten up
and you can use opacity with the transitions and you`l have a nice effect ...
Happy coding!
eko
2014-08-31, 12:14 AM
(2014-08-30, 06:42 PM)eNvy Wrote: [ -> ]Quote:-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
For what its worth, -webkit is the only prefix you need now, -moz, -ms and -o were dropped a long time ago, only a few older versions of webkit still require the prefix (Past versions of Safari and old stock Android browsers).
http://caniuse.com/#feat=css-transitions
Pages: 1 2