Post by Nahara46 on Jan 7, 2015 6:45:07 GMT -8
[googlefont="Engagement"]
An Intro To Hovers
Hullo! I've been looking to share what I've been learning on this fantastic journey of figuring out how the heck people do that amazing coding I keep seeing everywhere, and I think I've gotten to the point that I can share that knowledge. If you'd like to see what kind of things you can do with hovers beyond that in this tutorial, feel free to look at some of my more hover-intensive templates and gut them out, I don't mind if people use it for learning or as a scaffold. You can find them listed below in the resources. I apologize this tutorial is a little long winded, I want to be as clear as I could be- the beginning itself is a quick into to using Style Tags itself, so more experience coders can easily bypass the first step.
Also a note: This tutorial uses a lot of aestricks when dealing with the newclass bit of codes, since newclass doesn't react well to noubbc. Just know that any * does NOT actually belong in the code! It's just there to make what I'm talking about visible to you.
First let's start out learning about what you need to do a hover. There is a hover plugin, but that's not what this tutorial uses- rather the Style Tag plugin by iPokemon. (If you understand how Style tags works, feel free to skip to the next step in this tutorial) This plugin uses classes that you can assign to different divs, and then instead of putting all your CSS around all of your coding, you connect them to CSS you put at the end of your code. For example, let's look at this box and it's subsequent code:
Looks simple enough, right? Well, you can't do any sort of hover effect with this, as all the CSS is inside the individual div tags and you can't tell it to do anything else there. So what we do, is transfer all that information to classes. A class tag goes directly after the opening tag for the div and looks like this: [*attr="class","name"], with of course the red name being where you put a name for that class. Each class in your code needs to have a different name- though, if you have two divs that have all the same CSS qualitites, you can assign them both to that name. It's best to try and stay original, like putting YourNameTemplateName#, so that your classes don't mess with any other template in your template, or mix with site codes.
With that name in mind, you would then go to the bottom of the document and put in the following code: [*newclass=.name][/newclass*]
Great! You have everything set up, now you just need to transfer all the CSS elements themselves. The elements in this case are everything between the quotation marks in the div style. Or, width:100px; height: 100px; background:blue. What you can do is copy all of those attributes, and then paste them between the newclass tags. (As in, after the opening tag, but before the closing tag). Then go back change [div style="width:100px height:100px; background:blue;"] to simply say [div]
For example, this:
Shall become
And that's it for how to change the inline coding to classes! Note, you CAN have attributes in both the inline and class, though I'd recommend staying away from this except for the case of background-images in a code that is supposed to be repeated and allow for multiple, different image (i.e. multi-char plotters or trackers).
Last note: Any coding that is done in a class instead of in-line, will NOT show up in Preview, and honestly it's best to not even go into preview while coding like this, as it has a habit of messing things up. Just save your work to see what it looks like!
Now that we have our classes set up, let's figure out how to get things to respond to doing a hover. The first thing you need to do, is go back to the bottom of your document and add another newclass- this time using the code [*newclass=.name:hover][/newclass*]. See how we have added a :hover indicator to the end of the class name? This basically tells the code 'hey! when you're hovering, make sure you add this line of CSS to the display!', and when you aren't hovering, the line of CSS becomes invalid.
Within these newclass tags, is where you put your changed css. You don't need to copy and paste all of the css you have in your non-hovered class, only the element that is changing. For example, if you want to make the box taller from the original 100px, you would put only [*newclass=.name:hover]height:150px;[/newclass*]. To make it wider, [*newclass=.name:hover]width:150px;[/newclass*]. And to change the color to maybe red: [*newclass=.name:hover]background:red;[/newclass*].
I know that can be a little confusing, so here's each of those examples and the CSS related to them.
[newclass=.tutorialheight1]width:100px; height:100px; background:blue;[/newclass][newclass=.tutorialheight1:hover]height: 150px;[/newclass]
[newclass=.tutorialwidth1]width:100px; height:100px; background:blue;[/newclass][newclass=.tutorialwidth1:hover]width: 150px;[/newclass]
[newclass=.tutorialcolor1]width:100px; height:100px; background:blue;[/newclass][newclass=.tutorialcolor1:hover]background:red;[/newclass]
And that's it for the hovers themselves. You can have any property change on a hover: colors, background color, height, width, box shadow, text shadow, border, border radius, margin, padding, display, opacity, font family, font size, character spacing, line spacing- really any property should work.
Of course, you'll notice that those hovers aren't particularly appealing. They're choppy at best and what they need added to them, is a transition. Transitions are pieces of CSS added to the class of both x and x:hover, and using the selectors that you put it in to smooth out the change from x and to x:hover. A good, basic transition code is -webkit-transition:all 1s ease; which is a code optimized for chrome and safari 3.2. It's a good idea to figure out all your transitions with one prefix (in this case the -webkit-) and test in it's designated browser and then add support for cross-browser later on. The prefixes that belong to specific browsers are:
-webkit-transition: chrome and safari 3.2
-moz-transition: Firefox 4-16
-ms-transition: IE 10 (This one generally isn't used, since transition: works just fine for IE 10)
-o-transition: Opera 10.5-12.1
transition: IE 10, Chrome 26+, Firefox 16+, Op 12.1+
For the sake of uniformity, let's get a box that we want to change at all. Maybe this box that is getting bigger, more opaque and it's overflow becomes auto instead of hidden.
[newclass=.itsabox]background-color:blue;color:red;height:100px;width:100px;opacity:.3;overflow:hidden;[/newclass]
[newclass=.itsabox:hover]height:150px;opacity:.9;overflow:auto;[/newclass]
The syntax of the transition code is as follows:
First to begin with is Property. This is essentially saying which property is changing and will have the rest of the functions in the code attributed to it. Genuinely saying 'all' will be sufficient, however this is useful if you have a both that's maybe getting bigger and changing opacity- and you want both to happen at different speeds, with the four values repeated with a comma separating them. Maybe you want to have it get bigger before it comes into view, in which case the code would look like
Next is the Duration, which is simply put as how long it takes from start to finish for the transition from one value to the next to occur, written at #s, with the # being replaced with any number value, decimals being usable. .5-2 will generally work just fine for your purposes, with 1s being most common. In this case, since we want it to become opaque after getting bigger, the code would be
Timing-function is a little less intuitive. This could be better described as the type of transition, and refers to how the attribute makes the transition. There are four main types- ease, linear, step end,steps(4,end). Generally it is best to stick with ease or linear, both of which will result in a rather smooth transition, while step-end and steps(#,end) are both a lot like stop-motion animation in which instead of blending it together, it will show you a few select frames in the transition, resulting in one that can be rather choppy. Of course, there are many more timing functions than these, and there are resources below should you wish to see them. With these put in as standard ease, our code is now
Lastly is Delay, which isn't even entirely necessary in your code. Unless you need it, feel free to delete it's field entirely and forget about it. Delay essentially means 'how long should I wait after you started hovering before I start the transition', so you could have things only starting after something else already happened. In this case, let's say our box had a scrollbar in it and we don't want the scrollbar to get all those weird stretched qualities it seems to take on in the midst of a transition, we can add a delay to it like so,
Great, now that you have your code, all you need is to put it all together with the various prefixes so that it looks fine, let's see how it looks then:
And to add that to our example box could, would be to make it look like this, (remember, you need to add all of that to both the x class, AND the x:hover class)
[newclass=.itsabox2]background-color:blue;color:red;height:100px;width:100px;opacity:.3;overflow:hidden;-webkit-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s; -moz-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;-ms-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;-o-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;[/newclass][newclass=.itsabox2:hover]height:150px;opacity:.9;overflow:auto;-webkit-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s; -moz-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;-ms-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;-o-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;[/newclass]
Note: Should you decide you want the effects to be different going out than in or vice versa, than you can have different values between x and x:hover, just know that any transition data in x will effect it going back to x after hovering, and anything in x:hover refers to the transition going from x to x:hover.
And that, my friend, is your into to hovers. Feel free to fiddle with any of the codes in here or to ask questions, as I'm sure there are to be. Below you can find a list of resources tht I think may be helpful and a good idea to look into, as they all offer information that I didn't cover 100%.
Also a note: This tutorial uses a lot of aestricks when dealing with the newclass bit of codes, since newclass doesn't react well to noubbc. Just know that any * does NOT actually belong in the code! It's just there to make what I'm talking about visible to you.
i. Style Tags
First let's start out learning about what you need to do a hover. There is a hover plugin, but that's not what this tutorial uses- rather the Style Tag plugin by iPokemon. (If you understand how Style tags works, feel free to skip to the next step in this tutorial) This plugin uses classes that you can assign to different divs, and then instead of putting all your CSS around all of your coding, you connect them to CSS you put at the end of your code. For example, let's look at this box and it's subsequent code:
[div style="width:100px; height:100px; background:blue;"][/div]
Looks simple enough, right? Well, you can't do any sort of hover effect with this, as all the CSS is inside the individual div tags and you can't tell it to do anything else there. So what we do, is transfer all that information to classes. A class tag goes directly after the opening tag for the div and looks like this: [*attr="class","name"], with of course the red name being where you put a name for that class. Each class in your code needs to have a different name- though, if you have two divs that have all the same CSS qualitites, you can assign them both to that name. It's best to try and stay original, like putting YourNameTemplateName#, so that your classes don't mess with any other template in your template, or mix with site codes.
With that name in mind, you would then go to the bottom of the document and put in the following code: [*newclass=.name][/newclass*]
Great! You have everything set up, now you just need to transfer all the CSS elements themselves. The elements in this case are everything between the quotation marks in the div style. Or, width:100px; height: 100px; background:blue. What you can do is copy all of those attributes, and then paste them between the newclass tags. (As in, after the opening tag, but before the closing tag). Then go back change [div style="width:100px height:100px; background:blue;"] to simply say [div]
For example, this:
[div style="width:100px; height:100px; background:blue;"][/div]
Shall become
[div][attr="class","name"][/div]
[newclass=.name]width:100px; height:100px; background:blue;[/newclass]
And that's it for how to change the inline coding to classes! Note, you CAN have attributes in both the inline and class, though I'd recommend staying away from this except for the case of background-images in a code that is supposed to be repeated and allow for multiple, different image (i.e. multi-char plotters or trackers).
Last note: Any coding that is done in a class instead of in-line, will NOT show up in Preview, and honestly it's best to not even go into preview while coding like this, as it has a habit of messing things up. Just save your work to see what it looks like!
ii. Hovers
Now that we have our classes set up, let's figure out how to get things to respond to doing a hover. The first thing you need to do, is go back to the bottom of your document and add another newclass- this time using the code [*newclass=.name:hover][/newclass*]. See how we have added a :hover indicator to the end of the class name? This basically tells the code 'hey! when you're hovering, make sure you add this line of CSS to the display!', and when you aren't hovering, the line of CSS becomes invalid.
Within these newclass tags, is where you put your changed css. You don't need to copy and paste all of the css you have in your non-hovered class, only the element that is changing. For example, if you want to make the box taller from the original 100px, you would put only [*newclass=.name:hover]height:150px;[/newclass*]. To make it wider, [*newclass=.name:hover]width:150px;[/newclass*]. And to change the color to maybe red: [*newclass=.name:hover]background:red;[/newclass*].
I know that can be a little confusing, so here's each of those examples and the CSS related to them.
[attr="class","tutorialheight1"]
[newclass=.tutorialheight1]width:100px; height:100px; background:blue;[/newclass][newclass=.tutorialheight1:hover]height: 150px;[/newclass]
[div][attr="class","tutorialheight1"][/div]
[newclass=.tutorialheight1]width:100px; height:100px; background:blue;[/newclass]
[newclass=.tutorialheight1:hover]height: 150px;[/newclass]
[attr="class","tutorialwidth1"]
[newclass=.tutorialwidth1]width:100px; height:100px; background:blue;[/newclass][newclass=.tutorialwidth1:hover]width: 150px;[/newclass]
[div][attr="class","tutorialwidth1"][/div]
[newclass=.tutorialwidth1]width:100px; height:100px; background:blue;[/newclass]
[newclass=.tutorialwidth1:hover]width: 150px;[/newclass]
[attr="class","tutorialcolor1"]
[newclass=.tutorialcolor1]width:100px; height:100px; background:blue;[/newclass][newclass=.tutorialcolor1:hover]background:red;[/newclass]
[div][attr="class","tutorialcolor1"][/div]
[newclass=.tutorialcolor1]width:100px; height:100px; background:blue;[/newclass]
[newclass=.tutorialcolor1:hover]background:red;[/newclass]
And that's it for the hovers themselves. You can have any property change on a hover: colors, background color, height, width, box shadow, text shadow, border, border radius, margin, padding, display, opacity, font family, font size, character spacing, line spacing- really any property should work.
iii. Transitions
Of course, you'll notice that those hovers aren't particularly appealing. They're choppy at best and what they need added to them, is a transition. Transitions are pieces of CSS added to the class of both x and x:hover, and using the selectors that you put it in to smooth out the change from x and to x:hover. A good, basic transition code is -webkit-transition:all 1s ease; which is a code optimized for chrome and safari 3.2. It's a good idea to figure out all your transitions with one prefix (in this case the -webkit-) and test in it's designated browser and then add support for cross-browser later on. The prefixes that belong to specific browsers are:
-webkit-transition: chrome and safari 3.2
-moz-transition: Firefox 4-16
-ms-transition: IE 10 (This one generally isn't used, since transition: works just fine for IE 10)
-o-transition: Opera 10.5-12.1
transition: IE 10, Chrome 26+, Firefox 16+, Op 12.1+
For the sake of uniformity, let's get a box that we want to change at all. Maybe this box that is getting bigger, more opaque and it's overflow becomes auto instead of hidden.
[attr="class","itsabox"]Ah, how shall I do it? Oh, I know. I'll turn him into a flea, a harmless, little flea, and then I'll put that flea in a box, and then I'll put that box inside of another box, and then I'll mail that box to myself, and when it arrives... [laughs] I'll smash it with a hammer! It's brilliant, brilliant, brilliant, I tell you! Genius, I say!
[newclass=.itsabox]background-color:blue;color:red;height:100px;width:100px;opacity:.3;overflow:hidden;[/newclass]
[newclass=.itsabox:hover]height:150px;opacity:.9;overflow:auto;[/newclass]
[div][attr="class","itsabox"]Ah, how shall I do it? Oh, I know. I'll turn him into a flea, a harmless, little flea, and then I'll put that flea in a box, and then I'll put that box inside of another box, and then I'll mail that box to myself, and when it arrives... [laughs] I'll smash it with a hammer! It's brilliant, brilliant, brilliant, I tell you! Genius, I say! [/div]
[newclass=.itsabox]background-color:blue;color:red;height:100px;width:100px;opacity:.3;overflow:hidden;[/newclass]
[newclass=.itsabox:hover]height:150px;opacity:.9;overflow:auto;[/newclass]
The syntax of the transition code is as follows:
prefix-transition: <property> <duration> <timing-function> <delay>
First to begin with is Property. This is essentially saying which property is changing and will have the rest of the functions in the code attributed to it. Genuinely saying 'all' will be sufficient, however this is useful if you have a both that's maybe getting bigger and changing opacity- and you want both to happen at different speeds, with the four values repeated with a comma separating them. Maybe you want to have it get bigger before it comes into view, in which case the code would look like
prefix-transition: height <duration> <timing-function> <delay>, opacity <duration> <timing-function> <delay>
Next is the Duration, which is simply put as how long it takes from start to finish for the transition from one value to the next to occur, written at #s, with the # being replaced with any number value, decimals being usable. .5-2 will generally work just fine for your purposes, with 1s being most common. In this case, since we want it to become opaque after getting bigger, the code would be
prefix-transition: height .8s <timing-function> <delay>, opacity 1.5s <timing-function> <delay>
Timing-function is a little less intuitive. This could be better described as the type of transition, and refers to how the attribute makes the transition. There are four main types- ease, linear, step end,steps(4,end). Generally it is best to stick with ease or linear, both of which will result in a rather smooth transition, while step-end and steps(#,end) are both a lot like stop-motion animation in which instead of blending it together, it will show you a few select frames in the transition, resulting in one that can be rather choppy. Of course, there are many more timing functions than these, and there are resources below should you wish to see them. With these put in as standard ease, our code is now
prefix-transition: height .8s ease <delay>, opacity 1.5s ease <delay>
Lastly is Delay, which isn't even entirely necessary in your code. Unless you need it, feel free to delete it's field entirely and forget about it. Delay essentially means 'how long should I wait after you started hovering before I start the transition', so you could have things only starting after something else already happened. In this case, let's say our box had a scrollbar in it and we don't want the scrollbar to get all those weird stretched qualities it seems to take on in the midst of a transition, we can add a delay to it like so,
prefix-transition: height .8s ease, opacity 1.5s ease, overflow 1s ease .8s
Great, now that you have your code, all you need is to put it all together with the various prefixes so that it looks fine, let's see how it looks then:
-webkit-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;
-moz-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;
-ms-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;
-o-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;
transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;
And to add that to our example box could, would be to make it look like this, (remember, you need to add all of that to both the x class, AND the x:hover class)
[attr="class","itsabox2"]Ah, how shall I do it? Oh, I know. I'll turn him into a flea, a harmless, little flea, and then I'll put that flea in a box, and then I'll put that box inside of another box, and then I'll mail that box to myself, and when it arrives... [laughs] I'll smash it with a hammer! It's brilliant, brilliant, brilliant, I tell you! Genius, I say!
[newclass=.itsabox2]background-color:blue;color:red;height:100px;width:100px;opacity:.3;overflow:hidden;-webkit-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s; -moz-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;-ms-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;-o-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;[/newclass][newclass=.itsabox2:hover]height:150px;opacity:.9;overflow:auto;-webkit-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s; -moz-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;-ms-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;-o-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;[/newclass]
[div][attr="class","itsabox2"]Ah, how shall I do it? Oh, I know. I'll turn him into a flea, a harmless, little flea, and then I'll put that flea in a box, and then I'll put that box inside of another box, and then I'll mail that box to myself, and when it arrives... [laughs] I'll smash it with a hammer! It's brilliant, brilliant, brilliant, I tell you! Genius, I say! [/div]
[newclass=.itsabox2]background-color:blue;color:red;height:100px;width:100px;opacity:.3;overflow:hidden;-webkit-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s; -moz-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;-ms-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;-o-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;[/newclass]
[newclass=.itsabox2:hover]height:150px;opacity:.9;overflow:auto;-webkit-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s; -moz-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;-ms-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;-o-transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;transition:height .8s ease, opacity 1.5s ease, overflow 1s ease .8s;[/newclass]
Note: Should you decide you want the effects to be different going out than in or vice versa, than you can have different values between x and x:hover, just know that any transition data in x will effect it going back to x after hovering, and anything in x:hover refers to the transition going from x to x:hover.
And that, my friend, is your into to hovers. Feel free to fiddle with any of the codes in here or to ask questions, as I'm sure there are to be. Below you can find a list of resources tht I think may be helpful and a good idea to look into, as they all offer information that I didn't cover 100%.
iv. Resources
- Shouldiprefix: A good guide on prefixes between browsers
- Using CSS Transitions guide by Mozilla Developer
- Offshoot of above guide that specializes with timing function
- A visual representation of a lot of timing functions
- w3school on CSS Transitions
- CSS Tricks on Transitions
- Revealing Harmony - A Transition heavy template of mine you can dissect
- Battle Cry - A Transition heavy template of mine you can dissect
- Rosetta Stone - A Transition heavy template of mine you can dissect