CSS kullanarak Çok Renkli Kenarlıklar Oluşturun

Yayınlanan: 2022-02-16

CSS border özelliğinin düz, kesikli, noktalı gibi seçenekler gibi bazı özelleştirme seçenekleri vardır. Ancak, sınır rengi söz konusu olduğunda, her bir kenar için yalnızca düz bir renge sahip olabiliriz. Ancak, aklınıza gelmemiş olabilecek birkaç özellik daha kullanarak çok renkli bir çizgi elde etmenin başka bir yolu daha var, gelin bir göz atalım.

Sağlam

katı boru

kesikli

dashedbord

Noktalı

noktalı

Çok renkli Kenarlıklar

çok renkli1

çok renkli2

Yukarıda gösterildiği gibi çok renkli bir kenarlık elde etmek için, bir renk gradyanı ile position özelliğini ve ::after seçiciyi kullanacağız. İlk olarak, bir HTML <div> sınıfı kullanarak bir başlık alanı oluşturacağız ve ardından onu ve aşağıdaki içeriği bölen çok renkli bir kenarlık elde etmek için CSS ile stil vereceğiz.

HTML'nizi oluşturun:

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>
POPUP'TA AÇ
 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

Şimdi, biraz CSS ile stil verelim.

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }
POPUP'TA AÇ
 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

Şimdi şuna benzeyen bir şeye sahip olmalısınız:

CSS kullanarak Çok Renkli Kenarlıklar Oluşturun

Bununla, artık .ost-multi-header selector ::after ekleyebiliriz. Ancak, yapmadan önce, ::after ne yaptığını ve neden çok renkli kenarlık için position özelliğine ihtiyacımız olduğunu biraz açıklamak istiyorum. ::after , seçilen öğenin sonunda content özelliğinde ne varsa onunla bir sözde öğe oluşturur. Bizim durumumuzda, bu öğe .ost-multi-header . Haydi hep onurlu bir “Merhaba Dünya!” yapalım. örnek göstermek için.

Bunu CSS'nize ekleyin:

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }
POPUP'TA AÇ
 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }

hwheaderbord

Gördüğünüz gibi artık bir "Merhaba Dünya!" başlık başlığının altındaki öğe. Ana .ost-multi-header , relative olarak konum özelliğine sahip olduğundan, bir alt öğeye absolute bir konum verebiliriz. Bu, ::after ile oluşturduğumuz yeni sözde öğemizi ana öğe içinde istediğimiz yere kolayca taşımamıza izin verecektir. En alta koyuyoruz ve ana öğe içinde soldan 20 pikselin üzerine taşıyoruz. Ana öğenin konum özelliği göreceli olarak ayarlanmamışsa, mutlak konumlandırılmış öğemiz tarayıcının görüntü alanının en altında ve 20 piksel solunda olacaktır.

Peki ya renkli sınırımız? Bir degrade kullanarak çok renkli kenarlığımız olacak şekilde sözde öğemizin arka planını biçimlendireceğiz. CSS gradyanları doğrusal veya radyal olabilir. Sınırımız için linear-gradient kullanacağız. Oldukça basit, bu bize aradığımız sınırı verir.

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }
POPUP'TA AÇ
 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

Ancak, adım adım bir an için yavaşlayalım. İlk olarak, content özelliği boş olmasına rağmen hala oradadır. Bunun nedeni, content özelliği olmadan sözde öğenin asla yaratılmamasıdır; yani, ihtiyacımız var. Sözde elemanımızın yüksekliğini, sınır yüksekliğimizi ayarlamamız gerekiyor. Neden hem left hem de right özellikleri 0'a ayarlamalısınız? Ayarlanmış bir genişlik olmadan, bu sözde öğeyi ana öğe içinde %100 genişliğe genişletecektir. Çok gibi görünebilir, ancak linear-gradient ayarları sadece rengin soldan "sağa" akmasını söylüyor ve biz de arka planın belirli yüzdelerinde istediğimiz renkleri koyuyoruz.

Tek yaptığımız belirli yüzdelerde hangi renklerin olacağını seçmek olsa da, çok fazla ayak işi. Neyse ki, renk gradyanlarında çok yardımcı olan ücretsiz çevrimiçi kaynaklar var. ColorZilla'dan Ultimate CSS Gradient Generator , eski tarayıcıları desteklemek için birden çok gradyan özelliği içeren harika bir araçtır.

Araçta zaten ayarlanmış bir gradyan var, bu nedenle bu öğreticide kullanılan tam ayarları görmek için bu bağlantıyı kullanabiliriz: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33 ,feb123+66,2184cd+66,2184cd+100. Şöyle görünmelidir:

CSS kullanarak Çok Renkli Kenarlıklar Oluşturun

Bu sitede bir çok ayar var ama biz bordürümüz için kullanacağımız görünümü oluşturmak için hangi ayarlara ihtiyacımız olduğuna odaklanalım. Onu parçalayalım:

CSS kullanarak Çok Renkli Kenarlıklar Oluşturun

  1. Ön ayarlar - Bunlar harika bir başlangıç ​​noktası olabilir!
  2. Kaydırıcı çubuk - Burada renkleri ekleyebilir, kaldırabilir ve düzenleyebilirsiniz
  3. Duraklar - Bu bölüm, her rengin opaklığı ve konumu için ayarları değiştirmenize olanak tanır. Bu bölümde hangisini kontrol ettiğinizi değiştirmek için yukarıdaki kaydırıcıdaki renk kutusunu tıklamanız yeterlidir.
  4. Önizleme - Burada yaptığınız değişikliklerin sonuçlarını hemen görebilirsiniz.
  5. Oryantasyon ve Boyut - Bu, yatay, dikey, çapraz veya radyalden değiştirmenize olanak tanır. Ve degradenin boyutunu ayarlamak için.
  6. CSS Kodu - Her zaman geri dönüp degradenizi kolayca düzenleyebilmeniz için kalıcı bağlantıyla oluşturulan kod.

Bizim durumumuzda soluk bir gradyan değil, iki renk arasında düz bir geçiş arıyorduk, bu yüzden tek yapmamız gereken, bunun olmasını istediğimiz yerde iki rengi üst üste istiflemek. Örneğimizde renkleri sırasıyla %33 ve %66 oranında istifledik.

CSS kullanarak Çok Renkli Kenarlıklar Oluşturun

Önizlemede gördüğünüzün kodun üreteceği şey olduğunu bilerek ayarlarla oynamaktan çekinmeyin. Görünüm kurulumunu istediğiniz şekilde elde ettiğinizde kod kutusunun sağ alt kısmında bulunan “kopyala” butonunu kullanabilirsiniz.

dereceli kopya

Kodu, bağlantıda olduğu gibi kopyaladıysanız, son CSS'niz şöyle görünecektir:

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }
POPUP'TA AÇ
 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

Ve bu CSS, tamamen duyarlı olan bu çok renkli alt çizgiyi üretecektir:

CSS kullanarak Çok Renkli Kenarlıklar Oluşturun

Oraya gidiyoruz! .ost-multi-header öğesinin altına 6px dolgu eklemek zorunda değildik, ancak absolute konumlandırılmış alt öğe artık üst öğenin yüksekliğini etkilemiyor. Ana öğedeki içeriğimizin üzerinde yüzmesine izin verebilir veya engellenmesini istemediğimiz herhangi bir içeriği kapsamadığından emin olmak için padding ekleyebiliriz.

İşte herkesin endişelenmeden düzenlemesi ve öğrenmesi için CodePen'de yeniden oluşturulan bu alıştırmanın bağlantısı.

Son bir not, bazı eski tarayıcılar yalnızca tek iki nokta üst üste :after seçiciyi destekler ve modern standart double ::after 'ı desteklemez. Güvende olmak istiyorsanız tek kolonu kullanabilirsiniz. Şimdilik modern tarayıcılarda da çalışacak.