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:

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

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:

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

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:

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.

Ö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:

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.

Ö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:

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.

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:

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.

Ö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:

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.

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

Beyza şimşek 03/05/2020

Border içine resim eklediğimde text-align:center özelliği ile ortalayabilir miyim?

yönetici 03/05/2020

Beyza, Direk resme border verdiysen şu yöntemle resmi ortalayabilirsin.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

6366

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML AÇIKLAMA SATIRI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.