HOVER CRAFTS, tutorial
POST CREATED Nov 24, 2014 4:36:48 GMT -8
redox-kun, SUCRÉ, and 27 more like this
Post by eden on Nov 24, 2014 4:36:48 GMT -8
hover crafts.
That being, crafting templates with hovers. I like to think I'm clever. Um, there are likely a lot of people more familiar with hovers than I am, but someone asked a while ago so I thought I'd make a tutorial on the basics of it. They're actually really simple once you understand how they work, but this tutorial needs you to have a bare minimum understanding of code, still. I hope this is helpful, and that I remain coherent throughout, haha. Let's begin!
First off, :hover is a CSS selector. It reveals (or hides) something once you — ding ding! — hover over it. There are lots of hover styles and effects you can play with, but today I'll be doing the most common one: fading. Firstly, though, how do you put the actual hover into your code? Well, that's easy enough to start with. Let's say I have a box.
What a lovely box. It doesn't do anything, of course. But I want to make it so that I can hover over it to change its colour. (Obviously, you can use hovers to do much more — like actually reveal information — but for the sake of a simple tutorial, I'll just be using this example.) The way to do it is to add a class in which I can specify a hover. Meaning something like [newc1ass=.edietut] for the style of the box, and [newc1ass=.edietut:hover] for the hover version. And I'm going to add the div style of my previous box into my edietut class and, under the hover one, I'll use a different hex code for the background colour.
[newc1ass=.edietut]width:120px;height:120px;background-color:#fefefe;[/newc1ass]
[newc1ass=.edietut:hover]background-color:#65d6ba;[/newc1ass]
I usually place this at the utmost top or bottom of my template, for sake of neatness. To actually build the working part of the code, I'll use a clear div and, between it and its closing tag, I'll put in the attribute and class. It should look like something along the lines of [ div ][attr="c1ass","edietut"][ /div ], without the spaces in the div tags, of course. What are we left with?
That's not a very pretty hover, though. It's really abrupt — so we're going to learn how to change that. Most importantly, the things you need to style your hover are transitions. They are as follows (you may need to add -webkit-, -ms-, -moz- or -o- for them to work in different browsers, like IE or Firefox):
transition-property: what property should be transitioned, e.g. opacity, width, etc.
transition-duration: how long your transition takes
transition-timing-function: the speed curve, like linear, ease-in, cubic bezier, whatever.
transition: all three, generally written in the order of property duration timing-function
What I usually prefer for more complex hovers is to use the last one, but for simpler ones where you don't use all three styles, you needn't. There's also transition-delay, for when you want a delay before the hover takes effect. In any case, back on topic: the fade. What you want, basically, is for the box to fade smoothly from one colour to the other. This is done by using transition-duration: 1s;, which essentially just prolongs the transition to occur over a whole second. You can use other amounts of time as well (I like 0.8s, in particular). I'm going to put this in my main newclass (not the one with the :hover selector). This is our result.
Honestly, that's about all there is to the basics of hovers. You can do a lot, a lot, and a lot more with them, of course, but I'll leave you to experiment as you wish! Also, here are some exceedingly simple hover codes for you to take a look at if you want to, just to see the kind of things you can do:
If you have any questions, don't hesitate to ask! And if you're more familiar with hovers than I am, you're more than free to contribute to the information (or point out if I wrote down any mistakes...) That’s really about all I have to share; hopefully it was useful in some way or another <3
First off, :hover is a CSS selector. It reveals (or hides) something once you — ding ding! — hover over it. There are lots of hover styles and effects you can play with, but today I'll be doing the most common one: fading. Firstly, though, how do you put the actual hover into your code? Well, that's easy enough to start with. Let's say I have a box.
This is my box.
What a lovely box. It doesn't do anything, of course. But I want to make it so that I can hover over it to change its colour. (Obviously, you can use hovers to do much more — like actually reveal information — but for the sake of a simple tutorial, I'll just be using this example.) The way to do it is to add a class in which I can specify a hover. Meaning something like [newc1ass=.edietut] for the style of the box, and [newc1ass=.edietut:hover] for the hover version. And I'm going to add the div style of my previous box into my edietut class and, under the hover one, I'll use a different hex code for the background colour.
[newc1ass=.edietut]width:120px;height:120px;background-color:#fefefe;[/newc1ass]
[newc1ass=.edietut:hover]background-color:#65d6ba;[/newc1ass]
I usually place this at the utmost top or bottom of my template, for sake of neatness. To actually build the working part of the code, I'll use a clear div and, between it and its closing tag, I'll put in the attribute and class. It should look like something along the lines of [ div ][attr="c1ass","edietut"][ /div ], without the spaces in the div tags, of course. What are we left with?
[attr="class","edietut"]
Ooh, hovers.That's not a very pretty hover, though. It's really abrupt — so we're going to learn how to change that. Most importantly, the things you need to style your hover are transitions. They are as follows (you may need to add -webkit-, -ms-, -moz- or -o- for them to work in different browsers, like IE or Firefox):
transition-property: what property should be transitioned, e.g. opacity, width, etc.
transition-duration: how long your transition takes
transition-timing-function: the speed curve, like linear, ease-in, cubic bezier, whatever.
transition: all three, generally written in the order of property duration timing-function
What I usually prefer for more complex hovers is to use the last one, but for simpler ones where you don't use all three styles, you needn't. There's also transition-delay, for when you want a delay before the hover takes effect. In any case, back on topic: the fade. What you want, basically, is for the box to fade smoothly from one colour to the other. This is done by using transition-duration: 1s;, which essentially just prolongs the transition to occur over a whole second. You can use other amounts of time as well (I like 0.8s, in particular). I'm going to put this in my main newclass (not the one with the :hover selector). This is our result.
[attr="class","edietut2"]
Much smoother now, isn't it?Honestly, that's about all there is to the basics of hovers. You can do a lot, a lot, and a lot more with them, of course, but I'll leave you to experiment as you wish! Also, here are some exceedingly simple hover codes for you to take a look at if you want to, just to see the kind of things you can do:
[attr="class","edieex"] [attr="class","edieex1"] [newclass=".edieex"]position: relative; overflow: hidden; width:120px;height:120px;background:#efefef;[/newclass] [newclass=".edieex1"]position: absolute; bottom: -120px; width: 120px; height: 120px; background: #65d6ba; -moz-transition: 1s all; -webkit-transition: 1s all; -o-transition: 1s all; transition: 1s all;[/newclass][newclass=".edieex:hover .edieex1"]bottom: 0px;[/newclass] | [attr="class","edieex4"] [newclass=.edieex4]width:120px;height:120px;background-color:#efefef;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;-o-transition-duration: 1s;[/newclass] [newclass=.edieex4:hover]background-color:#65d6ba;border-radius: 40px;[/newclass] | [attr="class","edieex2"] [attr="class","edieex3"] [newclass=".edieex2"]width:120px;height:120px;background:#efefef;[/newclass] [newclass=".edieex3"]width: 120px; height: 120px; background: #65d6ba; -moz-transition: 1s all; -webkit-transition: 1s all; -o-transition: 1s all; transition: 1s all;-moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0);opacity: 0;[/newclass][newclass=".edieex2:hover .edieex3"]opacity: 1;-moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);[/newclass] |
Get creative! Hover to see different styles!
If you have any questions, don't hesitate to ask! And if you're more familiar with hovers than I am, you're more than free to contribute to the information (or point out if I wrote down any mistakes...) That’s really about all I have to share; hopefully it was useful in some way or another <3
[newclass=.edietut]width:120px;height:120px;background-color:#efefef;[/newclass]
[newclass=.edietut:hover]background-color:#65d6ba;[/newclass]
[newclass=.edietut2]width:120px;height:120px;background-color:#efefef;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;-o-transition-duration: 1s;[/newclass]
[newclass=.edietut2:hover]background-color:#65d6ba;[/newclass]
Five years ago, the Pokemon League formed Lux to create a new world order of peace and harmony. A rebellion formed, under the name of Nox, cries tyranny at Lux's new microcosmic control. Their civil war now tears the Pokemon world apart. The world hangs in the balance of predormitum. Which side will you choose?
is a high stakes RP set in a dystopian Russian society recovering from an apocalyptic war between the armies of Heaven and Hell. Greater Russia now stands free from the influence of God and the Devil, and all non-humans run the risk of execution. Outside the safe zones lies the contained wasteland of Moscow, where demons and mutated shadowbeasts continue to terrorize the remaining human survivors who have been penned in with them. As of late, increasing evangelic disturbances threaten the peace that has ruthlessly maintained by the secret police.
