Glowing text in CSS
Hello student in this tutorial we will see that how to make glowing text in css
so let's break down this topic here .
1 . we taking a div or any tag, class, id for targeting text so here i am taking a id so first we will center of this element through position absolute like this
#text {
/* position center through position absolute*/
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
2. Again in this css we coding for text shadow like this through text-shadow carefully see of this code here and try in your code editer.
#text {
/* position center through position absolute*/
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
/* text glowing like this pay attention here */
text-shadow: 0 0 4px white, 0 0 4px red, 0 0 4px red,
0 0 4px red, 0 0 4px red, 0 0 4px red, 0 0 4px red;
/*you can adjust of this according to you font size */
font-size: 40px;
color: black;
}
here one this that you can change text-shadow pixel value according to your font-size and color you can also change of this value like px value and color .
text-shadow: 0 0 4px white, 0 0 4px red, 0 0 4px red,
0 0 4px red, 0 0 4px red, 0 0 4px red, 0 0 4px red;
/*you can adjust of this according to you font size */
font-size: 40px;
you can use of this code-source through copy and paste.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
}
#text {
/* position center through position absolute*/
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
/* text glowing like this pay attention here */
text-shadow: 0 0 4px white, 0 0 4px red, 0 0 4px red,
0 0 4px red, 0 0 4px red, 0 0 4px red, 0 0 4px red;
/*you can adjust of this according to you font size */
font-size: 40px;
color: black;
}
</style>
</head>
<body>
<div id="text">it is glowing text </div>
</body>
</html>
Comments
Post a Comment