CSS İle Renkli Kenarlıklar Oluşturma

13 Mart 2020 tarihinde Emre Can ÖZTAŞ tarafından paylaşıldı.

Bu yazımızda; CSS ile renkli kenarlıklar oluşturalım, istedim.

Öncelikle; kenarlık yani border, bir elementin etrafını temsil eder. Bu elementin etrafını çeşitli şekilde stillendirebiliriz. Böylelikle göze hoş gelen yapılar kurmamız oldukça olağandır.

Ben aşağıdaki bahsedeceğimiz kodlarımızı, bir anketin daha dikkat çekmesi için kullandım. Siz de herhangi bir element için kullanabilirsiniz. Örneğin; Bootstrap 4’ün card sınıfları için olabilir.

Kodlarımız aşağıdaki gibidir.

.colorful-border {
    border-top: 10px solid;
    border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5;
}

.colorful-border bildiğiniz gibi CSS sınıf yapımız. border-top özelliğinde; elemetimizin üst kenarının 10px büyüklüğünde ve düz bir çizgi şeklinde olacağını belirttik. border-image özelliğinde ise; elementimizin üst kenarında hangi resmin yer alacağını belirtiyoruz fakat biz burada, renkli bir kenarlık oluşturmak istediğimizden dolayı linear-gradient özelliği ile bu resim alanını çeşitli renklerle boyuyoruz. Dikkat ederseniz; çeşitli renkler verdik. İşte bu renkler, kenarlığımızın renkli olmasını sağlıyor. sadece border-top özelliğini kullandığımız için üst kenarlık renkli bir şekilde olacaktır. Diğer kenarlıklara da büyüklük vermemiz halinde, o kenarlıklar da renkli olarak gözükecektir.

Son olarak ekran alıntımıza bakalım ve oluşturduğumuz renkli kenarlığımızın doğru çalışıp / çalışmadığını test edelim.

Yukarıdaki ekran alıntısında da görüldüğü üzere gayet şık ve güzel bir kenarlığımız olmuş oldu.

Yazmış olduğumuz CSS sınıfımızı özelleştirerek çeşitli görünümler elde etmeniz mümkün.

Kategoriler: [CSS] Etiketler: #border #css #linear-gradient

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

*
*

This site uses Akismet to reduce spam. Learn how your comment data is processed.