CSS ile Anaglifik Yazı Efekti Oluşturmak

Bu yazı 2 ay 10 gün önce yayınlanmış olduğundan güncelliğini yitirmiş veya içeriğindeki bilgilerin geçerliliği kaybolmuş olabilir. Herhangi bir yanlış anlaşılmadan bu blog sorumlu değildir.

Anaglifik dendiği zaman biraz yabancı gelebilir ama bildiğimiz gölge efekti gibi bir şey. Daha ayrıntılı bilgiyi Google‘dan alabilirsiniz. Neyse ben anlatıma geçeyim.

Öncelikle kesinlikle çok kolay bir efekt olduğundan bahsetmeliyim. Verdiğim kodları doğru bir şekilde kaydederseniz yapımı oldukça basit. Ve istenilen her yerde kullanılabilir ama bence, blogunuzun üst (header) kısmında imaj değil de, yalnızca bir yazı efekti olmasını istiyorsanız, tam da aradığınız şey bu.

Öncelikle, aşağıdaki kodu HTML sayfamıza yazıyoruz. Oldukça basit, yalnızca h1 etiketini kullanarak yazı efektini vereceğimiz metni belirliyoruz:

<h1>Merhaba!</h1>

Daha sonra aşağıdaki kodu da CSS dosyamıza ekliyoruz. Ama after kısmındaki metinin, HTML bölümünde belirlediğimiz metin ile aynı olmasına dikkat ediyoruz. Mesela, örnek olarak ben Merhaba! yazdım. Yani her iki dosya içinde de, aynı metni girmeliyiz ki efekti doğru bir şekilde kullanabilelim.

h1 {
	display: inline;
	position: relative;
	font: 100px Helvetica, Sans-Serif;
	letter-spacing: -5px;
	color: rgba(0,0,255,0.5); 
}
 
h1:after {
	content: "Merhaba!";
	position: absolute; left: 10px; top: 5px;
	color: rgba(255,0,0,0.5);   
}

İşte bu kadar, artık anaglifik yazı efektimizi oluşturduk. Ayrıca ben bir örneğini sizlerle paylaşayım. Zor geldiyse kaynak kodlarını kopyalayabilirsiniz.

(k: Line25)

Yazıyı Paylaşın: