Bu yazımızda web sitelerinizde kullanabileceğiniz, tasarımınıza renk katabilecek bir örnek yapacağız. Yazılarımıza HTML ve Css ile neon efekti vereceğiz.
HTML ve CSS ile neon efekti vermek yalnızca 3 adımdan oluşur. Şimdi sırayla bu adımları inceleyelim.
Adım 1 : Neon Efekti Vereceğimiz Yazı
İlk adımda HTML sayfamıza neon efekti vereceğimiz yazıyı yazıyoruz. Bunu herhangi bir metin etiketi içerisinde yazabilirsiniz .(h1, h2, p …)
<h1>Evrensel <br> Kod</h1>Burada h1 etiketi içerisinde Evrensel Kod yazdık. Kod yazısının bir alt satırda olması için br etiketini kullandık.
Adım 2 : Arka Plan
Metinlerinize neon efekti veriyorsanız muhtemelen arka planınız koyu bir renkte olsun istersiniz. Böylelikle daha şık ve belirgin durur. Tabi istemiyorsanız bu adımı geçebilirsiniz. İkinci adımda CSS ile sayfanın arka plan rengini değiştiriyoruz.
body {
background-color: black;
}Ben sayfamda sadece yazıyı kullanacağım için body yani sayfanın tamamının arka planını siyah yaptım. Yine siz başka bir alanda kullanacaksanız oranın arka planını değiştirebilirsiniz. (div, footer …)
Adım 3 : Efekti Verme
Artık üçüncü ve sonra adımımız olan neon efekti verme adımındayız. Yine CSS ile metine renk, konum, boyut ve gölge gibi stilleri veriyoruz. Burada metine neon efektini verecek metinin rengi ve gölge efekti. Hemen görelim.
h1{
color: #fff;
text-align: center;
position: relative;
font-family: sans-serif;
font-size: 125px;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 15px #0073e6,
0 0 20px #0073e6,
0 0 25px #0073e6,
0 0 30px #0073e6,
0 0 35px #0073e6;
}Yukarıda belirttiğimiz gibi burada neon efektini veren color ve text-shadow etiketleridir. Burada neon mavi renkte. Sizler daha farklı bir renkte yapmak istiyorsanız text-shadow içerisindeki gölge renklerini değiştirmeniz yeterli olacaktır. Sonucu görelim.
Yazılarımıza neon efekti vermek bu kadar basit bir işlem. Sizlerde kendiniz deneyebilirsiniz. Son olarak kodun tam halini görelim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Evrensel Kod - HTML ve CSS ile Neon Efekti</title>
<style>
body {
background-color: black;
}
h1{
color: #fff;
text-align: center;
position: relative;
font-family: sans-serif;
font-size: 125px;
top: 200;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 15px #0073e6,
0 0 20px #0073e6,
0 0 25px #0073e6,
0 0 30px #0073e6,
0 0 35px #0073e6;
}
</style>
</head>
<body>
<h1>Evrensel <br> Kod</h1>
</body>
</html>Bu yazımızda HTML ve CSS ile neon efekti nasıl yapılır sorusunu cevapladık. Basit ama web sitenize şık bir hava katacaktır. Sizlerde kolaylıkla web sitelerinizde kullanabilirsiniz. Benzeri HTML ve CSS örneklerimizi görmek için buraya tıklayabilirsiniz.