WordPress CSS Püf Noktaları: CSS Tipografi Maskesi, Klip Yolları ve Daha Fazlası

Ne zaman yeni bir WordPress web sitesi kursam, birkaç CSS hilesi öğreniyorum ve birkaçını sizinle paylaşmak istiyorum.

WordPress web siteleri oluşturduğumda iThemes Builder kullanıyorum. Size burada gösterdiğim tüm CSS püf noktaları ve püf noktaları, tema klasörünüzde sağlanan stil sayfalarında ve tüm Builder düzen modüllerinde kullanılabilir.

CSS Tipografi Maskesi

Adobe Photoshop veya Illustrator'a aşina iseniz, muhtemelen kırpma maskeleri hakkında bir iki şey biliyorsunuzdur. Bu CSS tekniği buna çok benziyor.

İlk önce biraz HTML işaretlemesine ihtiyacınız olacak.

 <div class="konteyner">
 <!-- arka planını kırpacağımız öğe -->
 <div class="kırpılmış">
 <h1>Dünya</h1>
 </div> 
</div>

Burada önemli olan “kırpılan” sınıftır.

iThemes Builder kullanıyorsanız, bunu Düzenler ve Görünümler'deki bir HTML modülüne ekleyebilirsiniz.

Şimdi CSS için. Daha önce de söylediğim gibi, "kırpılmış" başlığının etrafındaki sınıfa odaklandık. Bu, temanızın uygun stil sayfasına girecektir.

Metni maskelemek için bir resme ihtiyacınız olacak. Bu durumda benim <h2> "Dünya" ve ben orijinalim, bu yüzden bunu bir dünya görüntüsü ile maskelemeyi düşündüm.

 .kırpılmış {
arka plan: url(.../img/earth.jpg) tekrarsız merkez merkezi;
arka plan boyutu: kapak;
arka plan boyutu: %18;
renk: #fff;
metin hizalama: merkez;
dolgu 2em;
-webkit-metin-dolgu rengi: şeffaf;
-webkit-arka plan-klip: metin;
}

Burada istenen efekti elde etmek için iki -webkit etiketi kullanıyoruz.

 -webkit-metin-dolgu rengi: şeffaf;
-webkit-arka plan-klip: metin;

Bunlar aslında maskeli tip efektini yaratanlardır. -webkit- öneki, henüz W3C spesifikasyonları veya tüm web tarayıcıları tarafından resmi olarak uygulanmayan CSS özellikleri için kullanılır, ancak WebKit tarayıcılarında kullanılabilir.

Unutulmaması gereken bir şey: Arka plan boyutunda iki etikete sahip olmanıza gerek yoktur, ancak size boyutu "kapak" olarak ayarlama seçeneğiniz olduğunu göstermek istedim. Bu özel durumda, görüntüyü manuel olarak boyutlandırmak istedim. Her iki seçenek de iyi.

Ve vaalaa!

Grafik Tipografi

Yeterli tipografi alamıyor musunuz? Seni hissediyorum.

Tipografi, web tasarım topluluğunda popülaritesini artırıyor gibi görünüyor. Tasarımcılar daha çok içeriğe odaklanıyor ve onu web sitelerinde öne çıkarmanın yollarını araştırıyor. Bu nedenle yazı, iletişime ek olarak bir grafik öğesi olarak ortaya çıkıyor gibi görünüyor.

Bununla birlikte, bir türe nasıl grafik dokunuş ekleyeceğimize bir göz atalım.

Başlamak için HTML'miz var. Bir kez daha bu, bir HTML modülüne veya hatta metne özel bir widget modülüne yerleştirilebilir.

 <div class="konteyner">
     <h2>Grafik</h2>
</div> 

Oldukça basit. Biraz ilgi ekleme zamanı.

CSS:

 .container h2 {
 renk: #555;
 yazı tipi ailesi: 'Oswald', sans-serif;
 metin-dekorasyon: yok;
 metin dönüştürme: büyük harf;
 yazı tipi boyutu: 200 piksel;
 yazı tipi ağırlığı: 800;
 harf aralığı: -3px;
 satır yüksekliği: 1;
 metin gölgesi: #EDEDED 3px 2px 0;
 pozisyon: göreceli;
}

Şimdi sözde öğeyi ::after ekliyoruz. h2 üzerindeki konumun göreceli olduğuna dikkat edin, bu, sözde öğemizi mutlak konumlandırdığımızda gereklidir.

Ayrıca başlığımıza biraz metin gölgesi ekledik, ancak şu anda çok görünür değil.

 .container h2:sonra {
 içerik:"grafik";
 pozisyon: mutlak;
 sol: 10 piksel;
 üst: 10 piksel;
 arka plan resmi: -webkit-doğrusal-gradyan(sol üst, şeffaf %0, 
şeffaf %25, #555 %25, #555 %50, şeffaf %50, 
şeffaf %75, #555 %75);
 arka plan boyutu: 4px 4px;
 -webkit-arka plan-klip: metin;
 -webkit-metin-dolgu rengi: şeffaf;
 z-endeksi: -5;
 Ekran bloğu;
 metin gölgesi: yok;
 metin hizalama: merkez;
}

Şimdi buna sahibiz. Çok daha ilginç bir başlık.

Metin gölgesi, başlığı sözde öğeden ayırır ve bir kez daha birkaç CSS etiketi için webkit önekini kullanıyoruz.

Ne tür başlıklar oluşturabileceğinizi görmek için farklı yazı tipleri ve renklerle oynayın.

CSS ile Üçgen Oluşturmak

Belki partiye geç kaldım ve bunu herkes biliyor ama benim gibi zavallı, bilgisiz ruhlar olursa diye paylaşmak zorundayım.

Sık sık kendimi çeşitli nedenlerle bir ok (üçgen) kullanmak isterken buluyorum. Bu durumlarda Illustrator'da her zaman bir üçgen oluşturur ve bunu CSS'imde arka plan görüntüsü olarak kullanırdım.

Daha iyi bir yol var.

Bir meydanımız var.


width: 200px;
height: 200px;
border-left: solid 20px #f00;
border-right: solid 20px #ff0;
border-top: solid 20px #0f0;
border-bottom: solid 20px #00f;


Kenarların bir açıyla buluştuğuna dikkat edin.

Şimdi karenin genişliğini ve yüksekliğini sıfıra ayarlayın.


width: 0px;
height: 0px;
background: transparent;


Artık dört farklı üçgeniniz var ve yapmanız gereken tek şey üçgenin olması gereken yönü seçmek ve diğer kenarlık renklerini şeffaf olarak ayarlamak.


border-left: solid 20px transparent;
border-right: solid 20px transparent;
border-top: solid 20px transparent;
border-bottom: solid 20px #00f;


Boom. Üçgen.

 .üçgen {
genişlik: 0;
yükseklik: 0;
arka plan: şeffaf;
sol kenarlık: düz 20 piksel şeffaf;
sağ kenarlık: düz 20 piksel şeffaf;
üst kenarlık: düz 20 piksel şeffaf;
kenarlık-alt: düz 20 piksel #00f;
}

“Kutunun Dışında” Fotoğrafları Kırmak

Fotoğraflar, herhangi bir web sitesine harika bir ektir. Bir görsel ekleyerek, mesajınıza biraz daha canlılık veren ikinci bir iletişim katmanı eklenir.

Fotoğrafların çoğu dikdörtgen. Bir fotoğrafın şeklini değiştirmek için klip yolunun nasıl kullanılacağına bakacağız.

Bu fotoğrafı altıgen haline getirelim.

Fotoğrafımın bir kare olduğuna dikkat edin. Sağlanan çokgen noktalarını kullanırsanız, altıgeninizi çarpıtmamak için kare bir fotoğraf da kullanmak isteyeceksiniz.

HTML:

 <svg class="klip-svg">
 <defs>
 <clipPath clipPathUnits="objectBoundingBox">
 <poligon point="0.5 0, 1 0.25, 1 0.75, 0.5 1, 0 0.75, 0 0.25" />
 </clipPath>
 </defs>
</svg>

<div class="polygon-each-img-wrap">
 <img src="https://saylor.dev.ithemes.com/wp-content/uploads/2017/02/
example-img.png" class="çokgen-klip-altıgen">
</div>

Şimdi CSS:

 .clip-svg {
 genişlik: 0;
 yükseklik: 0;
 }
 
 resim {
 maksimum genişlik: %100;
 yükseklik: otomatik;
 }

 .poligon-klip-altıgen {
 -webkit-clip-path: çokgen (%50 %0, %100 %25, %100 %75, %50 %100, 
%0 %75, %0 %25);
 klip yolu: çokgen (%50 %0, %100 %25, %100 %75, %50 %100, %0 %75,
 %0 %25);
 -webkit-klip-yolu: url("#poligon-klip-altıgen");
 klip yolu: url("#poligon-klip-altıgen");
 }

CSS'nin clip-path özelliği, farklı değerleri değiştirerek şeyleri farklı şekilde şekillendirmenize olanak tanır. Altıgenler, sekizgenler, yıldızlar – kutunun dışında düşünün.

Boom. Altıgen.

Kendinize çeşitli şekiller için farklı değerleri nasıl bulacağınızı soruyor olabilirsiniz ve Clippy size yardımcı oldu. Yine de isterseniz her şeyi manuel olarak ayarlayabilirsiniz.

clip-path özelliğinin ayrıntılı açıklaması için CSS Püf Noktalarına bakın.

Hatırlatma: Yapabilmeniz Yapmanız Gerektiği anlamına gelmez

CSS'nin hayatıma çok fazla neşe getirdiğini söylemekten hiç utanmıyorum. Yapabileceği her şeyi keşfetmek, Game of Thrones sezon finalinden daha iyidir – Scratch that. Çıldırmayalım.

Yine de, daha gelişmiş CSS benzeri animasyonlarda sağduyu kullanmak gerekir. Kendinizi kaptırmak ve neyin önemli olduğunu gözden kaçırmak kolaydır – net ve kullanıcı dostu içerik sunmaya odaklanan gösterişli bir web sitesi oluşturmak.

Unutmayın, yapabiliyor olmanız, yapmanız gerektiği anlamına gelmez. Bazı CSS animasyonları bir siteye dağınıklık katıyorsa ve mesaj için hiçbir şey yapmıyorsa, onu kullanmayın.

Ayrıntılara karşı hız söz konusu olduğunda dikkatli olun. Sizi temin ederim, kullanıcıların çoğu "özel efektler" yerine hızı tercih ediyor.