14 Şubat 2017 Salı

Renkli Materyal Yazı Kutuları


Sade, Şık Ve Güzel Görünen Bir Renkli Materyal Yazı Kutuları

Öncelikle Yapmamız Gereken İşlemler Şöyle:

Blogger > Şablon > HTML'yi Düzenle

Şimdi CSS Kodlarımızı Ekliyelim.

Ctrl + F Tuşuna Basarak ]]></b:skin> Kodunu Bulalım.

Ve Hemen Üstüne Şu Kodları Ekleyelim:
/* Renkli Materyal Yazı Kutular */
.colorbox{overflow:hidden;position:relative;margin:.5rem 0 1rem;transition:box-shadow .25s;border-radius:2px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:20px;font-size:14px}
.colorbox.blue{background:#03a9f4}
.colorbox.green{background:#4CAF50}
.colorbox.red{background:#F44336}
.colorbox.orange{background:#ff9800}
.colorbox.purple{background:#673ab7}
Artık Her Şey Tamam Şimdi İse Demolarını Görelim:
İstediğiniz Yazıyı Buraya Yazınız.
<div class="colorbox purple">
İstediğiniz Yazıyı Buraya Yazınız.
</div>
İstediğiniz Yazıyı Buraya Yazınız.
<div class="colorbox blue">
İstediğiniz Yazıyı Buraya Yazınız.
</div>
İstediğiniz Yazıyı Buraya Yazınız.
<div class="colorbox green">
İstediğiniz Yazıyı Buraya Yazınız.
</div>
İstediğiniz Yazıyı Buraya Yazınız.
<div class="colorbox red">
İstediğiniz Yazıyı Buraya Yazınız.
</div>
İstediğiniz Yazıyı Buraya Yazınız.
<div class="colorbox orange">
İstediğiniz Yazıyı Buraya Yazınız.
</div>
İyi Günler.

Merhabalar, Ben İbrahim Can 16 Yaşındayım. Blog yazarlığı yapıyorum...

Bir Önceki Yayın

3 Yorum

Material olduğu için yeni nesilin şartlarına uyum sağlıyor. Paylaşım için teşekkürler ☺