CSS

Öğe Kenarlıkları Eklemek için 3 CSS Yöntemi

CSS söz konusu olduğunda, bazen bir border gerçekten bir değil border.

Bu bölümde, aşağıdakiler arasındaki farkları ele alacağız:

  • border
  • outline
  • box-shadow

Birini diğerinin yerine ne zaman kullanabileceğinizi de tartışacağız.

CSS Kutu Modeli hakkında bilgi tazeleme

Üç sınır yöntemimiz arasındaki temel fark, nerede bir eleman üzerine yerleştirilirler ve nasıl boyutlarını etkilerler. Bu davranış, CSS kutu modeli tarafından kontrol edilir.

Bu resmin ardından açıklanan ilgili parçalarla birlikte CSS kutu modelinin bir gösterimi

  • en border tam olarak öğenin sınırıdır, dolgusu ile kenar boşluğu arasında bulunur ve genişliği hesaplanan öğe boyutlarını etkiler
  • en outline yanında ama dışında borderhem örtüşen box-shadow ve marginancak öğenin boyutlarını etkilemez
  • varsayılan olarak, box-shadow tanımlanan yön(ler)deki boşluk miktarını kaplayan sınırın kenarından dışarı uzanır ve elemanın boyutlarını da etkilemez

border Sözdizimi ve Kullanım

Kenarlıklar, web’in başlangıcından beri tasarımda bir standart olmuştur.

Ele alacağımız diğer iki yöntemle karşılaştırıldığında önemli bir fark, varsayılan olarak sınırlar, bir öğenin hesaplanan boyutlarına dahil edilir. ayarlasan bile box-sizing: border-box sınırlar hala hesaplamada yer alıyor.

Bir kenarlığın en temel sözdizimi onun genişliğini ve stilini tanımlar:

border: 3px solid;

Tanımlanmadıysa, varsayılan renk currentColor bu, en yakın tanımı kullanacağı anlamına gelir color çağlayanda.

Ancak kenarlık ve kullanım için daha fazla stil var border-style Dilerseniz her iki taraf için farklı bir stil tanımlayabilirsiniz.

Ziyaret etmek MDN belgeleri mevcut tüm gözden geçirmek için border-style değerler ve örneklere bakın.

Kenarlık, stilin öğenin boyutlarında hesaplanmasının kabul edilebilir olduğu durumlar için sağlam bir seçimdir (punto amaçlı). Ve varsayılan stiller çok fazla tasarım esnekliği sağlar.

için okumaya devam edin bonus ipucu sadece bir şey hakkında border yapabilir!

outline Sözdizimi ve Kullanım

Anahatlar için, onu görünür kılmak için gereken tek özellik, varsayılan değer olduğundan bir stil sağlamaktır. none:

outline: solid;

Bordür gibi, üzerinden renk kazanacaktır. currentColor ve varsayılan genişlik medium.

Tipik uygulama outline yerel tarayıcı stillerine göre :focus bağlantılar ve düğmeler gibi etkileşimli öğelerden oluşur.

Bu özel uygulama gerçekleşmesine izin verilmeli özel bir veri sağlayamadığınız sürece erişilebilirlik amacıyla :focus karşılayan stil WCAG Başarı Kriteri 2.4.7 Odak Görünür.

Tasarım amaçları için, sıklıkla belirtilen bir sorun outline eğriyi herhangi birinden miras alamamasıdır. border-radius stiller.

Kullanımı outline öğenin boyutlarını etkilemek istemediğinizde ve bir border-radius. kullanmak olur kenarlıkla aynı stil değerleri Böylece benzer bir görünüm elde edebilirsiniz.

box-shadow Sözdizimi ve Kullanım

için gereken minimum özellikler box shadow için değerlerdir x ve y eksen ve bir renk:

box-shadow: 5px 8px black;

İsteğe bağlı olarak, oluşturmak için üçüncü bir birim ekleyin blurve eklemek için dördüncü spread.

Ödeme yumurta kafasıyla ilgili 4.5 dakikalık video demom genişletilmiş sözdizimi hakkında daha fazla bilgi edinmek ve kullanımla ilgili ipuçları için box-shadow.

Bir sınır oluşturmak için kullanmak için x ve y eksen değerlerinin yanı sıra blur ile 0. Sonra için pozitif bir sayı ayarlayın spread:

box-shadow: 0 0 0 3px blue;

Bu, öğenin etrafında bir kenarlık görünümü yaratacaktır. ve uygulanan bir uygulamayı bile takip edebilir border-radius:

yuvarlak mavi kenarlık efekti için kenarlık yerine kutu gölgesi kullanan bir öğe

tercih edebilirsin box-shadow özellikle düzen kaymasına neden olmadan bir kenarlığı canlandırmak istediğinizde. Bir sonraki bölümde bu bağlamın bir örneği gösterilecektir.

Dan beri box-shadow katmanlı olabilir, mizanpajlarınızı geliştirmek için tanımak için çok yönlü iyi bir araçtır.

Ancak, tarafından sağlanan bazı stilleri tam olarak taklit edemeyecek. border ve outline.

Hepsini bir araya koy

Burada, kullanmanız gerekebilecek birkaç pratik senaryo border alternatif.

Gerçek bir ortak durum border Hem kenarlıklı hem de kenarlıksız düğmeler için stiller sağlarken ve bunların senaryosu yan yana sıralanırken sorun haline geliyor.

arka planı olan ancak kenarlığı olmayan ikinci düğmeden görsel olarak daha büyük görünen kenarlık kullanan bir düğme

Tipik bir çözüm, genellikle kenarlıksız düğme boyutlarını border-width.

Yeni bilgimizle alternatif bir çözüm kullanmaktır. box-shadow ile birlikte inset sözde sınırı görsel olarak yerleştirmek için anahtar kelime içeri düğme:

İlk düğmede kutu gölgesi kullanılarak güncellenmiş stiller, düğmelerin eşit boyutta görünmesine neden oldu

Dolgunuzun boyutundan daha büyük olması gerektiğini unutmayın. border-width metin içeriğinin çakışmasını önlemek için.

Alternatif olarak, belki de Ekle bir sınır :hover veya :focus. gerçek kullanarak borderolduğundan, düzen değişikliğinden istenmeyen bir görsel atlama yaşayacaksınız. border kısaca o hallerdeki boyutları artıracaktır.

fareyle üzerine gelindiğinde eklenen ve düğmenin yerinde zıplamasına neden olan bir kenarlığın demosu

Bu durumda kullanabiliriz box-shadow gerçek boyutların artmaması için sözde kenarlığı oluşturmak için – artı kullanarak onu canlandırabiliriz transition:

Fareyle üzerine gelindiğinde artık düğmenin zıplamasına neden olmayan kutu gölgesi kenarlığının demosu

İşte yukarıdaki örnek için azaltılmış kod:

button {
transition: box-shadow 180ms ease-in;
}

button:hover {
box-shadow: 0 0 0 3px tomato;
}

CSS Hata Ayıklama Yönteminizi Yükseltme

Klasik bir CSS şakası, özellikle taşma kaydırma veya konumlandırma için CSS sorunlarını çözmek için şunu eklemektir:

* {
border: 1px solid red;
}

Bu, her öğeye kırmızı bir kenarlık ekleyecektir.

Ancak öğrendiğimiz gibi, bu aynı zamanda hesaplanan boyutlarını da etkileyecek, dolayısıyla potansiyel olarak yanlışlıkla size ek sorunlara neden olur.

Bunun yerine şunu kullanın:

* {
outline: 1px solid red;
}

Sürpriz sınav: nerede olacak outline yerleştirilebilir ve bu neden daha iyi bir çözüm?

kullanmanın olası bir sonucu border dır-dir ekleme içerik yeniden çizildiğinde kaydırma çubukları. kullanırken bu yan etki olmayacaktır. outline.

Ek olarak, muhtemelen kullanıyor olabilirsiniz border elementler için zaten, evrensel olarak değişen border kesinlikle yeni problemler ortaya çıkarması muhtemel olan düzen kaymalarına neden olacaktır.

Kenar notu: Tarayıcı Geliştirme Araçları ayrıca öğeleri tanımlamanıza yardımcı olacak daha karmaşık yöntemler geliştirmiştir. Firefox taşma için hata ayıklama durumunda yardımcı olan hem “kaydırma” hem de “taşma” etiketi eklemek bile. DevTool özellikleri hakkında daha fazla bilgi edinmek için biraz zaman ayırmanızı tavsiye ederim!

Erişilebilirlik için, farkında olmayabileceğiniz bir senaryo, Windows Yüksek Karşıtlık Modu (WHCM) kullanıcılarıdır.

Bu modda, sağladığınız renkler azaltılmış yüksek kontrast paletine dönüştürülür. Dahil olmak üzere tüm CSS özelliklerine izin verilmez. box-shadow.

Pratik bir etki, outline üzerine :focus ve onunla değiştirdi box-shadowWHCM kullanıcılarına artık görünür odak verilmeyecek.

Bu olumsuz etkiyi ortadan kaldırmak için bir transparent ana hatlarıyla :focus:

button:focus {
outline: 2px solid transparent;
}

Bu özel konu hakkında biraz daha fazla bağlam için, gözden geçirin düğme stiliyle ilgili bölüm.

tuzakları outline ve box-shadow

Çünkü outline ve box-shadow oturmak dışarıda kutu modelindeki sınırın bir sonucu olarak, karşılaşabileceğiniz bir sonuç, bunların görünümün kenarlarının altında kaybolmalarıdır. Yani, eklemeniz gerekebilir margin elemana veya padding için body görünür kalmasını istiyorsanız bir önlem olarak.

Yerleşimleri ayrıca, aşağıdakiler gibi özellikler tarafından kesilebilecekleri anlamına gelir. overflow: hidden veya kullanımı clip-path.

Bonus İpucu: Gradyan Kenarlıkları

Söz verdiğimiz gibi, burada tartıştığımız yöntemlerden yalnızca border yapabilir.

Sıklıkla unutulan sınırla ilgili bir özellik border-image. Sözdizimi biraz garip olabilir gerçek görüntülerle kullanmaya çalışırken.

Ancak gizli bir gücü vardır – CSS gradyanları teknik olarak görüntü olduğu için gradyan sınırları oluşturmanıza da olanak tanır:

metinle birlikte pastel gökkuşağı gradyanı uygulanmış bir öğenin önizlemesi "Selam Dünya"

Bu, normal bir kenarlık genişliği ve stili tanımlamayı gerektirir (ancak şu şekilde görüntülenecektir: solid stil değerinden bağımsız olarak), ardından border-image bir ekleme ile degrade sözdizimini kullanabilen özellik. Gradyandan sonraki sayı, slice gradyanımız için basitçe kullanabileceğimiz değer 1 degradenin boyutlandırmasını/bozulmasını esasen değiştirmemek.

div {
border: 10px solid;
border-image: linear-gradient(to right, purple, pink) 1;
}

Kenarlığı yalnızca bir tarafa yerleştirmek için önce diğer tarafları sıfıra ayarladığınızdan emin olun, aksi takdirde bazı tarayıcılar yine de tüm taraflara ekleyecektir:

div {
border-style: solid;
border-width: 0;
border-left-width: 3px;
}

Dezavantajı, bu sınırların olumsuzluk saygı border-radiusbu nedenle, bunu sağlayan bir çözüme ihtiyacınız varsa, kartlardaki degradelerin nasıl eklendiğine göz atmak için Müfettiş’i kullanabilirsiniz. ModernCSS ana sayfa 😉

İlgili Makaleler

Bir cevap yazın

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

Göz Atın
Kapalı
Başa dön tuşu