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.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir