Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,987 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
Web Design is for me, a left brain, right brain affair. I love to approach a site visually, but I also need to work with it from a code perspective. CSS Transitions and Transforms similarly exist in both worlds, and sometimes it's hard to get just what you want by working in code without a tremendous amount of trial and error. Luckily, there are a good number of online tools that can help with the visualization side of web creation, while generating the necessary code. Let me take you on a brief tour of some of my favorites.
One of the hardest of the transition related concepts to visualize is that of timing function. As described in the Chapter 2 movie, Transition Options, the timing function property controls how the transition is applied, the default being the ease value. To help you get a better sense of what's possible with timing function, not to mention the code to make it happen, check out Caesar. Caesar lets you try different timing functions over specific durations and apply one of four properties. Let me show you how it works.
So I'll scroll down. So we have the main interface here, and you can see that the code is generated as well. So just starting with its default setting of linear Easing for half a second, as you can see there are four effects or properties here than we can change. I will click Left and the absolute positioning left value is adjusted. Now if I click it again, it comes back, and you can see the straight ahead path of linear. Well, let's look at another Easing option here.
When you open up the list, you will see that there are tons of options. The first five are the defaults, and we can easily try any of those. Let's go with an ease-in-out and click Left again. You can see a slight difference there. Now there are other properties you can try like Width, Height, and Opacity. I tend to like Left and Width most of all. Now where I get the most value out of Caesar is trying some of these other timing functions that are set up here, these so called Penner equations.
You might remember an earlier timing function, it started off really slow and then went very fast. Well, that's this one, easeInExpo. So let's try that moving the object Left, and that's what that's like. Let's bump up the duration. I will use a little stepper control here to go up to--oh, let's say 2 seconds, and have it come back. There we are. Now the best thing is, of course, especially with these more advanced cubic-Bezier timing functions, is all the code is generated for you.
So now if you don't like this exactly, you want something close to this, you can also grab the Bezier handles and adjust them. So let's say I want to make it not start off quite that slow, maybe something more like that, and I'll try it again. All right, that's getting there. Let me adjust this milliseconds to one second here, and make a further adjustment on the handles up here. So let's say if we can get it really sharp.
Now notice I can go outside of the box, and this will give me values outside of the 0 and 1 range. So I can create some really interesting effects, one more time. You saw a little hesitation there. You can actually get kind of like a bounce effect here, really nice! So there's a lot of different work that you can do, as I like to say, hours of fun at Caesar's place. Let's turn to another one for a more general app that addresses a broader range of CSS Transition and Transform functions. Visit CSS3 Maker.
Here you pick the category that you want to explore from the nav up top. Let's say like CSS transform, and then you can modify the property and get instant visual feedback as well as the code, which can be selected and copied or downloaded. So let's work with a specific property rather than all of them at once. So let me just go to Rotate, and as I grab and drag this, I can move it to a particular direction. Let's say I am looking for angle that looks like that. Now I'm not sure what that is, but if I look over at the code, I can see it's 60.
Here I have a tool that can help me visualize what a specific angle looks like, as well as the generated code. One point to keep in mind, CSS3 Maker is just a little bit old and outputs only the vendor prefix code. You'll need to add in the generic declaration yourself. If you're a tad more code oriented, there is also a CSS3 generator for you. CSS3, please! Here, there is a series of rules, and as I scroll down, you can see I have box_round, box_shadow, box_gradient, and then there's a group of them that are not enabled yet, and I can toggle the rule on.
So here I am with box_rotate where we have a transform/rotate function, and if I toggle the rule on, you can see it rotates to the particular degree. Let's say I was thinking of something a little more, and I want to try out something like, oh, I don't know. Let's say 15 degrees. You can see that rotation. Now at a certain point it does clip, but you can see the general effect of the rotation. Let's bring it back down to let's say 9 degrees. All right, that's pleasing.
Now I have my code here. I can copy either just the transform part of it, or I could copy the entire rule if I wanted to. And there is a bonus, you actually do get the equivalent Internet Explorer filter code, as well as all of the other transform code. Pretty cool! Speaking of Internet Explorer, if you really want to view your CSS3 transforms on an older Internet Explorer browser, take a look at the Transforms Translator. Here you can enter your transforms code. Let me scroll down just a little bit, including the Width and Height and then click the Translate button.
So let's just take their example and Translate to IE Matrix, you will get a visualization of what the object looks like after the transforms have been applied. In this case, we had a rotate, translateX, and scale applied, so all three things have happened over here. Now you have both of the CSS3 code with all the vendor prefixes and the Internet Explorer code, which does go on for a little bit of time. As the notes on the site mention, be sure to use conditional comments to isolate the IE code from your other CSS.
Since we are talking about the Internet, this is by no means an exhaustive list of CSS3 related tools, which should give you an idea of what's out there. New ones are constantly coming online, of course, so, check your search engine frequently.
- Understanding transition basics
- Working with 2D and 3D transforms
- Animating color changes
- Fading objects
- Changing the size of page elements and fonts
- Transitioning multiple properties at the same time
- Understanding keyframes and animations
- Working in the z-index
- Crafting transitions in Dreamweaver