CSS ile Oyulmuş Yazı Efekti

Bildiğiniz gibi CSS3’in transparan yazı rengi, geçiş efektleri ve gölgelendirmeleri sayesinde birçok tasarım hazırlamak mümkün. Bu yazımda ise yine aynı elementleri kullanarak farklı bir yazı tipi oluşturacağız.

Yapımı

Aşağıdaki kodları sayfanızın ilgili alanına ekleyin.

HTML Kodları

<h1>adobewordpress.com</h1>

CSS Kodları


h1 {
font:bold 90px Tahoma;
color:transparent;
text-stroke:3px rgba(0,0,0,0.2);
}

h1:hover {
text-stroke:0;
color: transparent;
background-color: rgba(82,96,117,0.5);
-webkit-background-clip: text;
text-shadow: rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
transition: text-shadow .1s ease-out, background-color .2s ease-out;
}

h1:focus {
outline: none;
}