CSS ile Gökkuşağı Kenarlık Efekti Oluşturma

10.8.17
CSS ile Gökkuşağı Kenarlık Efekti Oluşturma

CSS ile Gökkuşağı Kenarlık Efekti Oluşturma - Blog yayınlarında bir bilgiyi, öneriyi ve açıklamayı belirgin olarak vurgulamak için, bildirim kutusu çevresinde bir sınır oluşturan veya tamamen gökkuşağı efekti verebileceğiniz CSS ve HTML kodları ile ilgili bilgiler paylaşacağım.

Gökkuşağı efekti, bir div renkli arka plan ve bir üst div arka planı kullanarak dış div ile iç div arasında kenar boşluğu oluşturarak bu kenar boşluğuna gökkuşağı efekti vereceğiz. Kenar boşluğu oluşturmamızı sağlayan padding değeri ne kadar büyük olursa kenar boşluğu da o kadar yüksek olur. Bunu blogunuzun tasarımına uygun olacak şekilde ayarlayabilirsiniz.

Blog Yayınlarında Gökkuşağı Efekti Nasıl Oluşturulur?


Aşağıdaki CSS kodlarını blog'unuzun şablon editör sayfasında bulunan stil dosyası içerisine ekleyin. Blog'unuzun ]]></b:skin> yada </style> stil dosyası içerisine ekleyebilirsiniz.

.rainbow-box {
  background: linear-gradient(60deg, #f79534, #f37056, #ef4e8b, #a167ab, #5073b9, #1099ad, #07b38b, #6fba93);
  padding: 3px;
  border-radius: 5px;
  width: 100%;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}
.rainbow-content {
  background:#fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .3);
  font-size: 14px;
  padding:10px;
  border-radius: 5px;
}

CSS kodlarını ekledikten sonra şablonu kaydedin.

Aşağıdaki HTML bildirim kutusunu blog yayınlarınıza ekleyerek bilgi, açıklama, ipucu ve bilgilendirme ile ilgili kısa bildirimlerinizi paylaşabilirsiniz.

<div class="rainbow-box">
<div class="rainbow-content">
<p>
Açıklama - Bilgi - İpucu - Bildirim
</p>
</div>
</div>

Aşağıdaki Ön İzleme butonuna tıklayarak Gökkuşağı bildirim kutusunu inceleyebilirsiniz.


Ön İzleme sayfasında bulunan Roboto Mono yazı fontunu blogunuzda kullanmak istiyorsanız, aşağıdaki embed ve CSS kodunu blogunuza ekleyebilirsiniz.

Roboto Mono yazı fontunu @import olarak eklemek istiyorsanız aşağıdaki kodu kullanın.

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i');
</style>

Roboto Mono yazı fontu standart olarak eklemek için, aşağıdaki CSS linkini kullanın.

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet"/>

Yazılarınızda Roboto Mono yazı fontu belirtmekiçin, aşağıdaki CSS kodunu kullanın.

font-family: 'Roboto Mono', monospace;

Bu yazımızda blog yayınlarına Gökkuşağı bildirim kutusu ekleme ile ilgili bilgiler paylaştık. Yayın ile ilgili daha fazla bilgi almak için yorum bırakabilirsiniz.

Yorum Gönder