Photoshop'ta bir görüntüyü maskelemek için metin kullanmaya alışkınsınızdır; metninize biraz doku ya da bir görüntü arka planı eklemenin bilinen en iyi yoludur. Daha sonra bu metni web sitenizde bir resim olarak kullanabilirsiniz. Ancak, aynı etkiyi sadece HTML ve CSS kullanarak uygulayabilmeniz harika olmaz mıydı? İyi haber, sen yapabilirsin!

CSS, Photoshop'ta oluşturduğunuz etkilere benzer efektler oluşturmak için kullanabileceğiniz arka plan klibi ve maske resmi gibi özellikleri tanıttı. Bunun da ötesinde, bir görüntüyü metinle kırpmak için SVG'yi de kullanabilirsiniz.

Bugün, seçeneklere bakacağız ve hatta bazı basit animasyonlara atlayacağız. Kodla birlikte takip etmek isterseniz dosyaları buradan indirin.

Tarayıcı desteği

Tahmin edilebileceği gibi, kullanacağımız bazı özellikler evrensel olarak desteklenmez, yani IE ve Firefox gibi tarayıcılarda başarısız olurlar. İyi haber, bu özelliklerin sessizce başarısız olacağıdır. Bu teknikler, ilerlemeci bir geliştirmedir ve sitelerde kullanmak güzeldir.

Arka plan-klip kullanarak metin kırpma

Bakacağımız ilk seçenek arka plan klibi özelliğidir. Bu özellik, arka planın sınırlara uzatılıp uzatılmayacağını belirler. Tanımlanmış bir elemanın metnini bir görüntüyü kırpmasına izin verir.

HTML

İşaretlememiz sadece bgClip sınıfında bir h1'dir:

Clip Text

Şimdi sihiri CSS ile ekleyelim…

CSS

Metnimize, gece gökyüzünün bir görüntüsüyle doku ekleyeceğiz. Ayrıca, yazı tipi yumuşatmayı kullanarak metnin sorunsuz bir şekilde işlendiğinden emin olacağız . Bunun çalışması için metin renginin şeffaf olması gerektiğini unutmayın, bu yüzden de metin dolgu rengini de kullanacağız : şeffaf.

.bgClip {background:url('../images/clouds.jpg');background-repeat:repeat-x;background-position:0 0;font-size:200px;text-transform:uppercase;text-align:center;font-family:'Luckiest Guy';color:transparent;-webkit-font-smoothing:antialiased;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0;

Şimdi, arka planı daha cazip hale getirmek için küçük bir animasyon eklemek istiyoruz:

    -webkit-animation:BackgroundAnimated 15s linear infinite;-moz-animation:BackgroundAnimated 15s linear infinite;-ms-animation:BackgroundAnimated 15s linear infinite;-o-animation:BackgroundAnimated 15s linear infinite;animation:BackgroundAnimated 15s linear infinite;}@keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-webkit-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-ms-keyframes BackgroundAnimated {<     from {background-position:0 0}to {background-position:100% 0}}@-moz-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}

İşte sonuç:

Maske resmi kullanarak metin maskeleme

Bakacağımız son teknik, metni maske-görüntü ile tekstüre etmek . Bu özelliğin temel işlevi, opaklığa bağlı olarak görünen metnin alanını kırpmasıdır.

HTML

İhtiyacımız olan tek şey bir div içinde sarılmış bir h1 elementi:

Mask Text

CSS

Görüntüyü metinle maskelemek için, resmi belirtmek için -webkit-mask-resmini kullanacağız ve iyi bir ölçü için güzel bir metin gölgesi ekleyeceğiz. Sonunda, tüm metni fareyle açıklamak için pürüzsüz bir vurgulu efekti elde etmek istiyorum (sadece yapabildiğimiz için):

#maskText h1 {font-size: 200px;font-family: 'Lilita One', sans-serif;color: #ffe400;text-shadow: 7px 7px 0px #34495e;text-transform: uppercase;text-align: center;margin: 0;display: block;-webkit-mask-image: url('../images/texture.png');-webkit-transition:all 2s ease;-moz-transition:all 2s ease;-o-transition:all 2s ease;transition:all 2s ease;}#maskText h1:hover{-webkit-mask-image: url('../images/texture-hover.png');cursor: pointer;color: #ffe400;}

İşte sonuç: