Episode 114: Centering in CSS, Responsive Lightboxes, Dynamic Animations

I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:01 >> And you're watching the Treehouse Show, your weekly dose of Internet where we 0:02 talk about all things web design, web development and more. 0:05 >> In this episode we'll be talking about [SOUND] centering in CSS, 0:08 responsive image light boxes and more. 0:12 >> Let's check it out. 0:15 [MUSIC] 0:16 First up over on the CSS tricks blog, 0:21 there is an excellent post about centering things in CSS. 0:23 >> That's pretty easy, right? 0:29 >> It's actually a little bit complicated. 0:30 Or more complicated than you would think it would need to be. 0:33 >> You just put, put in the center tag and you're done, right? 0:36 That's how that works. 0:39 Oh. >> Not at all. 0:41 The blog post is called Centering in CSS: A Complete Guide and 0:42 it is very complete as it is subscribed. 0:48 There is horizontally, vertically, both horizontally and vertically. 0:52 So, it's kind of like a little quiz on Facebook you know you pick 0:56 >> Little BuzzFeed quiz. 1:00 >> And pick the one you want okay, I'm feeling horizontal here and 1:01 then is it a block level element. 1:05 >> Yeah. >> Well, 1:08 then you're gonna wanna do this thing here. 1:08 The one I want to point out is both horizontally and vertically. 1:11 So, if you want something right in the middle of the screen, in the center, 1:15 both horizontally and vertically, you've got a couple of choices. 1:19 You could do it as something that's fixed width and height. 1:23 So if you have an element that's of fixed width and 1:28 height, you can do something like this, where you say position absolute, and 1:30 the top and left are at 50%, and you're gonna get something like this. 1:35 And you have nice examples from CodePen, so 1:39 you can look at the CSS and see, oh, it's exactly as described. 1:41 And then, the other one that's really good is flexbox. 1:46 So, if you can use flexbox, if the browsers that 1:49 you're targeting have support for flexbox, it's actually really simple, eh. 1:53 You just say display flex, and then you justify-content center, and 1:58 you align-item center. 2:03 And you get something that looks exactly the same as we were looking at before. 2:04 So, pretty cool guide, definitely be sure to check this out. 2:08 It shouldn't be too difficult to center things in CSS if you just kind of 2:12 follow the instructions and do it properly. 2:16 >> Flexbox is great. 2:19 >> It is. >> It's almost like we'd have to 2:21 do a lot less work when we use modern tools. 2:22 >> It is. 2:24 Very true. 2:25 >> Next up, we have a project called Turnbox.js. 2:26 This gives you really, really nice 2:28 3D transformations for different elements on your site. 2:32 Now, the examples that they have are for doing a toggle, 2:37 like let's say you're using a checkbox, you can just toggle that on and off. 2:41 And look at that transformation. 2:46 Wow. Are we in a Web page or 2:47 in a 3D video game that simulates a Web page? 2:49 Here's an example of a confirmation box. 2:53 Go ahead and click that and then you can either click or tap cancel or 2:55 OK, and this works for a bunch of different elements. 2:59 They have examples for uploaders that would show you the progress of 3:03 the item being uploaded, and even for different tabs within a page. 3:07 And look at that, we've got two different 3D transformations at once. 3:12 And they also have examples for radio boxes and 3:18 checkboxes where you can have several elements doing this at a time. 3:20 Now this is actually very, 3:25 very easy to use as are most things we talk about on the show. 3:26 Just include jQuery in your webpage, which you are probably doing already. 3:30 And then also include turnbox.js, go online right there. 3:35 And then once you are doing that, you are pretty well good to go. 3:40 Just have a div and the more divs below that. 3:44 Give it the selector that you want to use and call the Turnbox method on it. 3:48 Now it deports a bunch of different options as do everything that we 3:53 pretty much feature on the show that is a JavaScript plug-in. 3:57 So you can define the perspective and the duration as well as the delay. 4:00 And certain other CSS transitions and transformations, the easing. 4:05 Now this uses the translate 3D function if the browser supports it 4:10 it does not completely have a fallback, but it does us CSS3. 4:15 Anyway, check it out, 4:18 we'll have a link right below the video here in the show notes. 4:20 >> Very cool stuff. 4:23 Well, next up is dynamic physics animations, this is really cool. 4:23 If you used ios 7 or 8 at all, 4:28 you've probably seen something similar to this, and now you can do it on the web. 4:32 So let's take a look at guides here. 4:37 This is called impulse by the way. 4:41 Take a look at the impulse guides. 4:44 And if we scroll down here, we have a couple of examples, so 4:46 actually it's over here. 4:51 So we'll go to basics and you can do things like springing, 4:51 so also start here. 4:58 And you kinda get this nice animation where there's some easing and, you know, 5:01 kind of a certain amount of tension, and you can actually define those things. 5:07 So tension is 100, damping is 10, 5:10 and you kinda say where you want it to start, and, and. 5:13 >> I feel a certain amount of tension, too. 5:17 >> You get something that looks like this. 5:18 There's also accelerating. 5:23 So if you want something to accelerate as it's moving or. 5:26 >> Feel the tension accelerating? 5:30 >> Decelerate. 5:33 >> Can't make a joke about that one. 5:35 >> I feel the jokes decelerating. 5:36 >> [LAUGH] Oh, I see you've watched the treehouse show. 5:38 >> [LAUGH] There's also several other of these. 5:40 There's chaining, I think if we go back to the top here, we can see all of them. 5:44 Let's go to animating other properties. 5:51 So, there's other things you want to animate other than 5:54 movement such as scaling. 5:57 You can do things like that. 5:59 This is a pretty cool library, 6:01 because it would actually take quite a bit of work to do some of these things. 6:03 And you can actually use these ideas to build up more complex features. 6:07 So, if we go over to the examples here, if we were looking at guides, but 6:12 if we're in examples, you can do things like you've seen on phones. 6:16 So we could have something like a pull down menu. 6:21 So we can drag down there, and you see how it kind of bounces. 6:26 This works a little bit better on mobile but we can still check it out on desk top. 6:31 And if I can drag the speed in which I drag the cursor or 6:35 my finger will kind of determine how much it actually bounces. 6:41 Let's see if I can get it to bounce again there. 6:45 Well, trust me, it works. 6:49 There's also inertial scrolling. 6:51 You may not necessarily want to do that because on a lot of phone platforms, they 6:54 already have really good scrolling, but it is available to you if you wanna do it. 6:57 There's sort, sort of this Oridomi or 7:02 origami cover where it kind of scrunches up. 7:06 So that's kinda cool, and 7:10 you see again it bounces there depending on how fast you kinda swipe it. 7:11 So, anyway, really cool stuff. 7:18 This would be pretty complicated to try to implement on your own, so 7:20 definitely be sure to check out Impulse. 7:24 >> All right, well, we'll, 7:27 we, I will impulsively check that out in the middle of something. 7:28 Next up we have a project called Strip. 7:31 This is a responsive lightbox. 7:34 Now, what in the world does that mean? 7:37 Well you'll see a lightbox on a webpage. 7:39 You're probably familiar with this. 7:41 You click an image, and then it will zoom the image and make it full screen. 7:43 But that doesn't always work very well with larger screens. 7:48 So, Strip takes a different take on that. 7:52 You can click on the image, and then it will come out from the right or 7:55 left side of the screen. 8:00 And this allows you to continue to interact with 8:01 the webpage while the image is shown. 8:05 Now this is also responsive. 8:08 So if I exit my browser from full screen here, 8:10 you can see as I am making the page smaller, the image resizes accordingly. 8:13 Now Strip is pretty easy to use. 8:21 We'll just go ahead and close that right here. 8:23 If we click on the documentation, you can see all you have to do is include jQuery. 8:25 And the strip JavaScript and CSS, and that is pretty much all you need to do. 8:30 Just add a class of Strip to your image and you are good to go. 8:36 Now you can also add a caption to it by adding a data attribute for 8:41 the strip caption, and then the caption will appear below the image. 8:46 You can also create different groups of images, and 8:51 that will make these arrows appear. 8:54 And you can either click or tap them to go back and 8:57 forth through all of the different images. 8:59 Now we can go ahead and check out the options that are allowed. 9:04 You have callbacks to have when the image is shown or 9:09 hidden, and you can use a few different effects. 9:13 You can use a spinner, transition. 9:17 And also have a window and a UI. 9:19 Anyway, Strip is very easy to use, especially if you are looking for 9:23 a responsive image lightbox solution. 9:27 Definitely check it out. 9:30 >> Very cool stuff. 9:31 Well, next up we have a Drawer menu, kind of app style, and it uses CSS and jQuery. 9:32 So if we click open. 9:41 Woah. >> Woah. 9:43 >> Look at that. 9:44 It's over on the right position. 9:44 If we click left, it's over on the left. 9:47 >> What? 9:49 >> And you can even do this responsively. 9:50 So we've seen this kinda thing before. 9:53 Nothing particularly special about this one. 9:57 It's just really well done. 9:59 There's responsive left and right, as we just mentioned. 10:00 And it's pretty easy to install. 10:05 You just link the required files, 10:08 which is Drawer, which is this project is called drawer.min.css. 10:10 And then you need to include jQuery and iScroll, this little library right here. 10:15 And then the drawer JavaScript file. 10:21 So fairly easy, then you have some HTML markup to actually build out the drawer. 10:24 So you put your contents right here, and then you have 10:29 things like a hamburger menu have a creative spelling of hamburger there or 10:34 perhaps that's maybe a, a non american spelling I'm not familiar with. 10:39 And then there is the. 10:43 >> Either way it makes me hungry. 10:45 >> It, it is pretty delicious sounding. 10:47 Then you call the Drawer with a little bit of jQuery here. 10:49 So you select the drawer class right there, and 10:52 then you call the drawer function on it. 10:56 And there's a little bit of different markup for 10:59 the left position and right position. 11:01 And then of course, there's also some API methods. 11:04 So you can open it, close it, 11:06 toggle it, or completely destroy it if you just really hate it. 11:07 And you're just really done with it, you can just destroy it. 11:11 >> Just smash it. 11:14 >> Yep. 11:15 So, I think that's all we have time for this week, 11:16 I am @nickrp on Twitter >> And I am @jseifer. 11:19 For more information on anything we talked about, 11:22 there should be links below the video, feel free to explore them at will. 11:23 >> Thank you so much for watching and we will see you next week 11:27 [MUSIC] 11:30

You need to sign up for Treehouse in order to set up Workspace

Sign up