How to Create Beautiful Glowing Social Media Icons Using CSS
Beautiful glowing social media icons can be created by using CSS. Hmmm, this tutorial is for teaching that.
Hello friends, today I will share with you how to create beautiful glowing social media icons using CSS. And you are getting the source code as a gift below. You can make some changes through source code customization. This will completely depend on you. And if you are new then you can learn it clearly through today's tutorial.
Let's learn then. I gave you the source code as a gift before teaching. I have made full explanation below the source code. You can see the explanation below.
🍃
Hopefully, you know about the common structure of HTML files. If you don't know, you can tell me in the comment box. I will write tutorials or articles or content on that topic.
Using CSS to create beautiful glowing social media icons. First, we need to import the CSS social icon.
For that we can import it between the style tag or as a rail in the head tag. Below are two examples –
1. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
It must be given in the head tag. or
2. @import url(' https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
must be imported into the style tag.
Now we will create the HTML -
<body><div class="container"><i class="fa fa-apple" id="apple"></i><i class="fa fa-twitter" id="twitter"></i ><i class="fa fa-github-square github" id="github"></i><i class="fa fa-facebook-square" id="facebook"></i></div>
</body>
Must be included in the body tag.
Hopefully you know how to add CSS to HTML. If you don't know, let me explain - a css has to be placed inside a class to connect to html. For example: <div class="css"></div>
Having understood this, we will now create the CSS-
*{margin: 0;padding: 0;} body {height: 100vh;width: 100vw;background: #18191f;}.container {display: flex;justify-content: center;align-items: center;height: 100vh; width: 100vw;}#apple,#twitter,#github,#facebook {font-size: 8em;background-color: #18191f;color: #fff;box-shadow: 2px 2px 2px #00000080, 10px 1px 12px #00000080 ,2px 2px 10px #00000080, 2px 2px 3px #00000080, inset 2px 2px 10px #00000080,inset 2px 2px 10px #00000080, inset 2px 2px 10px #00000080,inset 2px 2px 10px #00000080 border-radius-padding: 1px 1px; 19px;margin: 0 40px;animation: animate 3s linear infinite;text-shadow: 0 0 50px red, 0 0 100px red, 0 0 150px red,0 0 200px red;}#twitter {animation-delay: 0.3s;} #facebook {animation-delay: 0.7s;}#github {animation-delay: 0.1s;}@keyframes animate {from {filter: hue-rotate(0deg);}to {filter: hue-rotate(360deg);} }
Last words:
If you can complete the task correctly. Then using this source code you can flash social icons.
My Talk:
Thank you for reading this blog. Assalamu Alaikum! I am Sheikh Zubayer. I want to say something. In fact I have written this article or content or blog by taking a lot of pains, thinking, gaining knowledge about every topic and spending a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. However, if there is any problem, let me know in the comment box. I will try to answer your question properly. Hope it will be useful. I didn't write anything like hope in vain I believe it.
🍃
My Talk:
Thank you for reading this blog.
Hi, Assalamualaikum! I am Sheikh Jubayer. I want to say something. Actually I have written this article or content or blog with a lot of difficulty, thinking and taking a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. Hope you benefited. However, if there is any problem, leave a comment. I will try to answer your question properly. Thank you!
0 Comments