Timeline designs are used for telling stories and explaining the process. Specifically, these are used for giving details of event, agenda, or to highlight important points. In this lesson, you will learn to create a timeline. Starting with the HTML layout, sections are created to hold the different elements. The...
Color changing effect is quite in use when vibrant pages are designed. It is an animation property of CSS that can be applied to text, color, background-color, height, or weight for making awsome designs. In this lesson you will learn to create color changing square. Firstly, create a HTML layout...
A natural reflex in humans is that their attention gets concentrated easily to the moving objects online. This is an advantage to the designer to add hover shades in the important areas of the website. So, it adds interface beauty while increasing the visitor's time on the site. In this...
Simple square boxes are easy to create and are found on almost every website. But as a designer are you really happy in creating the monotonous designs on the website. If not, then, this tutorial is for all the designers who are looking for some innovative designs. The polygon shaped...
Parallax scrolling is an animation technique in which background images move slower than the images in the foreground, creating an illusion of depth in an otherwise 2D scene. This lesson will help you to learn to create a moon parallax landscape. HTML markup is the first thing that one needs to...
This lesson will teach you to design purely CSS animated weather icons. It will be quite interesting and fun to create the icons of weather in which we enjoy our life. So, let us begin with creating simple HTML structure. Since today we are going to create a sun, cloud,...
Images are an essential part of every site, which not only builds trust but also makes the site beautiful. Nowadays it is quite easy to create different frames for images using HTML and CSS, without increasing the image size. This tutorial will help you to learn about one innovative frame....
Chessboard Vacuum is an animated chessboard in which every square rotates to some degree and collapse. HTML markup is created by keeping the real view of the chessboard in mind. It is, therefore, container class is created to act as the black colored base of the chessboard squares. Another, wrap...
Boxes are part of every website and considered as a user-friendly way to display more information in a limited space. In this tutorial, you will get to know about ways to create boxes that are designed keeping the appropriate contrast ratio. To commence with the design create HTML layout and...
Toggle switch or On OFF Switch is beneficial in updating preferences, settings and different type of information. It is more specifically used when the user decides between two opposing situations. In this lesson you will learn to create a toggle switch using simple and minimal HTML and CSS code. Foremostly,...