CSS Gradient Border Yapımı

Web sayfası geliştirirken Birçok kez, bazı nedenlerle kenarlık için bir renk gradyanı ayarlamanız gerekebilir, bu nedenle renk kenarlığı gradyanını nasıl ayarlayabilirim? Bu makalede, kenarlık renk gradyanını ayarlamak için CSS3'ün nasıl kullanılacağı anlatılmaktadır.

CSS ile renk geçişi CSS3 ile birlikte gelen güzel bir özelliktir. Resim kullanmadan bir renkten diğerine geçiş yapmayı sağlayan CSS3 gradients özelliği bize tasarımsal anlamda çok büyük avantaj sağlar.

CSS3 gradyanı bir web sitesinin görünümünü bir üst seviyeye taşır. İmage, elemanın Background özelliğinin kenarlık veya maske olarak kullanılmak için önemli bir araçtır. Sadece bu değil, Çok gelişmiş özellikleri, aynı zamanda yuvarlak köşeler, gölgeler ve border görüntüleri de en etkili şekilde oluşturulabilir.

Gradient Border CSS kullanılarak doğrudan desteklenmez. Gradient kenarlıklar oluşturmak için aşağıda listelenen iki yöntem vardır:

Birinci Yöntem Kenarlık Görüntüsünü Gradyan İle Kullanma:

Border özelliğinde boyut ve renk olarak saydam kullanılarak oluşturulur. CSS, kenarlığın boyutunu, rengini, stilini veya şeklini değiştirmemize olanak tanır. Daha önce CSS'de border özelliğini kullandıysanız. Gradient kenarlık oluşturmak için border-image-source ve border-image-slice özellikleri gerekir. border-image-slice özelliğine 1 değeri verilmeli.

ÖRNEK:

.border { 
    width: 200px;
    height:200px; 
    border: 10px solid transparent; 
    border-image: linear-gradient(to right, green, lightgreen); 
    border-image-slice: 1; 
    padding: 25px; 

   } 

HTML:

<div class="border">
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.
</div> 	

ÇIKTI:

Border değerinin kalınlığını değiştirmek için: border: 30px solid transparent;

İkinci Yöntem Arka planı degrade olarak ayarlama ve içeriğin dolgu ile üst üste bindirilmesi:

Bu yöntem, kenarlığın gösterileceği öğeyi normal gradient arka planı olan bir öğeyle sarmayı içerir. Çevreleyen div'deki içerik, sayfanın gerekli kenarlık arka plan renginin genişliğine eşit olarak doldurulur. Bu bir gradient kenarlığını simüle eder.

.border {
    width: 400px;
    position: relative;
    background: linear-gradient(to right, green, lightgreen);
    padding: 10px;
}
.inner {
    background: white;
    padding: 25px;
}

HTML:

<div class="border"> 
  <div class="inner"> 
  Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.    
  </div> 
</div> 

ÇIKTI:

Border Gradient yönünü yukardan yapalım:

.border { 
    width: 300px; 
    border: 15px solid transparent; 
    border-image: linear-gradient(to top, blue, green); 
    border-image-slice: 1; 
    padding: 25px;

    } 

HTML:

<div class="border">
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.
</div> 

ÇIKTI:

ÖRNEK:

.border { 
    width: 200px; 
    border:5px solid transparent; 
    border-image: linear-gradient(to right, red, orange); 
    border-image-slice: 1; 
    padding: 15px;

 } 

HTML:

<div class="border"> 
 Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.
 Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı
 oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden 
 beri endüstri standardı sahte metinler olarak kullanılmıştır.
 </div> 

ÇIKTI:

ÖRNEK:

.border { 
   width: 200px;
   border:5px solid transparent; 
   border-image-source : linear-gradient(0deg, rgba(2,0,36,1) 0%,
                                               rgba(9,9,121,1) 27%, 
                                               rgba(0,212,255,1) 100%);
   border-image-slice : 1;
   padding: 20px;
   } 

HTML:

<div class="border">
 Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.
 Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı
 oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden 
 beri endüstri standardı sahte metinler olarak kullanılmıştır.
</div>

ÇIKTI:

Border'ın 4 tarafa ihtiyaç yoksa iki taraftan kısaltılmış border verelim.

.modul {
  max-width: 250px;
  padding: 1rem;
  color: white;
  border-width: 3px;
  border-style: solid;
  border-image: linear-gradient(
                      to bottom, 
                            red, 
                rgba(0, 0, 0, 0)
                       ) 1 100%;
}

HTML:

<div class="modul">
 Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. 
 Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı 
 oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden 
 beri endüstri standardı sahte metinler olarak kullanılmıştır.
</div>

ÇIKTI:

ÖRNEK:

#gradient {
  width: 200px;
  border: 15px solid;
  border-image: repeating-linear-gradient(45deg, #fbc42e, #3bf, #fbc42e 30px) 60;
  padding: 20px;
}	

HTML:

<div id="gradient">
 Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. 
 Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı 
 oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden 
 beri endüstri standardı sahte metinler olarak kullanılmıştır.
</div>	

ÇIKTI:

NOT: Konuyu iyi anlamak için CSS3 Gradient Kullanımı konusuna bakın.