QUICK TIP - Create A Smiley Loading Effect Using Only CSS

0 7,013
This is a great effect to create an effective type of content loading. You just need to copy HTML and CSS to do the trick. As a developer or beginner of website development, you can use CSS to create many creative effects for making your website more attractive. Normally, you can create any effect for your which base on two basic things including HTML & CSS. Besides, you can make it more cool by using JavaScript which is flexible tool to design as your thinking. In addition, you can improve your skill by learning some free courses on this website. This practical tutorials will help you to understand clearly about HTML & CSS and its relationship to build your website or effects. Moreover, this tutorial will explain step by step how it works.

Introduction

Okay, here we go to the first step, you can imagine how to build a house, HTML likes building the structure of the house, and CSS likes a decoration tasks for the house. Therefore, our task is build a house with a beautiful decoration. Besides, This task is similar with this post that we have already present to you.  

HTML

HTML on this task, there are some main tags that you need to know are div and class. Div is defined as a block of text and class name (“right-wrapper”) is an element to add more properties for div such as colour, size, effects, motions… The block of code below will help us to build the structure.

CSS

Base on class name of each div tag, CSS are code line below to add more properties for div tag. For example, class name “right-wrapper” will have 50px margin for both top and bottom, whereas left-right will be automatic by the same value. Text-align will be center. In the same way to explain, you can go with other class names.  

DEMO

Conclusion

Up to this step, we hope you can achieve this effect, successfully. This task is so simple, but it can help you understand how build an effect via using HTML & CSS. Now, you can understand why HTML & CSS always stay together via their relationship. Enjoy coding for fun! Please like, share & subscribe for us! Thanks.

You may also like

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

Language:English