king of westeros
AKA
PLAYED BY:
royal
Pick it up, pick it all up. And start again. You've got a second chance, you could go home. Escape
|
tuts
Jan 2, 2015 21:03:20 GMT
Post by fancy nancy on Jan 2, 2015 21:03:20 GMT
HOW TO DO HOVERS
a guide by nitah/nancy OKAY, so let's start with deciding what kind of hover action you want.
do you want a translation?
[attr="class","nitah1"]sweg [newclass=".nitah1"]width: 100px; height: 100px; background: #dedede; color: #000; margin-left: 0px;-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;[/newclass] [newclass=".nitah1:hover"]width: 100px; height: 100px; background: #dedede; color: #000; margin-left: 100px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;[/newclass] do you want an opacity change?
[attr="class","nitah2"]sweg [newclass=".nitah2"]width: 100px; height: 100px; background: #dedede; color: #000; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;[/newclass] [newclass=".nitah2:hover"]width: 100px; height: 100px; background: #dedede; color: #000; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;[/newclass] do you want a rotation?
[attr="class","nitah3"]sweg [newclass=".nitah3"]width: 100px; height: 100px; background: #dedede; color: #000; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;[/newclass] [newclass=".nitah3:hover"]width: 100px; height: 100px; background: #dedede; color: #000; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;[/newclass] |
|
king of westeros
AKA
PLAYED BY:
royal
Pick it up, pick it all up. And start again. You've got a second chance, you could go home. Escape
|
tuts
Jan 2, 2015 21:09:57 GMT
Post by fancy nancy on Jan 2, 2015 21:09:57 GMT
SO U WANNA LEARN TRANSLATIONS HUH PUNK?
cool first things first, when you're doing a translation, you're most likely going to margins as in: margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; OR margin: 0px 0px 0px 0px; please note, translation hovers are the ONLY hovers that don't require -moz- or -webkit- codes, and therefore are the least code-heavy of the three types of hovers.and that's basically all the basis you need for learning translations. now to learn how to make them hover-able, you need to set a base position. for my example i'm just going to code a square and have it just sitting in this post like so. [attr="class","nitah4"]swwg [newclass=".nitah4"]background: #000; width: 100px; height: 100px; margin-left: 0px;[/newclass] [div][attr="class","nitah4"]swwg[/div]
[newclass=".nitah4"]background: #000; width: 100px; height: 100px; margin-left: 0px;[/newclass]it's best to code the margin into the static code even if the value of it is zero because sometimes if you don't, it can lead to wonky coding when you involve hovers later.okay so now we have the static image, so from here we're going to learn to make the square move to the right by coding in a :hover class and increasing the value of the left margin. so basically what you do is you add ":hover" to the end of your class name [newclass=".nitah5:hover"][/newclass]this basically says when any object with the class of "nitah5" is "hovered" over, change the attributes to the ones listed in the new class. and if you want it to move, you're going to have to change the margin-left from: margin-left: 0px;to margin-left: 50px;which basically means that when any object with the class "nitah5" is not hovered over, the margin is 0px, but when it is hovered over with a mouse the margin changes to 50px, which means it's moved from its original position. here's the final outcome all together! [attr="class","nitah5"]swwg [newclass=".nitah5"]background: #000; width: 100px; height: 100px; margin-left: 0px;[/newclass] [newclass=".nitah5:hover"]background: #000; width: 100px; height: 100px; margin-left: 50px;[/newclass] [div][attr="class","nitah5"]swwg[/div]
[newclass=".nitah5"]background: #000; width: 100px; height: 100px; margin-left: 0px;[/newclass]
[newclass=".nitah5:hover"]background: #000; width: 100px; height: 100px; margin-left: 50px;[/newclass]are you still with me? good. tbh, that's all you need to know about doing translations! you're basically done now. i'm a shitty tutorial writer, so if you still have questions, ask me. i actually kinda like answering questions tbh. what you want it so smoothly translation? lmfao, okay imma have to direct you to the transition guide then, sry bud. |
|
king of westeros
AKA
PLAYED BY:
royal
Pick it up, pick it all up. And start again. You've got a second chance, you could go home. Escape
|
tuts
Jan 2, 2015 21:32:53 GMT
Post by fancy nancy on Jan 2, 2015 21:32:53 GMT
opacity? okay whatever u say friend opacity is a little harder in terms of coding when compared to translation, but only because it requires a bit more writing because the codes require bot "-moz-" and "-webkit-" declarations for other browsers.so basically, the base coding we're working with is: opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; which looks simple, but it can get rather tiring to type/c&p because it's six times before opacity changing code. three for the static and three for the hover, so yeah, it's pretty annoying but it's also a short code. so ya. continuing, let's start with a base model. code your static shape with whatever value you want, ranging from 0 (invisible) to 1 (completely visible), meaning you have to use decimals of either one or two digits. 0 = 0% 0.1 = 10% 0.2 = 20% 0.3 = 30% 0.4 = 40% ect, ect... you get the jisk right? you can use 0.15 or 0.56, but it's better to use rounded numbers because no one is really going to notice the difference between 0.58 and 0.60, and if they do then... well... they probably need to get off the internet and do something with their life. anyway, going back to the shape, i'm starting off with a fully visible square, which means i start with the opacity value of 1. [attr="class","nitah6"]sweg [newclass=".nitah6"]background: #000; width: 100px; height: 100px; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1;[/newclass] [div][attr="class","nitah6"]sweg[/div]
[newclass=".nitah6"]background: #000; width: 100px; height: 100px; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1;[/newclass]notice i didn't declare "px" or "pt" for the opacity values. opacity - as far as i know - isn't declared with pixels or points because it's not measured in pixel or points, don't ask me why i haven't dug that far into it, it's just the way it is to me so yeah. don't code with opacities with "px" or "pt" bc that's just extra typing ur fingers dont have to do.now comes the next part, the hover part. so for me, i'm going to change my opacity values from 1 to 0 so that when the object is hovered over, it's invisible. so my coding is going to go from: opacity: 1;to opacity: 0;and in the final outcome it's going to look like this: [attr="class","nitah7"]sweg [newclass=".nitah7"]background: #000; width: 100px; height: 100px; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1;[/newclass] [newclass=".nitah7:hover"]background: #000; width: 100px; height: 100px; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0;[/newclass] [div][attr="class","nitah7"]sweg[/div]
[newclass=".nitah7"]background: #000; width: 100px; height: 100px; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1;[/newclass]
[newclass=".nitah7:hover"]background: #000; width: 100px; height: 100px; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0;[/newclass]
are you still with me? good. tbh, that's all you need to know about doing opacity changes! you're basically done now. i'm a shitty tutorial writer, so if you still have questions, ask me. i actually kinda like answering questions tbh. what you want it so smoothly translation? lmfao, okay imma have to direct you to the transition guide then, sry bud. |
|
king of westeros
AKA
PLAYED BY:
royal
Pick it up, pick it all up. And start again. You've got a second chance, you could go home. Escape
|
tuts
Jan 2, 2015 21:48:07 GMT
Post by fancy nancy on Jan 2, 2015 21:48:07 GMT
rotations? dont u do that with ur hips or smth? AH HERE U ARE FRIEND, AT THE HARDEST AND MOST ANNOYING OF ALL THE HOVERS. tbh i don't even bother trying to remember rotations and i rarely use them so i refer to this for all my rotating needs. the basic coding you're going to need to know for this is: -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); if u go into the generator you'll notice the -o- and -ms- attributes as well and if ur wondering why i didn't include them.... its bc i forgot abt them tbh... so ya lmaoso, lets start with a basic shape, and that means the (#deg) should be (0deg) unless your starting position is at a different degrees. but i'm starting with 0 because it's the easiest so leggo. [attr="class","nitah8"]ssweg [newclass=".nitah8"]background: #000; width: 100px; height: 100px; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);[/newclass] [div][attr="class","nitah8"]ssweg[/div]
[newclass=".nitah8"]background: #000; width: 100px; height: 100px; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);[/newclass]as you can see, my square is in a very standard position, which is good because from here we can now rotate it to any degree we want. also note if u dont declare a height and a width ur code could come out wonky so... pls always declare heights and widths ESPECIALLY if ur working with rotationsanyway, now that's we've got our base square, we're going to decide how much we're going to rotate it. you can rotate things into negative numbers, but they have the same affect as if you decided to use whole numbers. -90 = 270 -180 = 180 -270 = 90 so feel free to keep that in mind when rotating your things. now that we've been through that, we can move onto rotating things hover-wise. i'm going to change my degs from (0deg)to (90deg)so leggo. [attr="class","nitah9"]ssweg [newclass=".nitah9"]background: #000; width: 100px; height: 100px; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);[/newclass] [newclass=".nitah9:hover"]background: #000; width: 100px; height: 100px; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);[/newclass] [div][attr="class","nitah9"]ssweg[/div]
[newclass=".nitah9"]background: #000; width: 100px; height: 100px; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);[/newclass]
[newclass=".nitah9:hover"]background: #000; width: 100px; height: 100px; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);[/newclass]are you still with me? good. tbh, that's all you need to know about doing rotations! you're basically done now. i'm a shitty tutorial writer, so if you still have questions, ask me. i actually kinda like answering questions tbh. what you want it so smoothly translation? lmfao, okay imma have to direct you to the transition guide then, sry bud. |
|
king of westeros
AKA
PLAYED BY:
royal
Pick it up, pick it all up. And start again. You've got a second chance, you could go home. Escape
|
tuts
Jan 2, 2015 21:50:57 GMT
Post by fancy nancy on Jan 2, 2015 21:50:57 GMT
CSS... TRANSITION... smoothly pls i'll be honest, transitions aren't all that important and i can't really tell u the difference between any of them so i'll send u to this site once again and hope it answers all ur questions on transitions. if u still have questions feel free to ask so ya idk bye |
|
