Altın Konu Bilmeniz Gereken 3 CSS Özelliği

Replicant · 7 Haz 2021

1. ÇOKLU BORDÜRLER
Konteynerlerimizi farklı bordürler ve birden çok bordür ile stillendirmek istediğimiz zamanlar vardır. Ancak, CSS'de birden çok kenarlık uygulamak söz konusu olduğunda, geliştiriciler genellikle çok fazla gereksiz ekstra öğeye sahip olurlar.

İşaretleme kodunuzu kirletmeden birden fazla kenarlık uygulamak için bildiğim iki harika çözüm var.

box-shadow çözümü: Gölgeler oluşturmak için box-shadow özelliğini kullanmış olmalısınız. Ancak, gölgeyi bizim belirlediğimiz miktarda büyük veya küçük yapan yayılma yarıçapı (dördüncü bir parametre) olarak bilinen bir parametre vardır . Ve sıfır ofset ve sıfır bulanıklık ile birleştirilmiş pozitif yayılma yarıçapı , tam olarak düz bir kenarlık gibi görünen bir gölge oluşturur.

Kod:

“Note: The reason why box-shadow is a good option to apply multiple borders is that we can simply add more borders by adding them in the same box-shadow property.”

Örneğin

anahat çözümü: Yalnızca iki kenarlığa ihtiyacımız olması durumunda, dış kenar için anahat özelliği ile normal bir kenarlık kullanmak işi yapacaktır. Bu yöntem, kenarlık stilimizi özelleştirebildiğimiz için bize daha fazla esneklik sağlar (ikinci kenarlık için kesikli kenarlık kullanabiliriz). Ayrıca, anahat-offset özelliği ile elemanın sınırlarından uzaklıklarını kontrol edebiliriz.

2. ESNEK ELİPSLER
Daireye dönüşebilen geniş bir kenar yarıçapına sahip kare bir elemana border-radius uygularken sorunla karşılaşmış olmalısınız. Şahsen bu problemle birçok kez karşılaştım ve işte hızlı bir çözüm.

Eğik çizgiler: Daha az bilinen bir gerçek, border- radius'un farklı yatay ve dikey yarıçapları kabul etmesidir ve ikisini ayırmak için bir eğik çizgi kullanırsanız, o zaman köşelerde eliptik yuvarlama oluşturmamıza olanak tanır.

Yüzde: border-radius özelliğimizi tanımlamak için px ve diğer CSS birimlerini kullanabilmemize rağmen , özelliğe kaç piksel gireceğimizi hesaplama sorunumuzu çözen yüzdeyi de kabul eder.

Örneğin 300px X 200px boyutlarında bir elemanımız varsa , bunu yarıçapı genişliğinin ve yüksekliğinin yarısı kadar olan bir elipse kolayca çevirebiliriz.

3. RENK TİNLEME
Bir grup fotoğrafa görsel bir bütünlük kazandırmak için çok bilinen bir efekttir ; burada, efektler statik olarak uygulanır ve üzerine gelindiğinde veya başka bir etkileşimde kaldırılır . Geliştiriciler çoğu zaman görüntünün iki farklı sürümünü oluşturur ve bunları değiştirmekle ilgilenen basit bir CSS kullanır. Daha fazla şişkinlik ve fazladan HTTP isteği eklediğinden bu yaklaşım önerilmez .

CSS ile bu efekti birkaç satır kodla kolayca elde edebiliriz.

Filtreleri Kullanma: Filtre özelliğini resminize uygulamanız ve istediğiniz doygunluğu seçmeniz yeterlidir .

Örneğin , görüntüye doygunluğu giderilmiş turuncu-sarı bir renk veren sepia() filtresini kullanabilir ve her pikselin doygunluğunu artırmak için doygunluğu saturate() filtresiyle değiştirebiliriz. Ve son olarak, kullanıcı tarafından bir fareyle üzerine gelme etkileşiminin başlatıldığı her yerde nihai sonuçlarımızı almak için CSS geçişini uygulayabiliriz.

Okuduğunuz için teşekkür ederim. Umarım bu makale ( Bilmeniz Gereken 3 CSS Özelliği ) sizin için faydalı olmuştur.