7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 33Length: 4.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.10 Setting Up 3D Buttons

Hello, and welcome back to practical web animation. In this lesson, we're gonna get started on our next effect which is going to be a 3D hover effect. And we're gonna be able to achieve this really sharp looking effect very very easily and it's kind of a fake 3D effect. We're not actually gonna be rotating 3D objects around. We're just going to be messing with some 2D objects to make them look like a 3D object. Now we're not going to need JavaScript for this so let's go ahead, and get that out of the way and the starting URL for this particular project will be found in your course notes. So why don't you open up that starting pen, go ahead and click on fork to create a new copy of it so in this new copy you can see that we have a navigation item. It has a class of main nav on it. Inside that we have an unordered list with a class of nav list, and then inside that we have some list items with some anchor tags and spans in them. Now you'll see something similar to what we've seen before with these data title attributes. These data title attributes are what are allowing us to put these second copies of the buttons below the original buttons themselves. Just like we've done before in a past video. If we look at our CSS we can see we're doing that using this after pseudo class we're setting our content equal to the data title attribute. So all of these copies of the buttons are created using that after pseudo element. Another thing I want to point out, is that we're not initially going to have a background color on these buttons. I just put it there so that we can see where those buttons are located, we're going to get rid of that pretty quickly. And another thing you may have noticed that might seem weird initially is that we have these spans inside our anchor tags. And we'll explain as we move along why we're using these spans. And, in fact, let's jump right in to explaining that. So first of all let's take a quick look at our base CSS. So we have our body with some basic resets here. We have our main nav, which points to the entire nav, which has this green background on it And then we have our nav list. Which the list items are set to inline block, and the text align is set to center that's how we have our nav centered on the stage or in the browser window. Our list all set to none padding left to set to zero margin zero auto we don't really need this margin zero auto not sure while if that there. So we'll just get rid of that because our text align center there is already taken care of it. However as you can see we do need some margin top set to zero. So let's go ahead and do that and that should nudge that back up. And then, will jump down to our list items themselves again, they're given a Display of inline-block. They have a width and a height, a margin of ten pixels top and bottom, five pixels left and right, text-align of center, position of relative. The reason the position is set to relative is because the anchor tags inside them have a position set to absolute, so that we can stretch them out to the full width and height of the list item itself. And here's that temporary background color I told you about. We're gonna get rid of that pretty quickly. But our text color's set to white, our text transform uppercase text decoration none, and then we have the positioning. We have it set to the top left corner of our list item. Same width and height as our list item, and our line height is set to 40 pixels so that the text will be vertically centered inside that list item. So again, our anchor tags are set to the same size as the list item themselves and then we have our after pseudo class. Again, the after pseudo class is taking this data title attribute and setting it to the content so that's why we have blog down here below. Just like we have it in the original button. We have a darker background color on these for now. And the display is set to block. Width and height, the same as everything else. So these darker versions of the buttons down below, these darker copies, are the same width and height as the button themselves. So now I want to explain to you why we're using a span here. One thing I'm going to do in order to achieve this 3D effect is I'm going to basically squash the top version of these buttons that the bottom version the bottom copy is going to be invisible by default. But this top copy we're going to basically squash upwards. We're going to flatten it. And by flattening it, it's gonna make it look like it's turning away from us. It's gonna look like it's gonna become the top part of the 3D object that we're rotating around, and then the bottom copy of our button is going to do the opposite. It's gonna start off squashed vertically and it's going to stretch upward and take, and take the place of the original button. So this is somewhat similar to in effect we've already done where we have the text scroll up. And then, the copy of the text scroll up from underneath to take its place except this time Instead of just scrolling the text up and replacing it. We're actually rotating what's gonna look like a 3D. block by the time we get done with it. So let me show you the reason again that we have this spanned. So let's say that we wanted to take this link here with the word blog or contact us whichever button you're talking about. Let's say we want to go ahead and squash it. We're going to do that using the scale Y transform property. So we're going to come up here to Nav list LIA, we're going to point to these anchor tags inside our list items. And we're going to set our transition property here. I'm gonna set it to all, and let's say we want to take one second, so we'll say one S. So then I'm gonna create a new rule for nav list L I A colon hover. So when we hover over these list items I wanna squash that top button. So let's just squash that text there inside the the anchor tag. So we're going to use the transform property. And we're going to use the scale Y version of that property. You'll notice that the Y is capitalized. Everything else is lowercase and then inside parentheses we're going to scale that down to a value of zero so that it's completely flat. So when we do a scale Y, we're just vertically scaling it. In other words, were squashing it. So as we hover over one of these buttons we can see that it not only squashes the top part of the button it actually squashes the entire button, including this after content and that's not what we want. We want to be able to squash this while we stretch out that bottom button. So that's why we need this span here. Remember when we have this after or even a before pseudo class like we have here, that content that's put inside this after pseudo class is placed inside This link. Remember it's not placed after the link it's placed after all the content inside the link. So this dark green block down here at the bottom is still inside this anchor tag. So when we come up here and transform that anchor tag, we're transforming everything inside it including Whatever is in this after pseudo class. So what we want to do is instead of scaling the entire anchor tag, we want to scale this span. We're gonna squash this span and as we do that we're going to expand or stretch out this after pseudo class to take its place. So I've already shown you how we're going to squash this. And now, let's pull all of that content out and put it inside a span. Well, we've heard about the content in the span but let's put our styles Inside the span. So, I'm going to start off doing it this way. So I'll just point to L I A space span. And one of the first things you'll notice is that it looks like our background color has disappeared, but if you look really closely we can still see a little bit of a background color there. If we bring this up to maybe .5, we can see that a lot better. Let's bring it down maybe a little bit more, .2. I just want to be able to see that that's still there and we do see it. Another thing you'll notice is that our after pseudo class has kind of collapsed up underneath everything. And that's fine, we just need to add some more styles it as well. So we already have our width and height set for it. Let's just set our line-height as well to that same 40 pixels so it's the same height as the button itself. And then, we're going to set our position to absolute just like our span and we'll set our top left to zero as well and it's already there. I just want to make sur.e This is just kind of a double check to make sure that it's in place and where it needs to be. Obviously, it doesn't look like it needs to look we'll get there soon. But let's go ahead and change our text color here to white, we'll set our text transform to uppercase. And the reason we didn't have to do all of this before is because remember that rule that had all of the text transform. And text color and things like that all of that was inside the a tag. We've moved that inside the span now and the after pseudo element is not inside that span so we have to specify these things here as well. So now that we've cleaned that up a little bit, we've moved some things around. In the next lesson, we'll jump in and actually animate this to make it look like we're rotating 3D blocks. So let's save our work and we'll move on with the next lesson. Thank you for watching.

Back to the top