Css animation is light, fast to load and does not require you to learn a new language.
Add life to your website by adding animated banners with html and css animation and transitions.
Or just learn out creating animated banners for the sake of making some quick cash on fiverr or elance or Odesk.
We will cover the followings :
lets over view the five banners we are going to recreate in our course and how the course is structured
we need to have a basic template that we can derive our banners from with out doing every thing from scratch each time we start on a new banner, this is what we do in this video
This banner is divided in three section which we are going to do using, 3 div elements given a class of "section", later with css we can target this class and add a 30% width to the divs and float them left of each other which will make them align holizontally.
As in the original banner, we are going to add a hover effect to each section of the banner, so when a user moves there cursor over one section it pops out or scales up.
In this lesson we look at general animation in other software programs particularly photoshop. we look at what is needed to make any kind of animation in any program. a canvas and a timeline
for browser compatibility, you can use this document to check for browser vendor prefixies to make sure you animation works and behaves the same in all browsers.
why do we add vendor prefixes
we look at how to apply keyframe like animation to our banner using css animation
adding final touches to banner1
In this lesson we are going to setup the required html and css files for banner2
working on banner 2
in this lecture we look at adding a gradient and skew edge effect to our banner
in this lesson we add a hover transition to create a smooth animation
adding css animation to all elements in the banner
linking the different parts of the banner to different pages or websites using html anchor tags
looking at what we need to do for banner 3, design and animation
preparing our template to cater for banner 3 and updating the style sheet file.
In this video let us add a hover effect to give feed back to the users when they interact with the banner
In this lesson, we find out what css properties and css rules we need to use to make our elements rotate 360 degrees
For this lesson we shall use css transitions to make our animation
looking at what we need to prepare for banner 4
adding the final touches to banner 4
It has been a great journey hope you have learnt alot from this course, and hope i can see your banner flooding the interent
Hi ,My name is ismail. I am a graphics designer and web developer/designer .
I have equal passion for both Programming and Designing though sometimes i find my self doing more programming than designing, its easy to dive into just fire up any text editor and you are good to go.
i also make free tutorials on youtube, about web design, web development, making money online and other awesome things to talk about.
I also do some 3d modeling and animation though i haven't done much of that lately as am concentrating alot on web development now days, when i get time i will make a course about 3d modeling and animation in either blender or cinema 4d.
i also love sharing knowledge as this is how i know what i know now.