Web Design with HTML5 + CSS3 Special Effects :: Create Rotating Gizmos | Jeb Riordan | Skillshare

Web Design with HTML5 + CSS3 Special Effects :: Create Rotating Gizmos

Jeb Riordan, Project Manager | Web Developer | jebriordan.com

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
5 Lessons (12m)
    • 1. Introduction:: Create Two Rotating Gizmos

    • 2. Flexible Box Layout Model

    • 3. Rotating Gizmo :: Example 1

    • 4. Rotating Gizmo :: Example 2

    • 5. Final Thoughts


About This Class

Combine HTML and CSS in Your Web Design to Make Awesome Special Effects.

With the introduction of HTML5 and CSS3 there is a whole bunch of special effects that we can include in our web development without a single PHP,  jquery, or java script

And that’s a good thing right?

In this series of short classes we’ll explore a whole range of special effects to brighten up our web design as well as showing our site visitors what we want them to do.

In this class we’ll create:

Two Rotating Gizmos. Not really useful, but will add interest for your site visitors.

And you get to use your coding skills, right...

Watch out for more web design with HTML5 and CSS3 short classes. Coming soon: Fancy buttons, sliding images and carousels...


1. Introduction:: Create Two Rotating Gizmos: with the introduction of haste, TML five and CSS three. There is a whole bunch of special effects we can include in our webpage designs without a single pigs BJ Kriel, JavaScript And that's a good thing, right? In this series of short classes, we'll explore a whole range of special effects to brighten up our websites as well as showing our site visitors. What we want them to do in this class will create some things that rotate. The result isn't really useful, but it looks cool when we get to use, um of CSS threes key frames and explore the flex box layer of model. This class is one of a series where we create special effects with hasty ML fights. Is his three that you can use on your website today, just like this. Hi, I'm Jeff Reardon, a project manager turned with developer. But that's enough about me, right? If you want to brighten up your website, make it more fun fuel readers than follow. Along with this Siri's classes, because coming soon are fancy buttons, sliding images and car cells. So enrolling the class and let's make some rotating rotating dials. Yes, rotating dials 2. Flexible Box Layout Model: before we start creating the row taters, I want to tell you how I centered the examples on the screen. Back in the day, there have been all source of tricks and hacks trying to center content in the middle of it . Div, both horizontally and vertically with the introduction of ceases three. We don't need to use floats or hacks because we have this CSS three flexible box layout one or flex books for short. This flex box model makes sure that elements on the page behave the way we want them to behave and also accommodates the different screen sizes and devices. And it's done by declaring the display property oven element to flex and insight. This flex container is one or more flex items. Let's demonstrate. So here we have faced here, Mel, we have a div with class flex container. Inside the Do we have a hate one heading and three nested ifs with class flex item and send text. The browser looks like this, showing the heading on the text in the three nest. It gives in the CSS. Let's create the class for the flex container, give it some height and some background color on the process shows the space taken up by the DIV. We declare the display property with value flex in the Preiser. It looks like this. The default direction for the nested flexed items is horizontal like this, but we want all the elements inside the parent container to stack one on top of the other, so the flex direction value is set to column. Now let's center along the vertical access with Justify Content Center. Now let's center along the horizontal access with a line items center and there you have it . Let's now look at the nest it gives with the class flex items. Remember that anything going on outside the flex container behaves is normal and the same goes for anything inside the flex item. There are also many other property value pairs to manipulate the rendering on the flex items inside the flex container. But centering is all we're interested in right now. In the next lesson, we start the row taters 3. Rotating Gizmo :: Example 1: we'll begin with the first rotator demonstration. Let's start with the hates TML in the index start chased him out page for the first rotating dial. We have a container with class container, one each one heading on a dip with class, rotator one and so Matty text so that we concede in the browser. And that's it for the HTML in the style dot CSS file, we need to start to finding the flex container we have called it contained a one. We set the display to be flex, and now let's show that container with a solid border with style outset, white background, some padding at the bottom and some margin outside that container to separate it from the next rotator. And the prize surrenders like this next to reset the Flex direction. Two column. The justify content on the line items both to center will position that flex items in the dead center of the container one. And it looks like this. And now the rotator with class Rotator one. The death has a width and a height of 100 pixel in the background color of medium grey Looks like this setting the border radius to 50% makes the defense circle. Setting the border with 24 pixel makes a circle larger by eight pixels dia litter on the border transparent so the background color shows through. Now let's set the board a top color to a deep red on the border bottom to the same deep red color. And then we at the Magic. The animation is defined by the key frame with name rotate one. It completes in two seconds in a linear fashion indefinitely. Now we need to to find the animation. Setting the key frame. Rotate one. The transformation is a rotation and also a scale at 0% of the time period. Their rotation is zero degrees on a scale is one have 50% of the time period. The DIV will rotate 180 degrees and scale up to 1.2 at 100% of the time period. The dip will rotate to the full circle, and the scale were reduced back to one. Now let's see how it performs. We can play around with the animation timing on the transport properties to see the different effects. For example, let's remove the transform it 50% Now it just rotates. Play around with the timing, the degrees of rotation on the scale and see what weird and wonderful shapes we can make. And that's it for the rotator. One in the next lesson, rotator, too. 4. Rotating Gizmo :: Example 2: in this second example will reverse the direction of one. Dave and I've commented out the key frames for rotator. Want to stop it spinning? It could get a little annoying. Cut it. Now let's start with the hasty Mel for rotator, too. We have a container with class container to H one, heading investigative with class rotator, too, and another nested dip with class rotated to weigh. And that's it for the HTML. In the CSS, we define the container to the same as container one using the display flex model. The styling for the container flex direction is a Kahlan. Lawful ex items in the flex container will render one on top of the other and then justify content Online Content said to center to persuade all the flex items to render in the center of the container. And it looks like this rotated to is a copy of rotator one same size with a light gray background. You make the rectangle circle. We have a border for pixel wide, solid with a pink color so we can see it for now. Then add color to the border. Talk in the port of pardon. The animation is named rotate to has a four second cycle time linear shape. It does not stop. The second rotate to to a is similar but different. We need to position it relative to its container the width and the height is increased by a pixels and for now, make the background color yellow. Now, both rotator zehr visible. We can remove the text in HTML gives We make the rectangle into a circle. Let's make the port of visible by changing the color to blue, and we can remove the background color, changing it from yellow to transparent. Now we need to position the second rotator right on top of the first rotator, moving it left by 12 pixels, are moving it up by 30 pixels. Oh no, not 30 pixels, 12 pixels. And then we set the border left a nice green color. And then we've said the border right on the same nice green color. Then remove the blue border and make it transparent. On the animation is named Rotate to A with a two second timing linear infinite, and it looks like this. Now we need to start the animation with a set of key frames, the first if rotate to will rotate clockwise 360 degrees in four seconds, the second, if rotate to a we rotate anti clockwise, 360 degrees in two seconds. Let's see if it works and there you have it. 5. Final Thoughts: By combining HTML five and CSS three, it's possible to make some pretty interesting special effects for your website. This example of rotating dips is visually fun, but quite frankly, has no real purpose other than to give you a coding practice and to show off your savvy CSS skills. And that's not a bad thing, is it? We explored the use of the following CSS properties, aligning elements using the flexible box layer model relative positioning border styles, border radius to make a circle border properties for the top. For the pardon boredom left Porter right animation using key frames and the transformation rotate clockwise and anti clockwise and scaling. If you have any questions, I'm here to help Please ask me anything. If you find the class useful, please give me a thumbs up and post the results of your project in the project area. You can find that HTML and CSS files in the project area on Look Out for more Web design. Special effects using HTML five and CSS three