CSS ile “Glowing Text” Efekti
Herkese selam, bu kısa yazımda lafı çok uzatmadan CSS ile Glowing Text efekti yapımını göstermek istiyorum. Kodumuzu yazdığımızda sonuç bu şekilde olacak:
Yazıyı okumanızı önersem de eğer zamanınız yoksa ve direkt koda ulaşmak istiyorsanız oluşturduğum https://github.com/oynozan/css-glowing-text Github Repository’sinden kodlara ulaşabilirsiniz.
1) Önce HTML kodumuzu yazalım
CSS’e atlamadan önce HTML iskeletimizi oluşturalım.
<html> <head> <meta charset="utf-8" /> <title>Glowing Text Effect</title> </head> <body> <div class="container"> <h1 class="text">KODLAYAN.COM</h1> </div> </body> </html>
Önce bir “container” oluşturduk, daha sonra içerisine <h1> tag’i ile yazı başlığımızı koyduk. Şimdi ise yazımıza Glow efekti vermek için CSS kodu yazmamız gerekiyor.
2) CSS kodumuzu yazalım
Yazımıza Glow efekti vermek için text-shadow isimli bir CSS property’si kullanmamız gerekiyor. Glow efektini oluşturmanın tek olayı da bu özelliği kullanmak aslında. Kendisi değer olarak X ve Y offset değerlerini, blur seviyesini ve gölge rengini alıyor. Daha ayrıntılı bilgiye https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow dokümanından da ulaşabilirsiniz. Şimdi kalan kodumuzu da yazalım.
body {
margin:0;
background-color:#1c1c1c;
}
.container {
display:flex;
justify-content:center;
align-items:center;
width:100vw;
height:100vh;
}
.text {
font-family:sans-serif;
color:#fff;
margin:0;
font-size:100px;
text-shadow: 0 0 10px #2fc000, 0 0 15px #2fc000, 0 0 23px #2daf02;
}CSS Kodumuz da bu şekilde. Şimdi bunu HTML dosyamıza eklersek son durum şu şekilde oluyır:
<html>
<head>
<meta charset="utf-8" />
<title>Glowing Text Effect</title>
<style>
body {
margin:0;
background-color:#1c1c1c;
}
.container {
display:flex;
justify-content:center;
align-items:center;
width:100vw;
height:100vh;
}
.text {
font-family:sans-serif;
color:#fff;
margin:0;
font-size:100px;
text-shadow: 0 0 10px #2fc000, 0 0 15px #2fc000, 0 0 23px #2daf02;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text">KODLAYAN.COM</h1>
</div>
</body>
</html>İşte yazılarda Glow efekti oluşturmak bu kadar kolay! Okuduğunuz için teşekkürler.