Hacked by TRKaRTaL
istesem sadece indexte atardım fakat bazı oruspu cocukları bedava sitede hackliyormussun dediler de herneyse bu darkcracker denen ibne gelip özür dilemedikce ona sanal dar !
for trkartal and Redd.é ~
Vahşetle beraber yaratıldım
Önizlemesi:<style type=”text/css”>
body {
background: #fff (resimler/arkaplan.png) repeat;
font: italic bold 14px Verdana;
color: #333;
}
.sayfa {
width:600px;
border: 1px solid #666;
background:#ccc;
text-transform: lowercase;
}
</style>
</head>
<body>
<div>
Basit CSS Komutları {1}
Merhaba arkadaşlar. Bu yazımda daha önceden CSS’ye sıfırdan başlayacak olan arkadaşlara yardımı olacak bir konuya değinmek istedim. CSS’de bildiğimiz, bilmediğimiz bir sürü komut var. Bazen sitede CSS nedeniyle herhangi bir kayma oluyor. Bilmediğimiz ama daha önceden kaymayı düzelten bir kodu hatırlayıp ekliyoruz. Kayma düzeliyor. Fakat aklımıza şu soru takılıyor: “Bu komut ne işe yarıyordu da kaymayı düzeltti?”. Bu yazı serisinde CSS komutlarını iyice açıklayacağım.
Bu yazımızda basit bir sayfa hazırlamaya başlarken kullandığımız komutlardan bahsedelim.
</div>
</body>
Yukarıdaki kodu aşağıdaki şekilde değişikliğe uğratıyoruz. Bir de arka plan ekliyoruz ki, ona göre ayarlayıp ortalayalım.body {
background: #fff (resimler/arkaplan.png) repeat;
font: italic bold 14px Verdana;
color: #333;
}
.sayfa {
width:600px;
border: 1px solid #666;
background:#ccc;
text-transform: lowercase;
}
body {
background: #fff url(resim/arkaplan.png) no-repeat scroll 50% 0;
font: 15px Palatino Linotype;
color: #333;
}
.sayfa {
width:600px;
border: 1px solid #666;
background:#f1f1f1;
padding:5px;
}
.sayfa {
width:600px;
border: 1px solid #666;
background:#f1f1f1;
padding:5px;
}
.sayfa {
width:900px;
border: 1px solid #ddd;
background:#f9f9f9;
padding:10px;
margin:115px auto 0 auto;
line-height:23px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
webkit-box-shadow: 0px 1px 2px #ddd;
-moz-box-shadow: 0px 1px 2px #ddd;
box-shadow: 0px 1px 2px #ddd;
}
padding:10px;
margin:115px auto 0 auto;
şeklinde verilir. Bunu aklınızda tutmak için kodlama yaparken gözlerinizle saat yönünde bir daire çizebilirsiniz, işe yarıyor :)margin: üst sağ alt sol;
line height satır yüksekliği anlamına gelir. Yazının alttaki satırla çok bitişik görünmemesini sağlar. Bu nedenle temiz bir tasarım için gereken güzel bir komuttur :) Bu değerin piksel cinsinden yazılışı her yazı tipine göre değişir. Yani Verdana adlı yazı tipinde 23px aralık az gelirse 25px kullanmak gerekebilir :)line-height:23px;
border-radius komutu bir alanın kenarlarını ovalleştirmeye yarar. -webkit şeklinde başlayan tüm tarayıcılar için -moz ile başlayan mozilla için, border-radius ise opera tarayıcısı için geçerlidir.-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Yukarıdaki kodları türkçe olarak anlamak için:-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 0px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 0px;
box-shadow ise bir alanın gölgesini oluşturmaya yarar. Bu gölgeler aşağıdaki forma göre verilir.webkit-box-shadow: 0px 1px 2px #ddd;
-moz-box-shadow: 0px 1px 2px #ddd;
box-shadow: 0px 1px 2px #ddd;
Eğer gölgeyi içe doğru vermek isterseniz bu değerlerin en başına inset adlı değeri eklemeniz gerekir. Yani:webkit-box-shadow: yatay-gölge dikey-gölge bulanıklık #renk;
-moz-box-shadow: yatay-gölge dikey-gölge bulanıklık #renk;
box-shadow: yatay-gölge dikey-gölge bulanıklık #renk;
Bayağı uzun bir yazı oldu :) Eğer tasarımımız bittiğinde görünüş olarak beğenilirse WordPress’e göre kodlayıp dağıtılabiliriz.webkit-box-shadow: inset 0px 1px 2px #ddd;
-moz-box-shadow: inset 0px 1px 2px #ddd;
box-shadow: inset 0px 1px 2px #ddd;
body etiketi ingilizce anlamında olduğu gibi sayfanın “vücut” bölümüdür. Yani görünürde ne varsa bu bölüme eklenir. Bu nedenle sayfanın tümü bu etikete verdiğimiz değerler belirlenir. Arkaplan, yazı boyutu, yazı tipi gibi…body {
background: #fff url((resimler/arkaplan.png) repeat;
font: italic bold 14px Verdana;
color: #333;
}
background komutu arkaplanı çağırır.background: #fff url(resimler/arkaplan.png) repeat;
font komutu yazı tipi ile ilgili her şeyi kapsar. eğikliği, kalınlığı, boyutu ve hangi yazı tipi olduğu gibi…font: italic bold 14px Verdana;
color komutunun karşısındaki renk kodu yazının rengini belirler.color: #333;
width genişliği, height de yüksekliği..sayfa {
width:600px;
height:300px;
border: 1px solid #666;
background:#ccc;
text-transform: lowercase;
}
DC ~ Copyright © 2011 -- Template created by O Pregador -- Powered by Blogger