Bildiğiniz üzere CSS, Dünya'nın en popüler ve kabul edilen en kaliteli web-grafik kodlama tabanı dilidir. Ben de şuan da çok popüler olan 3 Boyutlu Flat Bloğunu, Standart bir CSS Kalıbına nasıl uygulayabileceğinizi anlatıyorum. Bunu bileniniz vardır, bilmeyenler için yararlı bir konu bence.
Öncelikle aşağıda linkini vermiş olduğum siteden 2 adet flat renk kodu buluyoruz ve kopyalıyoruz. Bu 2 adet rengin birisinin açık tonlu, diğerinin koyu tonlu olması gerekiyor. 3D olması için bunlar lazım. :)
Kopyaladıktan sonra, bir CSS kalıbı oluşturmalıyız. Bunu MyBB için Global.CSS'den yapabilirsiniz.
Şu komutları düzenleyiniz:
{$acikrenkkodu}: Buraya açık renk tonlu olan kodunuzu giriniz. Ve sonuna ";" işareti koyunuz.
{$koyurenkkodu} : Buraya koyu renk tonlu olan kodunuzu giriniz. Ve sonuna ";" işareti koyunuz.
Daha sonra HTML kısmına geliyoruz. (MyBB için index*tavsiyemdir veya header şablonlarına gelin) Ve şu komutu giriyoruz:
Alacağımız sonuç bu olmalı:
Not 1: Yukarıda örnek olarak ben turkuaz renk kodunu girdim, o nedenle o renkte. Siz o fonksiyonları düzenlemeyip, direk hiçbir değişiklik yapmadan girerseniz, sadece metin gözükür ve çalışmaz.
Not 2: Yukarıda yazı rengi, boyutu, tipi vs... değiştirmek istiyorsanız. CSS Kalıbına şu kodları eklemeniz gerekmektedir.
Yukarıdaki fonksiyonları düzenleyiniz. Dikkat ! Sonuna mutlaka ";" işareti ekleyin, yoksa çalışmaz.
Eğer hazır halde kullanmak istiyorsanız, buyrun.
Bunu kullanarak, aşağıdaki görünümü verebilirsiniz.
Kodlar üzerinde düzenlemeler, eklemeler, kaldırmalar vs... yaparak, bunu çok daha mükemmelleştirebilirsiniz. :)
Hoş çakalın.
Öncelikle aşağıda linkini vermiş olduğum siteden 2 adet flat renk kodu buluyoruz ve kopyalıyoruz. Bu 2 adet rengin birisinin açık tonlu, diğerinin koyu tonlu olması gerekiyor. 3D olması için bunlar lazım. :)
Kod:
http://flatuicolor.com/Kopyaladıktan sonra, bir CSS kalıbı oluşturmalıyız. Bunu MyBB için Global.CSS'den yapabilirsiniz.
Kod:
.ornekalip {
background-color: {$acikrenkkodu} // Bu fonksiyonu düzenleyin.
border-bottom: 4px solid {$koyurenkkodu} // Bu fonksiyonu düzenleyin.
padding: 6px; // Bu koda ellemeyin, düzenli bir boşluk bırakır. Fakat 6px değerini değiştirebilirsiniz.
}Şu komutları düzenleyiniz:
{$acikrenkkodu}: Buraya açık renk tonlu olan kodunuzu giriniz. Ve sonuna ";" işareti koyunuz.
{$koyurenkkodu} : Buraya koyu renk tonlu olan kodunuzu giriniz. Ve sonuna ";" işareti koyunuz.
Daha sonra HTML kısmına geliyoruz. (MyBB için index*tavsiyemdir veya header şablonlarına gelin) Ve şu komutu giriyoruz:
Kod:
<div class = "ornekalip">
"Merhaba Dünya !"
</div>Alacağımız sonuç bu olmalı:
Not 1: Yukarıda örnek olarak ben turkuaz renk kodunu girdim, o nedenle o renkte. Siz o fonksiyonları düzenlemeyip, direk hiçbir değişiklik yapmadan girerseniz, sadece metin gözükür ve çalışmaz.
Not 2: Yukarıda yazı rengi, boyutu, tipi vs... değiştirmek istiyorsanız. CSS Kalıbına şu kodları eklemeniz gerekmektedir.
Kod:
font-family: {$fontadi}
font-size: {$yaziboyutu}
color: {$yazirengi}Yukarıdaki fonksiyonları düzenleyiniz. Dikkat ! Sonuna mutlaka ";" işareti ekleyin, yoksa çalışmaz.
Eğer hazır halde kullanmak istiyorsanız, buyrun.
Kod:
font-family: Tahoma;
font-size: 14;
color: #FFFFFF;Bunu kullanarak, aşağıdaki görünümü verebilirsiniz.
Kodlar üzerinde düzenlemeler, eklemeler, kaldırmalar vs... yaparak, bunu çok daha mükemmelleştirebilirsiniz. :)
Hoş çakalın.
