Bu seride, başlığı olan yorum paneline benzer formları olan bir sayfayı (yani wordpress’in yazı sayfası gibi) CSS’de kodlayacağız. Bu makalede ise yavaş yavaş ilerleyerek sadece yazı bölümünü ve ortalama gibi şeyleri anlatacağım.
Bir Önceki Çalışmamız ve HTML’e Uyarlanmış Hali:
Ö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>
Gördüğünüz üzere sağdan ve üstteki boşluklar olmadığından çok göz yoruyor ve düzensiz görünüyor. Ayrıca arka plandaki renk yazıyı kapalı gösterdiğinden sıkıcı bir hal almış. Sayfanın yüksekliği fazla gelmiş. Yazı altından çok boşluk var. İtalik özelliğinin kullanılması gereksiz. İtalik dikkat çekmek istenen yerlerde, alıntılarda veya yazı başlıklarında kullanılmalı bence. Tüm yazıyı italik yaparsak bu biraz tuhaf kaçar. Bir de anlatımda kullandığımız “lowercase” komutu tüm yazıyı küçük harfe dönüştürdü. Eğer resmi bir blogunuz varsa bu yöntem cümle düzenini bozar ve pek beğenilmez. Bu nedenle bu kodda bayağı bir değişikliğe gideceğiz :D
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;
}
Resmi çağırdıktan sonra scroll 50% 0; değeri verdik. Bu değer “arka plan resmim büyük, ekrana göre yüzde elli küçültülsün” anlamına gelir.
Şimdi bir önizleme alalım.
Gördüğümüz gibi üst tarafta kalmış ve tam ortalı değil. Şimdi bu .sayfa etiketini biraz daha düzenleyelim.
.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;
}
Genişliği değiştirdik çünkü yazı bölümünün sayfaya tam ortalı olması gerekiyordu.
padding:10px;
padding komutu, CSS’de bir çerçeveye, resme ya da yazıya içten boşluk verir. Eğer padding komutunu kullanmamış olsaydık. İlk resimdeki gibi, üstten ve soldan çerçeveye (border’a) çok bitişik olacaktı. Bu nedenle padding:10px kullandık. Siz istediğiniz değeri verebilirsiniz.
Not: padding: 10px değeri, padding: 10px 10px 10px 10px; değerinin kısaltılmış halidir. Bunu aşağıda anlatacağım.
margin:115px auto 0 auto;
margin komutu ise bir çerçevenin pozisyonunu belirlemekte çok işimize yarar. Çünkü çerçeveye veya yazıya dıştan boşluk vermektedir. padding komutunda çerçevenin içindeki kenar boşluğunu belirlemiştik. margin ise, çerçevenin sayfaya göre yerini belirliyoruz yani çerçeve dışından boşluk vermiş oluyoruz.
peki neden margin:115px auto 0 auto; şeklinde kullandık? 115px neresi, auto neresi, 0 neresi? (yani hangi yön) Bu tip kalıplar padding ve marginde kullanılır. Yani boşluklar;
ş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;
Eğer tüm boşluklarınız aynı olacaksa, yani üstten, alttan veya yanlardan 10px boşluk vermek istiyorsanız margin: 10px; değeri işinizi görecektir. Eğer her yönde aynı boşluk verilecekse on saat onları tek tek yazmaya gerek kalmaz :)
Ayrıca CSS’de auto değeri otomatik anlamına gelir. Yani biz yukarıdaki kodda, “sayın CSS, sağdan ve soldan otomatik boşluk verip çerçevemi ortalar mısın lütfen?” dediğimiz için, resimde görüldüğü gibi çerçevemiz ortalandı :) Üstten de 115px boşluk verdik. Çünkü çerçeveciği arka plandaki beyaz alana getirtmek için buna ihtiyaç vardı. Ama yazı başlığını ekleyeceğimiz zaman o boşluğu tekrar düzenlememiz gerekecek :)
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;
Aşağıdaki kodlar CSS3 sürümünün kodları olduğundan ve başındaki çizgiler nedeniyle henüz aklımda tutmayı başaramadığım kodlardır :D Yapamadığım bir şey için öneri vermek yanlış olur. Bu nedenle siz bu kodları yazarken benim gibi şuradaki siteden yardım alabilirsiniz. Yine de bildiğim kadarıyla kodları biraz açıklayayım.
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;
Eğer siz “Ben sol üst ve sağ altın oval olmasını istiyorum. Diğerleri sivri kalsın. Bu nasıl olacak?” derseniz aşağıdaki makale gibi kodu kullanmanız gerekir. Ne kadar da çok :S
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;
top: üst – right: sağ – bottom: alt – left: sol
bunları bilmeniz yeterli.
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;
