CSS way too much. People think I'm weird, but I love it. Today I'm going to talk to you about CSS shapes, transitions, transforms. It's the fun stuff that you don't normally

get to see. Can you hear me okay back there? First I want to talk about the basic CSS shapes like circle, square, rectangle, ovals. They're the easiest to make. The background color is due to the background of inside of it, not the border of itself. Where others

are drawn, like triangles are drawn by the border. I'll show you. So if you take a circle, to make it you have equal height and width, and then you have a border radius of

50%. So you can do 100 pixels in this case, but the cheat is to do 50%, and it works every time. If you go over 50%, it doesn't have any more effect, only when you go under

50%. So this is how they make those circles for certain web pages with images. It's just the border radius on an image tag. The sum is exactly the same CSS. Next we'll

move on to square, which is pretty much the same height and width. It's the easiest shape. Everything on the web is pretty much a square, or rectangle. Where rectangles are, you know, one of them is wider or higher than the other. Oval is a combination

of circle and rectangle, where you'd use the border radius to be 50%. In this case 50% of 100 is 50, 50% of 200 is 100, but the cheat is just to do border, the trick is just to do

border radius 50%. Those are the easy ones, easy to understand ones. Next, these are all drawn, the triangles, the trapezoid, and star, which is just two triangles anyways. They're drawn using

borders. So for example, for triangle up, there's no pixel width or height. By the way, all this will be, I have working code that you guys can look at, and I'll give you

my slides as well. But as you can see, the border left and the border right are transparent, but the border bottom, the one coming up, has the color. So if you want to look at it this way, if we change the transparent to white, that's the way it looks

like. It's sort of like three triangles. Likewise, triangle down, you're going, the main part of it's in the top, facing down. So the other two are transparent, and then the top is the color. And if we want to move it to the right, all the color,

the main amount of color is on the left-hand side, and then the other two are transparent at the top and the bottom. And what would happen with the left? Anybody, anybody? Is that the same thing, except it's the left, right? The border right has the color

going towards the left, and then the top and bottom are transparent. So what happens if you want to have a triangle that's on the top left? So you, if you would

if both of these would have colors, it would look like that. But you're making the bottom one transparent, and so since it's coming top to bottom, that's the way, that's the way it looks. Does anybody have a question about that? I see some.

So you know, the blue color is the one you want, right? And so the main stuff is coming from the top down. So the border top is the blue, and then the border bottom is the white. But when you make it transparent, it looks like that. Do you have a question?

It's kind of crazy. Obviously the logical thing that would happen is not that. You would think it was like one level, then one level, but that's not how it works.

I guess you've got to think of it as a square, but I guess in a way that it comes down this way and then up that way. Right, right. It's from top to bottom, and the other one

is from bottom to top. But you could use it for really cool things. But it doesn't

work. Maybe we continue around the four corners, the right one. The blue is coming from the top again, and the left is coming from the bottom. And right, where the blue one is

whatever it starts at, so in this case the bottom is coming up, it's blue. Sorry, the thickest part, top, is coming down. Does that make sense? It gets confusing

I guess. But if we were to go from the bottom left, it's, I don't know if I could move.

So this would be the bottom, and then that would be the top. This is transparent, I mean the right. So see, it's coming from the right side. Let's find out. Let's find out. Yes, this all works in all the browsers. Lower resolution. Come on. Let me try

to move this over here for a second. Well, let me move it down. Here we go. Can you see

that? So this one is, it starts on the right with the transparent. Let's see, pointer

right. Now you have me all messed up. If I cancel that, so I switch it to the

left, then it gets really fun. I'm trying to figure out how to explain this better.

It does, but it's trial and error in this case. Yeah. Then you end up with the

four corners. I'll put more in my notes about that. Okay. So we almost drew this when I

was doing the live thing. The trapezoid ends taper in from the left and the right. So the border comes from the bottom. When I was messing with it, I put a border left end. That's almost what it ended up looking like. And you know how we had the triangle going up? We can have the triangle going down. Do you guys understand before and after?

So before and after means I'm putting some element before the div and I'm putting some element after the div that wasn't there. It doesn't work for accessibility, but it

works for BFC stars and stuff like that. So you take and you, so this is how you build the first one. Just like you build a normal star. Border bottom, it's coming up. You know,

it's that way. And then this is after. It draws it, border down, like border top. It's coming down that way. And we use positions on this. And then we move it over on top of each other with the position. Does that make sense? All right. But you

move this over negative 50 pixels. And so the more interesting stuff. The star six is relative. And then your star six after is position absolute is relative

to the star six. Right. Absolute. Right. You have to send them both. They both have to have positions. Absolute to the relative. All right. Now we have some of those basic

things we can do, these fun things. Make a talk bubble. Pacman, yin yang. So the talk bubble's pretty easy to do because we already know how to make the square with

border radius, right? You guys all know how to do that. You set a border radius of like ten. And then we make that triangle going to the left. And then we pull it over. This is the padding for the words. You know, it's a rectangle. And then the background

color is, of course, in there. Now we make the triangle over here. It's a left one. So it comes from the right hand side. Most of it's on the right hand side. And

then these two are transparent just like we did originally here. And then a position absolute. What is what? Well, you put content in there. It's empty. But if I put a word in there, a word would go inside of there. And the big reason you would use that for before

is, say you're making a print style sheet and you want to, every link, you want to put the actual URL. You grab the attribute of the URL and you put it in there inside

brackets so the print people know where the URL was. That's one of the cool things for that. So let's make a Pacman. This one uses border radius to make a circle. And then we come from the left. Let's see. The border right is transparent. So

can you guys see this okay? So if I take away border radius, it's just a square with the right side. I mean, the left, the border left, right? No, it's not showing up. I

made it all one thing. The editor made it all one thing. I'll show you the code,

which is, this is a little bit small. So the border right is the one that's transparent.

And then the other borders have colors on them. So that's how this ends up. And you just border radius it, and it's a circle, and then you have Pacman. Waka waka. Yeah,

there's the code. And then we want to go crazy and make yin yang. So this one's a little more interesting. So I tried to break it up, and this is like the first drawing

of it, and this is combined there, and I added a green so you can see things better. So you make the border, you know, your border radius of 100 percent. I don't know if you can hear me. And then, let's see, the border is 100 percent, and the border

color is a blue, but the background is white, and so it ends up looking like that, believe it or not. But yeah, the border radius is in there. This one's before and after. Before, we take and we put in the blue on the outside border with

the white on the inside, and the width being 12 pixels. And then we go halfway up with the 50 percent position absolute. We need the content thing because it won't fill in the color if there's nothing in it, so you need to put content. Empty

space. Likewise, here's the white border with the background color of blue. It's reversed, and then it ends up looking like that, which is pretty cool.

Next we're going to get into CSS transforms, which gets into skew and scale, rotate and translate. This is where the magic happens. So to make a rectangle,

you just got to skew it. So let me show you. These are the real things that you'll be able to get, which is slightly bigger. So here you have a rectangle. Here you have

the rectangle, and it's skewed. The problem with skewed, and it's really cool, you could do navigation items up top, have little folders or whatever. The problem is the words inside are skewed. So what you have to do is you have to put

a div inside of it. I put a hover to change the skew to be the opposite side. So to make this font work, no matter what, you then have to put another div inside

of it, or span, and go exact opposite the skew that's live. So the skew is 20, this is negative 20 degrees. So it straightens it back out, and then on the hover they switch. It's negative 20 and a positive 20 degrees. The only reason I can see you using

this is fancy stuff, but menuing is probably pretty cool for that to be used. So I'm just using the x-axis, and I'm going 20 degrees. And then on hover I'm switching

it to negative 20 degrees, and it just flips it back and forth. So we get into scaling. I'm going to show you the code in a second, when I hover over

these, they're going to scale 1.2 times on hover. So we're used to the higher resolution

screens these days. You have to be aware of the surroundings, because if you go too

big it will go over the top of words. But in the heart, there's the heart. All right. So let's talk about the heart, because we're going to use rotate on this

one, which is part of our growing coolness. So when you originally draw it out, it really looks like this, because we have, we set the outside and the width and height, and then we'd use a before and after, even though before and after uses the same code

after changes some. So before, I'll draw this, after draws that, and then we rotate them, and then we move them, we scale them, transform origin, and then they end up looking like a heart. Do you follow that? They're like two silos, you know with curves

and you twist them this way, and since we're on top of each other with the same color, they end up looking like a heart. It moves it, yeah. So I think this one's

top to bottom, this is right to left. Right, because it's put here, right? It overrides

that one. Right. Since this comes whatever after, and the next one is even more

crazy. Infinity. So what we do here is same thing, we have the outside box, this whole thing, and then we make two squares, and then, let's see, we position

absolute top left with 60 pixels, right, the 60 pixels. I don't know, I think I copied my code slightly off here. But then we rotated them, we rotate them 45 degrees,

and then we put border radius in there, and that turns them into circles. I can show you that. So if we take away the radius, we got square, we take out the radius

from before, we got square, we take away the rotate, we take out the rotate for both of those. So you just rotate them, and you don't have to move them in this case. Right, it just draws the box. Right. And then the other two

ones are before and after, and you just want to optimize the before and after together, and then one of them. And then, to make things even

more complicated, yin and yang. We did yin and yang. Did I discuss yin and yang? Did I discuss how you made it? Okay. Well now we're going to rotate it. So, on hover,

as soon as I put my mouse on it, it will rotate. Which looks kind of, you know, bam, there it is. So we need to do something to make that more smooth, right? It could be anything you want. I probably changed it a lot in life. It was probably a type of...

No, there wasn't anything extra there. So next we want to talk about translating things.

So we want to make our pacman eat the little pills, right? So if I had the idea, we're

going to move him, and then we're going to also close the mouth, sort of. You know, I'm just being goofy. So when you hover over him, but then, you know, he moves, so your mouse has to sort of keep up with it. If I had a little bit more time, I would

probably have made little pills and did a little kind of crazy stuff. So now we're going to talk about transitions, and this is where it gets really cool. This is where that stuff, it looks kind of janky, is more smooth. So when there's some kind of

change on your class, so I should have put hover or something on here, hover, hover, something changes. You have the CSS attribute, how much time, what style,

is it going to move? Is it linear? Is it ease out, ease in? I'll have the list of them in a second. You can separate these, like background color,

color, font, or something in commas. You can stack those up in different speeds and all that kind of stuff. And this is the all-compassing, if you put all, everything that changes before and hover, everything that changes in the CSS will change if it's allowed to. So that last part, the linear, ease out,

these are the ones you're allowed to use. If you want to get really crazy with the math, the cubic busier is your friend. I will put a link in my,

I'll show you these real quick. Let me show you, this guy did a web page, and it shows what these different things do, how the timing is on them

naturally, which is really, really cool. I'll show you why it's cool here in a second. Firebug keeps getting in my way. So here is the circle,

doing the scaling thing, I mean doing a color change thing, over a couple seconds. Here is a circle changing size,

and you hover over it, and you pick the time, and here's rotating yin yang, which is a lot smoother than the other one. I thought about it late last night,

maybe I should make the rotating yin yang go really fast, and then spin down the road. But I didn't do it, I'm sorry. Too much beer, here's Pac-Man. So what can you do that's kind of cool?

I did the Penn State meteorology site, and if you look at the three-bar navigation up there, you will see the three bars, they're individual, and they're going to reorient themselves to make an X, and then they're going to rotate themselves again

to make the hamburger navigation. Also, how fast the page opens and how natural it feels when it opens and shuts, so it does that. Boom, it comes back. This could be a useful UI and make people feel like

you put some money into your work, some time and effort. Thank you for your time. If you have any questions, let me know. This is my contact information. I will upload all the CSS and HTML files to Dropbox,

and I'll also upload my slides somewhere. Chris, will I be able to give them all my information somewhere else? Okay. Cool. And don't forget to do this. Any questions?

What was that URL for that Facebook, the FBI? That's FBI.gov. Any other questions?

The other one is MET, I think, www.met.psu. Any other questions, anybody?

You can. Please do. It's cool. I really enjoy doing it.

I wanted to do some other stuff, but it turned out that's all the time I really have. I've been doing CSS for a really, really, really long time, maybe 15 years.

On Twitter, if you look at who I follow, you might find some really cool CSS gurus like Eric Meyer or Leah. For example, in this particular case, it does use jQuery to put a class in the body,

and same with the FBI one. Mobile is activated. This part of the page is off the canvas, and then it slides over, and that slides over. Actually, it does it better than the FBI.

Yeah. CSS is really, really accepted almost everywhere. This all works on IE 10 and above. Some of the transition stuff doesn't work as well on IE 9, but you have to put in a hyphen Microsoft.

I'd have to find the thing for you, but it works on IE 9 if you do that. All the rest of these work without browser prefixes.

Yeah, just the one jQuery thing. It's a little horrible. I'm one of those people that if CSS can do it, I want to do it with CSS.

Absolutely. Those aren't done with SVG at all.

They're just drawn up with the background colors and colors of the borders. Yeah, you can do a lot of the same things with SVG. Yeah, you can maybe do a lot more with them because you're limited to the triangle.

You're limited to certain things where SVGs you have passed, and you can fill the path and have some motion and stuff like that. Could you imagine? I thought about it. It's almost there with Yin Yang.

You're already close. Maybe I will do it before the end, and I'll do the lightning talk. One more thing. No, I didn't do it. I won't be here for the sprint because Penn State plays Ohio State. I have to go back.

Unfortunately. Any other questions? Thank you all for coming.