- 2.5 hours on-demand video
- 1 downloadable resource
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- Make your web designs stand out by learning the most important visual aspects of CSS3
- Leverage CSS3 libraries to integrate gradients and patterns into your designs
- Control and manipulate transformations of elements from 2D to 3D using scale, rotate, and the translate methods
- Create, integrate, deploy, and animate SVG into our HTML5 application to enhance its look
- Work with the Canvas 2D API to create and animate the created elements with Canvas
- Enhance the user experience using dynamic visualizations
Modern designs demand gentle touches to make the design cleaner. Historically, this was often found in the corners of elements instead of sharp corners that were created by controlling the softness of the corners. We help create designs that are cleaner and more modern. Until CSS3, this was done using images, which bloated up the site with extra images and scripts. In CSS3, we have a new property called border-radius that enables us to do exactly this with ease.
One of the coolest effects that are around is shadows. Until CSS3, it was really hard to integrate shadows, as they involved using images and/or third-party tools such as Adobe Flash. With the help of CSS3, it is really easy for us to integrate shadows quickly and efficiently.
Transforms in CSS are really easy. All that you need to really know about is the transform command and the methods that you can use to control and manipulate the transformation.
Before we learn how to integrate SVG into an HTML document, we need to know the basics of how to work with SVG.
Canvas is new, and with it, some older browsers will not support the full features. Although we won't worry about the overall experience of browsers that don't support canvas in this title, we want to show you the steps involved in figuring out whether the browser supports a feature or not.
In the last video, we started to store animations that were not yet ready to trigger. In this video, we will continue going down that path by going into the current animation logic and asking it to update us when it's done using a callback. Once we have this logic in place, we have everything that we need to create an animation engine.
So far, we have created all the animations on our own without the help of an external library. Although we used jQuery, we ignored the fact that jQuery provides a few very helpful animation methods. We will learn the foundations of good animation and see it in action by using the jQuery library animations.
By the end of the course, you will be fully armed to create stunning web visualizations to integrate it into your workflow.
About The Author
Ben Fhala discovered his passion for data visualization while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school, 02geekcom, and an Adobe ACP. He enjoys spending most of his time learning and teaching, and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world.
He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.
- If you are a web developer who wants to keep up with the fast-paced modern web and improve your web designing skills to create stunning animations, this course is a must!