Easy creation of banners using css3. Animated banner with CSS3

Let's make an advertising banner using CSS3. Currently only CSS3 animations are fully supported Firefox browsers and WebKit. But it’s easy enough to make the banner work in other browsers. However, don't expect great performance everywhere (especially in IE 7 and older) when experimenting with the latest CSS techniques.

Note: To save space on the page, all browser manufacturer prefixes have been omitted. See the code in the sources.

HTML markup

First, let's look at the structure of the banner in HTML. At this stage we need to imagine how the animation will function:

For a deeper understanding of the markup structure, let's focus on the boat:

Three animations occur with the boat:

Boat slipping on the left. Applies to an unordered list (group).

Imitation of a boat rocking on the water. Applies to a list item (boat).

Appearance of a question mark. Applies to a div element (question mark).

If you look at the demo page, you can see that the animation for the list item (boat) also affects the div element inside it (Question Mark). Also, the "sliding out" animation for an unordered list works on the list item (boat and question mark).

Therefore, we can conclude that child elements receive animations from their parents in addition to their own actions. Now all that remains is to list the parent/child structures.

CSS

Before you begin analyzing the creation of animation, you need to ensure backwards compatible with older browsers.

backward compatibility

We'll ensure backwards compatibility by simply styling the markup as if CSS animations didn't exist at all. If someone views the page in an old browser, they will see a regular static image, and not empty white space.

For example: what if you use CSS? similar to the one below, there will be problems:

/* WRONG! */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 0; /* This div is hidden by default - oops! */ animation: our -fade-in-animation 1s 1; )

If the browser does not support animations, the div element will remain invisible to the user.

And this is how we will ensure backward compatibility with older browsers:

/* TRUE */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 1; /* This div is visible by default */ animation: our -fade-in-animation 1s 1; )

Now the div element will be displayed even if the animation fails to start. And in modern browsers, the div will first be hidden during the animation.

The basis

Now we know how to ensure backward compatibility (which will help avoid problems when working with real projects). It's time to create the base of our CSS code.

You need to remember 3 points:

Since the banner will be used on different sites, we will do our best CSS selectors special. They will all start with the identifier #ad-1. This way we will try to avoid overlap between our code and the site code.

We are intentionally ignoring animation delay in installations. If you use an animation delay when setting styles with the default visibility of elements, the banner structure will be disrupted by the sudden disappearance or appearance of parts of the image after the animation is completed. Animation delay is simulated by the duration and setting of the frames.

When possible We use one animation for several elements. This way we save time and reduce code size.

So let's create the basis for our banner. Let's set relative positioning for it so that the internal elements can be placed correctly. Will also hide anything outside the element's scope:

#ad-1 ( width: 720px; height: 300px; float: left; margin: 40px auto 0; background-image: url(../images/ad-1/background.png); background-position: center; background -repeat: no-repeat; overflow: hidden; position: relative; box-shadow: 0px 0px 6px #000; )

Then we set styles for the text and input fields. Call the appropriate animations. You also need to make sure the content has the highest z-index for the moving parts so they don't overlap:

#ad-1 #content ( width: 325px; float: right; margin: 40px; text-align: center; z-index: 4; position: relative; overflow: visible; ) #ad-1 h2 ( font-family: "Alfa Slab One", cursive; color: #137dd5; font-size: 50px; line-height: 50px; text-shadow: 0px 0px 4px #fff; animation: delayed-fade-animation 7s 1 ease-in-out; /* Appears h2 with simulated delay */ ) #ad-1 h3 ( font-family: "Boogaloo", cursive; color: #202224; font-size: 31px; line-height: 31px; text-shadow: 0px 0px 4px #fff; animation: delayed-fade-animation 10s 1 ease-in-out; /* Appears h3 with simulated delay */ ) #ad-1 form ( margin: 30px 0 0 6px; position: relative; animation: form-animation 12s 1 ease-in-out; /* Sliding out the form for entering an email address with simulated delay */ ) #ad-1 #email ( width: 158px; height: 48px; float: left; padding: 0 20px; font-size: 16px; font-family: "Lucida Grande", sans-serif; color: #fff; text-shadow: 1px 1px 0px #a2917d; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border:1px solid #a2917d; outline: none; box-shadow: -1px -1px 1px #fff; background-color: #c7b29b; background-image: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%); ) #ad-1 #email:focus ( background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%); ) #ad-1 #submit ( height: 50px; float: left ; cursor: pointer; padding: 0 20px; font-size: 20px; font-family: "Boogaloo", cursive; color: #137dd5; text-shadow: 1px 1px 0px #fff; border-top-right-radius: 5px ; border-bottom-right-radius: 5px; border:1px solid #bcc0c4; border-left: none; background-color: #fff; background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb( 255,255,255) 100%); ) #ad-1 #submit:hover ( background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%); )

Now let's set the styles for the water and call the corresponding animation:

#ad-1 ul#water( /* If you need another animation for water, you can add it here */ ) #ad-1 li#water-back ( width: 1200px; height: 84px; background-image: url(.. /images/ad-1/water-back.png); background-repeat: repeat-x; z-index: 1; position: absolute; bottom: 10px; left: -20px; animation: water-back-animation 3s infinite ease-in-out; /* Imitation of wave splashing */ ) #ad-1 li#water-front ( width: 1200px; height: 158px; background-image: url(../images/ad-1/water-front .png); background-repeat: repeat-x; z-index: 3; position: absolute; bottom: -70px; left:-30px; animation: water-front-animation 2s infinite ease-in-out; /* Other Simulates splashing waves. The animation will run a little faster to create a perspective effect. */ )

Let's set styles for the boat and its elements. We also call the corresponding animations:

#ad-1 ul#boat ( width: 249px; height: 215px; z-index: 2; position: absolute; bottom: 25px; left: 20px; overflow: visible; animation: boat-in-animation 3s 1 ease-out ; /* Slides the group in when ad starts */ ) #ad-1 ul#boat li ( width: 249px; height: 215px; background-image: url(../images/ad-1/boat.png); position: absolute; bottom: 0px; left: 0px; overflow: visible; animation: boat-animation 2s infinite ease-in-out; /* Simulate the boat bobbing on the water - similar to the animation already used on the water itself. */ ) #ad-1 #question-mark ( width: 24px; height: 50px; background-image: url(../images/ad-1/question-mark.png); position: absolute; right: 34px; top: -30px; animation: delayed-fade-animation 4s 1 ease-in-out; /* Fade in the question mark */ )

Now let's create styles for the clouds. For them we will use animation with the effect of endless movement. The illustration demonstrates the essence of the idea:

And here is the CSS code:

#ad-1 #clouds ( position: absolute; top: 0px; z-index: 0; animation: cloud-animation 30s infinite linear; /* Scroll the clouds to the left, reset and repeat */ ) #ad-1 #cloud-group -1 ( width:720px; position: absolute; left:0px; ) #ad-1 #cloud-group-2 ( width: 720px; position: absolute; left: 720px; ) #ad-1 .cloud-1 ( width : 172px; height: 121px; background-image: url(../images/ad-1/cloud-1.png); position: absolute; top: 10px; left: 40px; ) #ad-1 .cloud-2 ( width: 121px; height: 75px; background-image: url(../images/ad-1/cloud-2.png); position: absolute; top: -25px; left: 300px; ) #ad-1 . cloud-3 ( width: 132px; height: 105px; background-image: url(../images/ad-1/cloud-3.png); position: absolute; top: -5px; left: 530px; )

Animations

Reminder: From this point on, nothing is actually animated. If you look at our banner now, you will see a static image. This is where the animations are created and called in the code above.

Now let’s breathe life into our beautiful static picture:

/* Simulated delay animation is used to display multiple elements. The delay simulation is carried out by starting the process with 80% of the animation continuing (and not immediately). This way you can simulate any delay: */ @keyframes delayed-fade-animation ( 0% (opacity: 0;) 80% (opacity: 0;) 100% (opacity: 1;) ) /* Animation for displaying the form with email address and a button. Imitation of delay is also used */ @keyframes form-animation ( 0% (opacity: 0; right: -400px;) 90% (opacity: 0; right: -400px;) 95% (opacity: 0.5; right: 20px;) 100% (opacity: 1; right: 0px;) ) /* This animation is used to bring the boat off the screen at the beginning of the video: */ @keyframes boat-in-animation ( 0% (left: -200px;) 100% (left : 20px;) ) /* Animation for clouds. The first group of clouds starts moving from the center, and the second - to the right of the screen. The first group is slowly removed from the screen, and the second appears on the right. Once the left group is completely hidden, the clouds very quickly return to their original position: */ @keyframes cloud-animation ( 0% (left: 0px;) 99.9999% (left: -720px;) 100% (left: 0px;) ) / * The last three animations are almost the same - the difference lies in the positioning of the elements. They simulate the splashing of ocean waves: */ @keyframes boat-animation ( 0% (bottom: 0px; left: 0px;) 25% (bottom: -2px; left: -2px;) 70% (bottom: 2px; left: - 4px;) 100% (bottom: -1px; left: 0px;) ) @keyframes water-back-animation ( 0% (bottom: 10px; left: -20px;) 25% (bottom: 8px; left: -22px; ) 70% (bottom: 12px; left: -24px;) 100% (bottom: 9px; left: -20px;) ) @keyframes water-front-animation ( 0% (bottom: -70px; left: -30px;) 25% (bottom: -68px; left: -32px;) 70% (bottom: -72px; left: -34px;) 100% (bottom: -69px; left: -30px;) )

Conclusion

In this lesson we learned several key concepts:

1. Heir elements receive their parents' animations in addition to their own animations.
2. When creating a banner, you should strive to use a unique identifier to avoid overlapping code with an existing CSS project.
3. The position and style of elements should be chosen as if animation were not available to ensure backwards compatibility.
4. If possible, you should use one animation for several elements.

Undoubtedly one of the brightest trends 2012 is development on CCS3, HTML5. Today we offer a large and very useful review examples " 20+: creative and useful lessons on CSS3″ offered on SpeckyBoy. All examples are made on clean without JavaScript, the lessons presented include demos and ready-made CSS3 files for download.

We are sure that these techniques will be useful for web developers!

css3 lessons :

1. CSS3 photo galleries, sliders, effects with images

1.1.Slider on CSS3

I can’t believe it, but this slider with different effects is made exclusively in CSS3, very impressive.

1.2. Background for a full screen website with a slider effect using CSS3

Web designers have been experimenting with different backgrounds for the site for a long time, but so far pure CSS There was very little that could be done; we had to use JS. Now CSS3 gives you the opportunity to do with the background of your site as you wish - you can have one background with a large, high-quality photograph, you can change several backgrounds with different effects, and with the scalability of the background depending on the screen parameters. In general, an amazing opportunity for creative sites.

1.3. Lightbox on CSS3

With this tutorial you can learn how to create a Lightbox with a variety of effects using pure CSS.

1.4. Image Properties in CSS3

This tutorial demonstrates new features in CSS3 for image properties, such as rounded corners, shadows and other effects.

1.5. Animated banner with CSS3

1.6. Loading panel in CSS3

1.7. 3D ribbon with CSS3

View demo or download CSS3 code files →

2. CSS3 menus, navigation and buttons

2.1. Apple.com Menu in CSS3

Tutorial for creating the famous Apple.com menu in CSS3.

2.2. Animated horizontal menu with CSS3

A simple tutorial that shows how to make an animated menu in CSS3 with different effects.

2.3. Animated vertical menu with CSS3

2.4. Animated buttons with CSS3

Great tutorial with 7 examples of animated creative buttons.

2.5. Creative animated menu with images using CSS3

In this lesson, the 10 examples presented are simply eye-opening. Such complex creative menus used to be created exclusively using JS. Impressive!

2.6. Circle Navigation Effect with CSS3

An unusual effect when hovering over a selected navigation item in the form of a circle with an image. Take note!

2.7. Dropdown Menu in CSS3

Tutorial to implement a simple dropdown menu with sublevels in CSS3.

2.8. CSS3 navigation with animated transitions

3. Various effects on CSS3

3.1. Animated tooltip in CSS3 without jQuery

Friends, hello everyone. Today we will continue creating banners in Google program Web Designer in HTML5 format, with 3D effect.

And this is understandable, banners created in html5 and css3 are displayed on any screen, both on computers, televisions, and mobile devices. The same cannot be said about flash banners.

In addition, these banners can be simply used and the banner will look great on any screen.

And given the fact that mobile devices are increasingly used to view Internet resources, this is very important.

I already described the main one and its placement on the site in the previous article. So today I’ll pay attention to creating a 3D effect and cyclic (repeat) settings. We will also look at several settings for “events”.

It is quite difficult to describe this entire process in detail, so I offer you a video tutorial. This will make it much easier to master the material. Also, download the archive with my banner project as a visual example.

Preparing to create a banner with a 3D effect.

The final look of the banner ultimately depends on the preparation. The Google Web Designer editor allows you to create realistic 3D effects and all this will be written in html code, you just need to assemble everything correctly in the visual editor.

To create a high-quality 3D effect, you need to first cut blanks in Photoshop, which will later need to be joined in Google Web Designer.

As an example, I prepared the following blanks:

I made these blanks in Photoshop, but there are many similar images on the Internet. You don’t have to strain yourself, but take ready-made options.

Note: If you are interested in the process of creating such blanks, write about it in the comments.

It is also important to think about the overall composition of the banner and the script. This determines how the banner will be perceived as a whole.

Creating a 3D object in Google Web Designer.

So, by analogy with the previous article, launch the editor and create a new project.

The 3D effect implies a composite image, that is, an image consisting of several pieces located in the desired projection.

These multiple images need to be combined either into a group or placed in a DIV block. And so and so will be correct. But, it’s more convenient for me to work with the DIV side.

Step 1: Create a DIV block.

So, to create a DIV block, in the left panel select "Tagging Tool (D)".

Be sure to assign an ID. And adjust the sizes using the section "Properties" in the right panel.

Now you need to select the block. To do this, in the left panel select "selection tool (V)" And double click left mouse button click on the frame of the DIV block. It will change color to red.

Step 2. Arranging images.

And now the most painstaking process begins. You need to expose all the elements of one single image.

I have the following items at my disposal:

- Upper side.

— Side (consists of three separate parts).

First, place the reverse (back) side of the image and align it to the center and top edge of the banner.

Add the front side in the same way. Align and shift along the Z axis.

Since the side width is 4px (pixels), I shifted the front and back sides along the Z axis by 2px and -2px. This will provide a gap between the images.

Note: see the screenshots for exact displacement numbers.

Next, add the side, all the parts separately. For ease of placement, use the tools "3D rotation of work area" And "Scale". They will help you accurately adjust all the details.

To begin with, I suggest that you line up all the images on one side, and then copy them and place them in a mirror projection on the other side.

The next step is to line up the upper left corner.

Now the central part of the side.

And the bottom corner on the left side.

Be sure to align all side elements at 90 0 along the Y axis.

Now you need to copy the desired layer and paste it again, renaming it and changing the location parameters, so we get the elements for the right side.

To do this, select an image in the bottom panel - press the key combination CTRL + C (copy) and paste the duplicate CTRL + V.

Let's start in the same way as the field side from top to bottom, but only for the right one.

Upper right cover.

I did not do the lower part, since it is not visible in the image.

The hardest work is over. Now you can start setting up the animation. As a visual demonstration, let's rotate the image.

Creating a rotation effect in Google Web Designer.

The first step is to exit the DIV block, which contains all the image elements. That is, we worked inside a block with specific images, and now we will need to work with all images simultaneously, managing the DIV block.

To begin, click on the DIV button in the bottom panel.

So, on the chalet of time clicking right button mouse, create two key frames. It should look like this:

The location of the original frame on the Y scale is set to -90 0 .

We set the first key frame (the second one) on the Y scale to 0 0 .

Set the second key frame (third in a row) to 90 0 on the Y scale.

You can check the results. To do this, click on the button Play.

True, our image will make only one revolution. In order for the image to rotate constantly or make several revolutions, you need to configure the cycling parameters.

Setting up cycling in Google Web Designer.

The program allows you to configure several cyclicity (repetition) options. This way you can set up a repeat for all banner elements or for each element separately.

Also, the cyclicity can be limited by the number of repetitions or made infinite.

On the bottom panel, next to each element there are symbols "Castle", "Eye", "Reverse Arrow".

So, to configure the cyclicity you need to click on the symbol "Reverse arrow". And choose either a limited number of repetitions or an endless option.

I chose to repeat the animation endlessly. Because in the future I want to configure "Events" so that the rotation will stop when the mouse is hovered and will continue after the cursor is removed.

Stops rotation when you hover the mouse over the banner.

First of all, we set a shortcut on the first key frame (the second in a row). To do this, right-click above the frame and select the menu item "Add Shortcut". Enter the name of the shortcut and press the Enter key.

And in the next step you select as a receiver « Page1". There will be no other options there.

And the final step, select the shortcut that you created at the initial stage.

Save events and check. The banner rotation will stop when you hover the mouse over the frame where the shortcut was made.

Resumption of rotation after moving the mouse cursor away.

To ensure that the rotation continues after moving the cursor to the side, set up another event.

It is configured similarly to the previous one, with only two differences.

The event is selected "Mouse"— « mouseout".

Event - mouse retraction

And as an action "Timeline" — « togglePlay".

Action - Continue

Now our banner with a 3D effect is ready. And you can come up with as many different effects as you like.

Just don’t forget to set an event for a mouse click and opening a link. The banner was not created for the sake of beauty, after all.

Initially, this process may seem complicated, but after a couple of banners, you won’t think so anymore.

That's all for me today, friends. I wish you all success, I look forward to your comments and see you in new articles and video tutorials.

Best regards, Maxim Zaitsev.

Thanks to the development of web technologies and modern browsers, we can create many effects without using Javascript. This has made life much easier for web developers. Because now we can create effects using pure CSS without using Javascript. Therefore, in this article I want to tell you about whether it is possible to create banners using pure CSS, what this requires, as well as the pros and cons of this approach.

CSS3 provides a wide range of possibilities, you just need to use them correctly. As an example, I would like to provide links to my past works “Characters in Pure CSS”:

First, I want to give examples of my CSS banners. You may have already seen them on the site, but you didn’t even know what and how they were created.

About the demo: Each example (banner) has a duration in seconds at the bottom, as well as an “Refresh” button, which starts displaying the banner from the beginning.

Banner #1 — "Individual training in website building":

I created this banner for about 2 days. Why so long? Because it took some time to adapt the banner (to make it rubber) when recalculating the coordinates. Currently, its size depends on the width of the parent block (which contains the CSS banner itself).

I created this banner in literally 2-2.5 hours. The only thing that slowed down the creation process here was the choice of icons. Because they had to be selected close to the theme of the banner.

This banner also stretches depending on the width of the block container in which it is located. It took approximately 1.5 hours to create.

These banners look very nice, but is it really that simple? Let's look at the pros and cons of this method of creating banners.

Advantages and disadvantages of CSS banners:

How to create a CSS banner?

1 Idea

First, you need to know exactly what animation the banner should have (what, where and from where it should move and where it should appear). You can take an A4 sheet and draw where each element will move and what should be on the banner.

After all, you can’t start creating a banner if you don’t know what it should be and how to function.

2 HTML structure

The next step is to create HTML markup so that elements can be moved (and animated for them). That is, you can’t do everything with one image that will move out to the right or left and then the animation is finished.

Typically there is one common block in which all the others are located. And in this general block we can manage the elements as we need.

3 CSS animation

The final step is to create animations for the blocks, as well as write styles for them, because some parts of the animation are hidden by default.

To create your own banner, you need to have a good grasp of the basics of CSS and HTML.

Learn basic CSS animation with this tutorial - .

Conclusion

All modern browsers support CSS3 properties, which means banners will be displayed correctly in such browsers. But with the help of JS plugins you can create CSS banners for older browsers. By learning the basics of CSS animation, you'll understand the banner creation process and will soon be creating your first pure CSS banner! 😉

Today we are going to create a banner using CSS3 animation.

Currently only Firefox and WebKit browsers support CSS animations, but we'll be looking at how we can make these banners work in other browsers (which I call 18th century browsers) as well. However, you shouldn't expect great support in all browsers (particularly IE 7 and below) when experimenting with modern CSS technologies.

So let's create animated banners!

Please note: To save space, all browser prefixes have been removed. See the source files to see all the CSS code. If you're not familiar with CSS animations, I highly recommendFirstlyread this.

HTML markup

First, we will create the banner structure at HTML help. At this point we need to think through how we want our animation to work - how it will affect the child and parent elements in the structure of our markup (I'll explain this below):