CSS Neon Effect

CSS Neon Effect.Today in this blog, we gonna learn about CSS basic neon effect tutorial for Beginners.

CSS Neon Effect

Hi Friends!

Today in this blog, we gonna learn about CSS basic neon effect tutorial for Beginners. it's made by using HTML and CSS. Neon Effects are one of the best and most attractive parts of modern websites. In this blog, I will give my video tutorial and source codes to download. if you have any doubts ask me in the comment section.

HTML file

[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css neon effect</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<section id="neon">
<span class="neonhead">NEON EFFECT</span>
<div id="images">
<img src="Web design pictures/images/facebook.png" class="img" id="img1">
<img src="Web design pictures/images/instagram.png" class="img" id="img2">
<img src="Web design pictures/images/twitter.png" class="img" id="img3">
<img src="Web design pictures/images/linkedin.png" class="img" id="img4">
</div>
</section>
</body>
</html>

]

You can copy this HTML file. and paste into your HTML file. that is the main thing of our websites. and don't forget to save the file with an extension. HTML . This extension is more important to creating a website page.

CSS file

[
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #494949FF;
}
#neon{
display: flex;
flex-direction: column;
position: relative;
align-items: center;
margin: auto;
top: 200px;
height: 300px;
width: 700px;
border: 5px solid aqua;
box-shadow: 1px 1px 20px black;
border-radius: 10px;
padding-top: 20px;
}
#images{
display: flex;
position: absolute;
padding-bottom: 10px;
margin-bottom: 50px;
bottom: 0px;
}
.img{
margin: 0 50px;
}
#img1,#img2,#img3,#img4{
padding: 10px;
}
#img1{
background-color: dodgerblue;
border-radius: 10px;
box-shadow: 1px 1px 10px blue,0px 0px 20px blue;
}
#img2{
background-color: deeppink;
border-radius: 10px;
box-shadow: 1px 1px 10px pink,0px 0px 20px pink;
}
#img3{
background-color: lightgreen;
border-radius: 10px;
box-shadow: 1px 1px 10px greenyellow,0px 0px 20px greenyellow;
}
#img4{
background-color: coral;
border-radius: 10px;
box-shadow: 1px 1px 10px orange,0px 0px 20px orange;
}
.neonhead{
position: relative;
font-size: 60px;
font-family: sans-serif;
font-weight: bold;
text-shadow: 4px 2px 10px aquamarine,0px 0px 20px aquamarine;
animation-name: colour;
animation-delay: 1s;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
cursor: pointer;
}
@keyframes colour{
0%{filter: hue-rotate(0deg);}
100%{filter: hue-rotate(360deg);}
}
]

Secondly, you can copy this CSS file. and past into your CSS file. and remember the file extension called. CSS. This will you help to design your webpage. If you want more clarity on this topic you can watch my video tutorial and If you have any doubt ask me in the comment section.

Video Tutorial

Watch this video fully for your knowledge and repeat the code for your practice and you will learn better. this effect is important. so, I will give you Source Code. you can download it.

[Download Source Code ##download##]

Recommended Posts