10 (Daha fazla) Muhtemelen ihmal ettiğiniz CSS Püf Noktaları

Web geliştiricilerin belirli sonuçları elde etmek için kullanabilecekleri pek çok CSS parçacığı var ve ardından içeriği dikey olarak hizalamak gibi şeyler için kullanabileceğiniz CSS hileleri var. CSS sürekli gelişen bir varlık olarak, tekrar tekrar keşfedilmesi eğlenceli olan havalı CSS numaralarına rastlıyoruz.

Bugünün yayınında, sizi tanıtacağım Bilemeyeceğiniz 10 CSS özelliği ve püf noktası.

1. Dikey Olarak Yaz

Adında bir CSS özelliği var yazma modu bu üç değerden birini kabul eder; Yatay-tb, Dikey-r ve Dikey-lr.

Yatay-tb Varsayılandır ve bir öğede tipik soldan sağa yatay metin akışına neden olur.

dikey-* Ancak, değerler dikey blok akışı içindir ve metnin tarayıcılar tarafından yukarıdan aşağıya yazılmasına neden olur. İçinde Dikey-r, öncekilerin soluna yeni satırlar eklenir veya Dikey-lr.

Bu yararlı Çince ve Japonca gibi dilleri görüntüleme tipik olarak yukarıdan aşağıya yazılır ve aynı zamanda, tablo başlıklarında olduğu gibi yatay alanı kurtarmak için metni dikey olarak görüntülemek istediğinizde.

Not: Tek tek harflerin yönlerini kontrol etmek istiyorsanız, metin yönünü istediğiniz gibi dik veya yana döndürerek kullanabilirsiniz..

 -webkit yazma modu: dikey-rl; -ms-yazma modu: tb-rl; yazma modu: dikey-rl; 

2. Yeniden Renk Değeri

Anahtar kelime currentcolor değerini taşır renk özellik ve renk değerlerini kabul eden diğer özelliklerde kullanılabilir. arka fon.

div background: linear-gradyan (90deg, currentColor% 50, siyah% 50);… color: # FFD700; / * currentColor, # FFD700'dir * / 

3. Karışım Arka Planlar

Bir öğe birden fazla arka plana sahip olabilir (arka plan rengi ve birden çok arka plan görüntüsü). Arka plan-harman mod verilen harmanlama moduna göre hepsini bir araya getirir. Şu anda toplam 16 karışım modu var.

arka plan karışımı modu: fark; 

4. Karışım Elemanları

mix-blend-mode, çakışan öğelerin içeriğini ve arka planını harmanlar. Firefox’un yaptığı gibi, Chrome tüm modları desteklemiyor gibi görünüyor.

karışım-harmanlama modu: renk; 

İki element aldım, bir img gül ve bir görüntü gösteren karış grafik arka plan ile, üst üste yığılmış ve birkaç karışım-harmanlama modu uygulanmış.

5. İşaretçi Olaylarını Yoksay

Tek bir öznitelik kullanarak, herhangi bir pointer olayına kayıtsız bir öğe oluşturabilirsiniz. işaretçi olaylar. Vererek işaretçi olaylar değeri Yok Bir elementte, bu, pointer olaylarına hedef olmasını engeller. IE11 + desteği dahil.

Bir sonraki demoda, üst üste yığılmış iki görüntünün altında bir onay kutusu var. Her iki görüntü taşımak pointer-events: yok, bize altında bulunan onay kutularını tıklatmamıza izin veriyor. Onay kutusunun işaretli durumuna bağlı olarak, diğer görüntü gizlenirken istenen görüntü gösterilir..

6. Split Kutuları Süsleyin

Tipik olarak, bir kutu bölündüğünde (bir satır içi elemanın satır sonlarına tanık olduğu gibi), bölünmüş bölümlerin kenarları herhangi bir kutu stilinden yoksundur ve dilimlenmiş görünür. Bunu önlemek için, kullanabilirsiniz kutu-dekorasyon-break: klon.

Şimdi bunu bir örnek ve "Ufuktaki Noel" hatırlatmasıyla izlemeye devam etmek için, hepsi bir arada yazılan Santa Ren Geyiği listesi karış! Ho! Ho! Ho!

Not: Modern IE desteklemesine rağmen kutu-dekorasyon-break, Bölünmüş kısım kenarının kenarında, işleme pürüzsüz değildir ve arka plan dilimlenmiş olarak görünür. Ama kılıyor kutu gölge güzel, bu yüzden hem sınır hem de arka plan için kutu gölgeler kullandım. IE'de, boşluklarla doldurmak isteyebileceğiniz kenarlarda yatay dolgu bulunmuyor.

7. Tablo Öğelerini Daralt

görünürlük: çöküşü yalnızca satırlar ve sütunlar gibi tablo öğeleri için oluşturulmuş bir özniteliktir. Başka bir şey üzerinde kullanılırsa, gibi davranır görünürlük: gizli. Chrome, buna benzer şekilde davranıyor gizli masa elemanları için bile.

Atadığınızda görünürlük: çöküşü Bir tablo öğesinde gizlenir ve alanı, yakındaki içerikle doldurulur - kullanımda nasıl davranacağını görüntü yok yerine.

Ama aksine görüntü yok boşluğu kaldırdıktan sonra tablo düzenini değiştiren düzen, içinde aynı kalır görünürlüğü: çöküşü. Nasıl çalıştığını burada daha ayrıntılı olarak görebilirsiniz..

8. Sütun Oluştur

Kullanarak içeriğiniz için bir sütun düzeni oluşturabilirsiniz. sütunlar bağlıyor. Kaç tane sütun belirlemenizi sağlar (sütun sayısı) ve her sütun genişliğini (sütun genişliği) bir elementte işlenecek.

İçerik metinden farklıysa, örneğin bir resimdeki gibi, sütunların genişliğini göz önünde bulundurmanız gerekir. Aşağıdaki örnek için sadece kullandım sütun sayısı kaç tane sütun istediğimi belirtmek için.

-webkit-column-count: 2; -moz-sütun sayısı: 2; sütun sayısı: 2; 

9. Elemanları Yeniden Boyutlandırılabilir Yap

Bir öğe CSS3 özniteliği ile yeniden boyutlandırılabilir (dikey, yatay veya her ikisi de) yapılabilir boyutlandırmak . Bir boyutta yeniden boyutlandırılabilirlik textarea aynı kullanılarak devre dışı bırakılabilir.

yeniden boyutlandırmak: dikey; yeniden boyutlandırmak: yatay; yeniden boyutlandırmak: ikisi de; yeniden boyutlandırma: yok; 

10. Desen Oluşturma

Tek bir eleman için birden fazla CSS3 gradyanı (her ikisi de doğrusal ve radyal) olabilir ve modeller oluşturmak için birbirlerine yerleştirilebilirler. Bu bize sağlar dış görüntüleri kullanmadan elemanlar için hoş arka planlar oluşturun. Çalışmasını sağlamak biraz pratik gerektirebilir..