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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Personal Business Card

Hi, welcome back to 10CSS3 branding and presentation projects. In this project, you're gonna make a little business card. It's gonna have two sides. You'll be able to flip it over and look at the back and flip it back to the front again. We'll have a name and profession on the front and on the back you'll be able to put links off to all your various web presences online. And you'll notice we're also using the background here that we created in the last project. Our little circles here, we've just switched them over from blue to grey. You can get started with this project by forking the base pen, and you'll find the link for that in the related links below this video. All right now the first thing we're gonna do is add in a little bit of basic HTML. Now the way we're going to handle the flipping, and you'll be familiar with this if you already did our 10CSS3 UIN layout projects course, we will use the colon checked syntax to locate a checked check box in some HTML and then use that to trigger some CSS styles. Now what we've done is, we've place a check box at the top of our code here, and then we've started the label that's associated with this check box. Now as you probably know, whenever you associate a label with a check box, if you click that label, it will check the check box as well. So we said that this is the label for our flip check box, and there is our ID flip on this check box here. So, anything that we put inside this flip label is gonna activate that check box. So we're gonna build our entire business card Inside the label. And that way, whenever the whole business card is clicked, it will activate that check box. And we will use that colon check syntax to flip that business card over. And the first thing that we've put inside our label is the div for the class card, and that's gonna hold our whole business card. Then we've got a div for the front of the card and another for the back of the card. All right, so let's get some basic styles in for our card. The first thing that we wanna do is hide this check box. It has an ID of flip, so we'll set flip to display none. Now, we're gonna set up some size and layout on the card class. So, this is gonna effect the overall card shape. So, I've just given it a width and height and centered it. Now we're using transform-style: preserve-3d. So in a little bit we're going to use some rotations, and we wanna make sure that our rotations are in 3D space. If we don't use this line, when we try to do our flip, instead of flipping from front to back, it will just spin in a circle. So, this line is important to include. Now inside our card class, as you recall we have the front and the back classes, so we want to give some size to both of those. So, we set the position to absolute and give them a full 100% height and width. We're setting their overflow to hidden. So, if we have anything that's inside our card that's not exactly where it should be, it just gets clipped out of the visible area. And then we're just adding a box shadow around both sides of the card. You can see that has come up here, just to add a bit of depth to the styling. Now we'll style the front side of our card with a basic background color, some curving on the corners, and a text color. And you'll also notice here, we've set translateZ to pixels. Now, because we have preserved 3-D applied to our transforms, this is gonna work in 3D space, so that is actually going to give the appearance that the front side of the card is just a little bit closer to you than if we left that at zero. And that's just gonna help to give a slight impression of thickness to the card when it's flipped. And now, before we can take care of the back side of the card, we need to get our flipping functionality working, and for that we will add in discard. Now this is creating two different states for our card. Whenever the check box that we created at the top of our HTML here is checked, this is the code that will be activated. So this cone checked syntax keeps an eye on the checked status of our check box. Then this plus symbol here looks for a sibling immediately next to the check box that is a label element, in which case that's our label element here, and then it looks for a child element with the class card that is immediately below that. So, we're through that able to target our card class. And then this lot of code uses the same sibling and child selector, but this time, we're using the :not syntax, so this code is gonna apply whenever that check box is not checked. So, when the check box is not checked, like it is now, the transform on that card will just be set to zero. So there'll be no rotation on it, but when the box is checked, there will be a rotation on the y axis of 180 degrees. Now the y axis is up and down, that's the vertical axis. So when we rotate around that vertical axis, that's where we're gonna get our flipping effect. And then, with both of these lines, we're setting a transition so that as the card moves from the rotation of 0 degrees to 180 degrees and back again, we're gonna have that transformation take place gradually, over a period of .25 seconds. So now, when we click on our card, it flips over. Now we're just seeing the other side of our front right now, but we're now ready to add in the styling for our back class, because we'll actually see it when we flip our card over. So we'll target our back class. And just like we did with the front, we're creating some rounded borders. I'll just flip that over so you can see. We've got a white background, bit of a dark border just to prevent the white color of this background showing through on the edges when we're looking at the other side, and some padding. And this time, you'll notice we're translating on the z axis by negative two pixels. So when the card first loads up, that'll mean its simulating it being a little bit further away from where you're at. So all that puts a gap of four pixels between the front and the back side of the card. So that just gives a little bit of a impression that there's some thickness in this card. And then you'll notice that we also have rotateY set to 180 degrees here. Even though we're doing our flip animation here with these lines of code, you have to also include that the back class should have this rotation on it. If you don't include it here as well, then after the flip animation plays, it'll just revert back to being at zero degrees of rotation. So you need to have that 180 degrees of rotation, specified here and here. Now that our front and our back sides are both working, we can start adding some content onto them. Now we're gonna start by adding a bit of a background onto the front of the card. Now these are my initials, but when you're doing this you can feel free to add in your initials. You might need to tweak a little bit of the layout code as you are doing so. And we're going to absolutely position those initials and we're also gonna give them an opaque color. So we've set an opacity on white. We set that opacity down to 0.04. So you can almost not even see it. There is just enough to give a little bit of an effect. Then we'll add the HTML for the rest of the front side content. We have the full name here and profession here and these dips are just gonna be decorative. We'll add styling for all of those elements at once, and then we'll go through what each one does. The name class is just effecting these two words here, and we're just positioning them horizontally and vertically and setting the font size and font weight to 300 by default. But then we're also targeting the span inside that name class which is wrapped around the first name to set the font weight up to the figure 800. The profession class is basically just doing the same job, setting the position for this wording here. And once again, you can fill that in with your own first name and surname and your own profession. You just might need to tweak some of the layout to fit everything in properly. The strip class is what is giving us this blue strip along the background here. And we've made sure to place the blue strip before the name and profession classes here, so that we don't have to worry about zed index in order to get the stacking correct. The strip is loading up first, and everything else is loading on top of it. And that's how we have our background. Then we've got the left side and right side divs, which are this little blue line here, and this little blue line here. We've given them the same top, bottom positions, and the same width. It's all the same background color, that lighter blue. And then the left side div has been positioned 4.5 rem from the left edge of the card and the right side has been positioned 4.5 rem from the right edge of the card. So that's our whole front side, is now finished. Now we're ready to move on to adding content to the back side. We're going to start by making the left portion of the back side blue instead of white. For that, we will add this div in with the class left_back. We'll style that With this code. And we're gonna set the background to blue. And we're gonna absolutely position this blue area over to the left side of the card. And that gives us this section here. Next, we're gonna add a whole bunch of link items, and they're gonna link off to various sites like Codepen and Twitter and Tuts+. So right underneath that left back class, we'll add in all of our items. Each one has a div with the class item, it has a link inside it, and then it has an icon from Font Awesome right before the text for that link. Right now, unstyled, they just look like this. And we're gonna make them come up in big full width links. We'll have the icon in white over this blue section, and then the text will be in blue over the white section. So I add in the essential styling for the text and the icons with this code. So I've set the coloring for all of our links in their text and their icon stages, we've set their alignment so that our icons sit just over this blue area, and our text sits over here on the right, and we've got a nice hover color as we go over each one of our icons. Now what we're gonna do is create a rectangle that will appear. You will emerge from this line here, spread out to the left behind the icons and spread out to the right behind the text, at the same time. We'll do that with this code. Now we're actually using several pseudo elements. So we're using the before pseudo element to create this lighter blue rectangle that appears here. And we're using the after pseudo element to create this blue one. And we start out with the width of this rectangle being zero. And then as we hover, we spread that rectangle out to 30 rems in width. And that's how we gradually grow that rectangle as we hover over. And the same thing applies to the after pseudo element that we're using to create the rectangle on the right side that goes behind the text. We have the initial width set to zero, and then as we hover, we have the width come up to nine rems. We have a transition applying to both of those states that animates the transition from 0 width up to 9 rems of width across a period of 0.35 seconds. And then finally, we're setting the hover color for our links to a lighter color, also in transition to make sure that as the background color changes, we can still read the links effectively. Now there's only one more things to do, and that is to make sure that when someone lands on your personal business card, they actually realize that this can be flipped over. So we're gonna use a pseudo element applied to the front side of our card to create a little notice that comes up when you hover over it that says, click to flip. We'll do that with this code. So we've set our after pseudo element up, and we've said that its content should be click to flip. And we've given it a blue background so that it'll have a bit of a stripe behind it, meaning that it will be visible over the top of everything we already have on our card. But we have also set its visibility to hidden and its opacity to zero, until we hover over it. When we hover, then we'll set the visibility to visible and the opacity to one. Once more, we're using a transition so that we gradually fade in from that opacity of zero to one. So now when we hover over, we get our click to flip message. So that's your completed business card. You can add your own name in, your own profession, you can choose different icons from the Font Awesome library. You can change the colors and you can tweak the style. And whatever you do with your personal business card, we would love to see what you create. So please tweet your completed pen through to #10CSS3projects. In the next project, you're gonna be creating a Polaroid image gallery. You'll be able to put any size images into this gallery that you choose. The gallery will be responsive and we're also gonna take advantage of the new CSS 3 Filter Effects to create some really nice looking roll overs. I'll see you in the next project.

Back to the top