CSS

“kutu-gölge” ve “border-radius”un Genişletilmiş Kullanımı

Bu bölüm, genişletilmiş kullanımını keşfedecek box-shadow ve border-radius ve görüntü sunumunu geliştirmek için bu özellikleri kullanan bir açılış sayfası demosu ile sonlandırın.

Öğreneceksiniz:

  • genişletilmiş sözdizimi border-radiusve değerleri ayarlamak için hangi tür birimlerin ne zaman kullanılacağı
  • çoklu nasıl oluşturulur box-shadow katmanlar
  • hakkında box-shadow değer inset
  • Nasıl heklenir” box-shadow ile birlikte inset popüler görüntü filtreleme tekniklerini uygulamak

Genel Bakış border-radius

Bugünlerde çocuklar yuvarlak görünmesini istediğiniz bir div’in her köşesi için bir gif oluşturmakla asla uğraşmak zorunda kalmayacaklar 😂 Gerçekten, border-radius CSS’deki en önemli kilometre taşlarından biriydi.

Bir tazeleme için, sık sık şu şekilde kullanılır:

border-radius: 50%;

Kare bir eleman için hangisi daire görünümüne neden olur.

Veya, kullanabileceğiniz bir düğme veya kart gibi, keskin kare köşelere yalnızca hafif bir yuvarlaklık için geri ölçeklendirin:

border-radius: 8px;

Bunu biraz daha ileri götürmeye başlamanın bir yolu, ilk değerin sol üst ve sağ alt olarak ayarlandığı ve ikinci değerin sağ üst ve sol alt olarak ayarlandığı iki değer kullanmaktır:

border-radius: 20% 50%;

Hangisi… limona benziyor mu?

iki değer sınır yarıçapı örneği

Şimdi, aynı değerler ancak farklı bir div boyutu verildiğinde, bu sonuçlar oldukça geniş ölçüde değişecektir:

çeşitli boyuttaki div'lere uygulanan aynı sınır yarıçapı değeri

Dört köşeyi de ayarlayabiliriz:


border-radius: 3vw 4vw 8vw 2vw;

kenarlık yarıçapına ayarlanmış dört köşenin tümü ile örnek

Ama bekleyin – dahası var!

Her köşenin yuvarlandığı hem yatay hem de dikey yarıçapı tanımlamanıza izin veren süper genişletilmiş bir sözdizimi vardır. Varsayılan çok dairesel olarak yuvarlanırken, ek yarıçapın eklenmesi, köşeyi oluşturmak için oluşan “kırpmayı” değiştirerek modaya uygun “blob” şekillerine izin verir:

"damla" kenarlık yarıçaplı genişletilmiş sözdizimi ile şekil

Bunu kontrol et sınır yarıçaplı oyun alanı Genişletilmiş sözdizimi oluşturmak için bir yapılandırma paneli ve canlı önizleme ile Jhey tarafından border-radius stiller.

Sözdizimini tanımlamanın birkaç yolu daha vardır, bunları şuradan kontrol edebilirsiniz: MDN belgeleri.

için birimler border-radius

Birkaç farklı birim kullandığımıza dikkat edin: %, pxve vw bu, “görünüm alanı genişliği” görünüm alanı birimidir.

Yüzde değerler, öğenin boyutuna göredir; bu, öğenin çeşitli boyutlarda olması bekleniyorsa daha az tahmin edilebilirlik anlamına gelir. İçin 50% örneğin, öğe artık kare olmadığında daha eliptik görünmeye başlar.

Mutlak birimler gibi px veya rem öğeye dayalı değil, belki de tasarım özelliklerine dayalı tutarlı sonuçlar istediğinizde tercih edilir.

göreli birimler örneğin görünüm alanı birimleri veya em tutarlılık ve aynı zamanda bir ölçek unsuru istiyorsanız faydalı olabilir:

  • görüş alanı birimleri hesaplamak “masaüstünde” daha büyük ve “mobil”de daha küçük olacak, ancak yuvarlak görünümde tutarlı kalacak
  • em göre değişir font-sizedaha büyük yazı tiplerine sahip öğelerde daha yuvarlak köşeler ve daha küçük yazı tiplerine sahip öğelerde daha az yuvarlatılmış köşelere neden olur

Şahsen, iyi bir desteğe ulaştığında, bunu yapan şey box-shadow benim için en heyecan verici olanı, modelleri çok daha doğal bir şekilde sayfadan çıkarmaktı 🙏

Ve bir süreliğine, onlar Kritik görev “skeumorfik tasarım” dediğimiz şey için. Ve geçen yıl “neumorfik tasarım” için biraz geri dönüş yaptılar.

Bunlar sizin için yeni terimler miydi? işte güzel bir genel bakış her birini UX Collective örnekleriyle karşılaştırmak.

Ama genelde kullandığım box-shadow bu günlerde düğmeler veya kartlar gibi şeyler için sadece ince bir ipucu:


box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.38);

temel kutu gölgesinin demosu

atlamak kabul edilebilir blur-radius ve spread-radiusbulanıklık kaybı nedeniyle daha keskin bir gölgeye yol açar. Yayılmanın, öğenin boyutlarının ötesine ölçeklenmesi amaçlandığından, gölge de öteleme değerlerinin ötesine geçmeyecektir.

Yukarıdaki örnekte, esasen gölgeye, gölgeyi biraz sağa ve aşağıya “yayan” öğenin biraz üstünde ve solunda olan bir “ışık kaynağı” verdik.

Bunun yerine, öğenin etrafında eşit olan bir gölge için ofsetleri 0’a ayarlayabilirsiniz, ancak en azından blur-radius gereklidir. Eğer spread-radius Ayrıca, öğenin boyutlarının ötesine genişletmek için gölgeye ölçek uygulayacak olan sağlanır:

box-shadow: 0 0 0.25em 0.25em rgba(0, 0, 0, 0.25);

ofset kutu gölgesi yok

kullanmaktan zevk alıyorum box-shadow özel bir görsel sağlamak için :focus düğmelerde durum. Farklı border, box-shadow yapmak olumsuzluk hesaplanan boyutları değiştirin, yani onu eklemek veya çıkarmak, ne kendisinin ne de etrafındaki öğelerin yeniden akıştan kaymasına neden olmaz. Ödeme düğmelerdeki bölüm Bu yöntemi görmek için.

benzersiz bir özelliği box-shadow katları uygulama yeteneğidir:

box-shadow: 2px 4px 0 4px yellowgreen, 4px 8px 0 8px pink, 8px 10px 0 12px navy;

çoklu kutu gölgesi değerleri

“Yığınlama sırası”, ilk kümenin “üstte” veya öğeye görsel olarak en yakın ve oradan aşağı olacak şekildedir. bu yüzden spread-radius artırılması gerekir, aksi takdirde “alt” katmanlar görünmez (ofsetlerin üst üste gelmediği durumlar hariç).

biz de çevirebiliriz box-shadow için içeri ekleyerek elemanın inset değer:

box-shadow: inset 0 0 12px 4px rgba(0, 0, 0, 0.8);

Bu değerler, öğenin sayfaya “batmış” göründüğü çok gerçek bir “iç metin” gölge görünümü uygular:

gömme kutu gölgesi

box-shadow Görüntüler için Hack’ler

Kullanmayı sevdiğim iki alternatif yol inset gölgeler resimler içindir.

Anahtar yığınlama sırasındadır ve gerçek box-shadow yerleştirilmiş üstünde aracılığıyla uygulanan resimler background-image.

skeç

Birincisi, fotoğrafın kenarlarının yumuşak bir şekilde arka plana düştüğü bir fotoğraf tekniği olan “vinyet” olarak. Bu, özellikle konu merkezdeyse fotoğrafın konusunu vurgulamaya yardımcı olur.

Ancak inset mülkiyet doğrudan bir üzerinde kullanılamaz <img/> bir kapsayıcı öğesi değil, “boş” bir öğe olarak kabul edildiğinden.

ile gitmek background-image bunun yerine, kapsayıcıya aşağıdaki CSS uygulanır:

.vignette-container {
width: 30vmin;
height: 30vmin;
box-shadow: inset 0 0 4vmin 3vmin rgba(0, 0, 0, 0.5);
}

Soldaki resimde vinyet uygulanmış ve sağda uygulanmamış bir karşılaştırma burada.

soldaki resimde vinyet uygulanan iki resim

Kullandığımız vmin birimleri, böylece box-shadow içinde ayarlanmış olan genel görüntü boyutuna göre ölçeklenir. vmin. Bunun nedeni, box-shadow yüzde kullanılarak ayarlanmalıdır, bu da öğeye göre değerlerin ayarlanmasını biraz zorlaştırır. Bu nedenle, bir hack içindeki hack, öğenin beklenen boyutunu ayarlamak için görünüm alanı birimlerini kullanmaktır. box-shadow görünüm alanı boyutları arasında.

Görüntü Renkli Ekran

Kullanırken bu tekniği buldum background-image ama aynı zamanda bir renkli “ekran” istedi – bu da görüntünün üzerine yarı saydam bir renk dolgusu yerleştirme ihtiyacı anlamına geliyor. Bu, arka plan resimlerinin üzerine yerleştirilen herhangi bir metnin kontrastını korumaya yardımcı olmak ve aynı zamanda başka türlü alakasız olan bir dizi resim arasında görsel tutarlılık yaratmak için yararlı bir tekniktir.

Önceki çözümüm – uzun yıllar kullanıldı – kesinlikle konumlandırılmış ekstra bir çözümdü. :before orada uygulanan ekran rengi ile içeren öğede background-color.

işte yeni inset box-shadow çözüm:

box-shadow: inset 0 0 0 100vmax rgba(102, 76, 202, 0.65);

Ve soldaki ve sağdaki olmayan ekranla bir karşılaştırma:

ekran karşılaştırma görselleri

Hack’i yakaladın mı? Yüzdelere izin verilmediğinden bahsetmiştim – ancak görüntü alanı birimleri izin verildiğinden, spread ile 100vmax hangisi büyük ihtimalle öğeniz daha büyük olmadıkça herhangi bir öğeyi kapsayacak şekilde çift görünümün maksimum genişliği veya maksimum yüksekliği.

bekle – neden çift? Çünkü spread -den oluşturulur her yönden elemanın en az iki katı vmax değer. Yukarıdaki değeri kullanarak ve kapsayıcınızı en az olarak ayarlayarak test edebilirsiniz. width: 100vw; height: 100vh ve kabın ortasının hangi noktada kaplanmadığını görün.

Örneğin, bir kahraman görüntüsünden daha fazlası için kullanıyorsanız, yalnızca gerektiği gibi artırın, örneğin 200vmax.

Bunun için performans isabetleri aldığını bilen biri varsa, bana bildirin!

Demo biraz daha ileri gider ve nasıl kullanılacağını gösterir object-fit onları yapmak için resimlerde Davranmak beğenmek background-image kullanıldığında harika olan bir görüntünün anlamını hala korurken alt özellik gereklidir (spoiler: erişilebilirlik için çoğu zaman bu rotaya gitmelisiniz).

ek olarak h1 başlık var text-shadow uygulanmış, animasyonlu :hover arasında header. Arasındaki temel fark box-shadow ve text-shadow bu mu text-shadow sahip değil spread Emlak.

Ayrıca teknikleri göstererek birleştirir. border-radius ile birlikte box-shadow içerik görselleri için Ve içerik görselleri, box-shadow skeç solma geri çekilerek canlandırılabilir :hover vurgulama efekti için.

Ekstra hile box-shadow animasyon yeniden tedarik ediyor inset solmanın geri çekilmesini sağlamak için değerler beyaz yerine yarı saydam siyahımızı kullanır. Bunun nedeni ise box-shadow çoğu tarayıcıda (Safari hariç), açıkça sağlanmadıysa varsayılan olarak geçerli rengin değerine ayarlanır ve liste öğeleri color: #fff.

Bonus: Benim favorim “position:absolute katil” CSS ızgarasını kullanarak ve tüm öğeleri aynı şekilde atamak grid-area – belki gelecekteki bir bölüm ve/veya yumurta kafalı video bunu kapsayacak 😉

Stephanie Eckles (@5t3ph)

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu