İnternet Sayfalarının Ölçüsünü Alın

Tasarım yaparken veya CSS kodlaması esnasında ölçüler çok önemlidir. Drag and drop ruler ise yatay ve dikey iki tane cetvel ile herhangi bir internet sayfasının ölçülerini pixel, cm, ve in birimlerinde görebilmemizi sağlıyor. Ayrıca sayfa kenarlarındaki klavuz cetvellerinden de konumlandırmaları fevkalade görebiliyoruz.

Kullanımı oldukça kolay olan servisin sağlayacağı katkı; tasarım veya kodlama esnasında nesneler arasındaki ölçüleri, genel hat ölçülerini rahatlıkla görebilmek.

CSS:Açıklamalı Yatay Menü Yapımı

CSS artık derya deniz oldu. Herşey olmasa da birçok şeyin yapılması şekillendirilmesi CSS 3 ile birlikte ortaya çıktı. Bunlar bir yana dururken CSS ile yapılan çok güzel menülerde gözümüzü doldurmayı başardı. Bu tür menülerden bir tanesi de açıklamalı olanlarıdır. Açıklamalı menü dediğim şey özellikle navigasyon menülerde karşımıza çıkıyor. Büyük puntolarla yazılmış link (örneğin anasayfa) hemen linkin altında da küçük puntolarla yazılmış açıklaması (örneğin blog) bulunuyor. Bu tür menüleri CSS ile yapmak mümkün.

Anlatmaya geçmeden önce açıklamalı menümüzün yapılmış halini şöyle bir görelim:

Önce CSS düzenleyici programımızda menümüzü şekillendirelim. Class seçici yerine id seçici kullanacağız. Bunun için ilk adım olarak ul olarak kullanacağımız nav’ı biçimlendireceğiz.

#nav{
	list-style-type:none;
	background:#000;
	margin:0;
	padding:0;
	border-bottom:3px solid #999; }

İlk satırdaki biçimlendirme ile listede herhangi bir işaret kullanmadık daha sonrasında da arkaplanı renklendirdik. Margin ve padding değerlerini de bazı tarayıcıların otomatik değer atamasından dolayı sıfırladık. Son olarak işin biraz artistliğine kaçıp listemizin dip kısmına 3 pixel kalınlıkta düz bir çizgi atadık.

Şimdi de li etiketini biçimlendireceğiz. Aşağıdaki kodu takip edelim

#nav li{
	float:left;
	margin-left:5px;}

Normalde listelerin yatay olması için display:inline özelliğini kullanırdık. Fakat burada inline kullandığımız zaman menü yatay değil dikey oluşuyor. Çünkü span etiketi biraz işi bozuyor. Bunun için float uyguladık. Margin değeri de butonlar arası boşluğu ifade ediyor ki istediğimiz değeri atayabiliriz. Şimdi de li etiketinin link durumuna şekil vereceğiz.

#nav li a{
	text-decoration:none;
	color:#FFF;
	font-size:24px;
	font-family:Verdana, Geneva, sans-serif;
	border-left:2px dashed #FFF;}
 
#nav li a:hover{
	color:#F00;
	border-color:#F00}

Beyaz renkli linklerimize kenar çerçeve atadık ve üzerine gelince kırmızıya dönecek.

Şimdi de açıklama için span ayarlaması yapacağız.

.bilgi{
	font:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#FF0;
	display:block;
	padding-left:5px;}

Sarı renkte ve 12 pixel büyüklükte olacak açıklama yazılarımız. Padding değeri üst link ile aynı hizada olmasını sağladı. Ayrıca display:block kullanma nedenimiz de span’ın yeni satırdan başlamasını sağlamak.

Şimdi bu yazdıklarımızı html sayfamızda bir deneyelim.

<ul id="nav">
	<li><a href="#">Anasayfa</a><span class="bilgi">Blog</span></li>
    <li><a href="#">Hakkımda</a><span class="bilgi">Ben kimim?</span></li>
    <li><a href="#">Resimler</a><span class="bilgi">Resim galerim</span></li>
    <li><a href="#">İletişim</a><span class="bilgi">Benimle irtibat</span></li>
    <li><a href="#">Sosyal Ağlar</a><span class="bilgi">Twitter+Facebook</span></li>
</ul>

Kaydettiğimiz zaman arkaplanın siyah olmadığını daha doğrusu arkağlanın görünmediğini fark edebiliriz. Yani bu haliyle bozuk bir görüntü meydana geliyor. Bunun sebebi de float kullandıktan sonra ul’nin kapsama sorununa maruz kalması oldu. Bunun için clear kullanmamız gerekiyor.

Ancak bildiğimiz clear yönteminden farklı olarak after özelliğini kullanacağız. Üstelik bunu ul etiketine uygulayacağız. Önce aşağıdaki kodları css dosyamıza ilave edelim.

.duzelt:after { clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden; }
* html .duzelt { height: 1px; } /* IE6 */
*:first-child+html .duzelt { min-height: 0; } /* IE7 */

Şimdi de html begemiz içerisindeki ul etiketine class uygulayacağız.

<ul id="nav" class="duzelt">
	<li><a href="#">Anasayfa</a><span class="bilgi">Blog</span></li>
    <li><a href="#">Hakkımda</a><span class="bilgi">Ben kimim?</span></li>
    <li><a href="#">Resimler</a><span class="bilgi">Resim galerim</span></li>
    <li><a href="#">İletişim</a><span class="bilgi">Benimle irtibat</span></li>
    <li><a href="#">Sosyal Ağlar</a><span class="bilgi">Twitter+Facebook</span></li>
</ul>

Gördüğümüz gibi artık düzgün bir şekilde çalışıyor menümüz. Açık söylemeliyim ki bu menünün yapımını ben de çok merek ediyordum ve dünden bu yana makaleyi yazmaya karar verdikten sonra araştırdım. Sevgili Fatih Hayrioğlu’na ve Bilal Çınarlı’ya da katkılarından dolayı teşekkür ederim.

Menü önizleme için buraya kaynak kodları indirmek için de buradan buyrun.

CSS Kodu Hazırlamak Artık Çok Kolay

CSS, web işleri ile uğraşan herkesin kısmen de olsa bilmesi gereken bir iştir. Blog yazarlarının bile bloglarında yapacağı yerleşimlerde, ekleyecekleri resimlerde, yazacakları yazılarda mantıken bilmeleri gereken birşeydir. Daha sonraki aşamada ise kendi tasarımlarını CSS’e aktarıp bir dizayn oluşturması vardır. Ancak bazen bu durum çok kolay olmayabiliyor. CSS’deki tüm terimlerin akılda tutulması bazen zor olabiliyor.

İşte tüm bunları göz önünde bulunduran ve neredeyse hiç bilgisi olmayan birinin bile kolayca CSS hazırlamasına imkan sağlayan Drawter artık imdada yetişiyor. Drawter yazarak değil çizerek CSS kodları hazırlamamızı sağlayan çok güzel bir servis.

Şimdi servisin kullanımından biraz bahsedeyim resimler yardımıyla.

Bizi yukarıdaki gibi üst ve sol kısımda cetveli bulunan bomboş bir sayfa karşılıyor. Burada biz istediğimiz ölçüleri çizeceğiz. Örnekte ben 500 px genişlik ve 50 px yüksekliğe sahip bir alan çizdim. Şidmi ikinci resimde bu alana div mi yoksa başlık mı veya başka bir şey mi geleceğini belirleyeceğiz.

Az önce çizdiğimiz alana “drawing options” menüsünden ne atayacağımızı seçiyoruz. Ayrıca “markup tree” yardımı ile iç içe giren divleri görebiliyoruz. Daha doğrusu kutu modelini daha basit bir şekilde görebiliyoruz.

Tüm işlemlerimiz bittikten sonra da “code” menüsünden kodumuzu oluşturuyoruz. Hepsi bu kadar. Zaten HTML yerleşim kodunu da CSS kodu ile birlikte verdiği için tekrar zamanımızı harcamaya gerek kalmıyor. Ayrıca işe başlamadan önce şuradaki videoyu da izleyerek anlatmak istediklerim hakkında daha geniş bilgiye sahip olabilirsiniz.

10 Güzel Kod Gösterim Şekli

Bloglarımızda veya diğer internet sayfalarımızda ara ara kodlar yayınlıyoruz. Yayınlanan bu kodların tasarım bütünlüğünü bozmaması ve okunabilirlik oranı da oldukça önemlidir. Bu derlememde bu kriterleri ele alan 10 farklı kod gösterim şekline göz atacağız. Aslında daha birkaç adet fazla gösterim şeklini listeye alabilirdim ancak onlar da listeye aldıklarımın aynılarıydı. Bu yüzden farklı olanlara göz atmak daha iyi olacak.

1-siarto.com

Renklendirme ve arkaplan rengi ile birlikte okunabilirliği geçrekten muhteşem. Tasarım bütünlüğü de ele alınarak harika bir gösterim elde edilmiş. Ayrıca CSS, HTM, PHP dillerinin hepsinde renklendirme yapılmış.

2-goodbytes.be

Arkaplan çok hoş görünmese de renklendirmesi oldukça iyi. Ayrıca siyah tasarım içinde hemen fark edilebiliyor. Yine farklı dillerde renklendirme yapılmış.

3-onwired.com

Listedeki en güzel kod gösterimlerinden. Satırların farklı renkle ve numaralarla gösterilmesi çok hoş. Ayrıca tasarım bütünlüğünü bozmayan renklerle ve okunaklı yapılması da müthiş. Tek eksiği kod renklendirmesinin eksik olması 🙂

4-24ways.org

Satırların numaralarla belirtilmesi ve her satırın farklı iki renkle ayrılması okunmasını kolaylaştırıyor. Her ne kadar kodlarda renklendirme yapılmasa da seçilen kod rengi okunabilirliği arttırıyor. Bu gösterim şeklinin en büyük artısı kodların en altında kod kaynağının txt dosyasında verilmesidir. Kopyalama yapılması için güzel bir özellik.

5-snipt.net

Renklendirme yapılması ve kod alanının diğer alana göre daha açık bir renkle gösterilmesi oldukça hoş.

6-alexsancho.name

Satırların numaralandırılmış olması ve satırların altının çizgilerle belirtilmesi güzel ve kullanışlı. Renklendirme yapılmasa da seçilen kod rengi aykırı durmuyor. Ancak kodu kopyalamak istersek biraz uğraşıyoruz çünkü satır numaraları ile birlikte ve aradaki boşlukları da alarak kopyalanıyor. Kaynak gösteriminde bile aynı sorun var. Bir artısı da kodun istendiğinde gizlenebilmesi.

7-viget.com

Kod alanının farklı bir renk ile belirtilmesi ve genel dizayna aykırı durmaması oldukça güzel. Uzun kod satırları için üzerine gelince alanın büyümesi çok kullanışlı. Renklendirme olmasa da rahat okunabiliyor. Ayrıca kopyalama yapmak çok basit. Tek kötü yanı numaralandırma yok.

8-yakuter.com

PHP, CSS, HTML ve diğer dilleri desteklemesi ve renklendirme yapması çok güzel. Ayrıca kaynak kodu görüntüleme ve kopyalamayı kolaylaştırma, yazıcıdan çıktı almak için buton bulunması, panoya kopyala butonunun bulunması çok büyük bir artı. Erhan’ın kullandığı bu gösterim şekli WordPress’e ait  Syntax Highlighter eklentisi sayesinde yapılıyor.

9-kadirgunay.com

Renklendirme ve okunabilirlik oldukça iyi. CSS, HTML, JavaScript ve diğer birçok dili de destekliyor.

10-veerle.duoh.com

Kod alanının çizgili kağıt gösteriminde belirtilmesi ve her satırın hatasız gösterimi muhteşem. Numaralandırma, kod renklendirme de çok iyi. Ayrıca seçilen renkler de çok güzel. Listedeki en iyi gösterimlerden birisi de budur.

FriendFeed Embed Özelleştirme

Temamda kullandığım sosyal akış sayfasında kullandığım sosyal ağ ve servislerdeki son durum güncellemelerinin gösterildiğini söylemiştim. Bunun için de FriendFeed’in sağladığı API desteğini kullanmıştık. API arkaplan rengi, durum görüntülerinin istediğimiz şekilde düzenlenmesine imkan veriyor. Ancak biraz da programlama bilgisine sahip olmamız gerekiyor. Ancak FriendFeed’i sitemize eklerken özelleştirme yapmak için bir diğer yol da embed kodumuzu CSS ile desteklemektir.

Dün bir projemde kullanırken öğrendim FriendFeed’in embed koduna CSS ile katkı sağladığını. Düzeni bozmamak için varsayılan çerçeve rengini, yazı tipini, yazı rengini, logo durumunu ve daha birçok özelliği kendimiz belirleyebiliyoruz. Sadece arkaplan için herhangi bir yetkilendirme yapamıyoruz. Zaten logoyu gizleme, hesap daveti gibi özellikleri kaldırmak için embed kodunu oluşturmadan önce seçenekleri ayarlıyoruz. Bunun dışındaki çerçeve rengi, yazı tipini ise aşağıdaki kod ilebelirlemek mümkün.

#friendfeed { border: 0px !important;
background:none !important;}
.widget { border: 0px !important; font-family: Arial, Helvetica, sans-serif;}
.feed { border: 0px !important; font-family: Arial, Helvetica, sans-serif;}
.body {   border: 0px !important }
.logo { border: 0px !important }

Bu kodu sitemizin CSS dosyasına ilave ediyoruz. Hepsi bu kadar.

CSS3:Oval Köşe Kullanımı

Web sayfalarında görsel açıdan önemli yer tutan öğelerden birisi de oval köşelerdir. Oval köşelerin tasarım aşamasında çizimi basit olsa da kod dökümünde oldukça sıkıntı verenek bir olaydır.  CSS3’e kadar her köşeye bir resim atayıp oval görüntüyü bu şekilde elde ediyorduk. Ancak bu durum gereğinden fazla kodu, gereksiz resimleri de yanında getiriyordu. Bu da sayfayı görüntülemek isteyince de haliyle daha yavaş yüklenmekte. Resimlerin gereksiz bantwith kullanımını hiç söylemeyelim bile. İşte tüm bunlar CSS3 ile birlikte son buluyor. CSS3’ü de şu anda modern tarayıcalardan olan Firefox ve Opera tarafından ağırlıklı olarak destekleniyor. Yani aşağıda yapacağımız örnekleri bu iki tarayıcıdan birinde görüntülemek en doğrusu olacaktır.

Örnek 1: Her Köşeye Ovallik Verme

#ornek1{
	width:500px;
	height:100px;
	background:#C6EAFF;
	border:2px solid #0080FF;
	-moz-border-radius:10px;
	-webkit-border-radius:0px;
	padding:10px;}

Yukarıdaki kodlarda -moz-border-radius ve -webkit-border-radius yardımıyla köşeleri oval yapabiliyoruz. Buralardaki pixel değerlerinde oynama yaparak daha oval veya daha düz görüntüler elde etmek mümkün. Örnekteki 10px ovallik değeri ile aşağıdaki görüntüyü elde ediyoruz.

Örnek2: İstediğimiz Köşeyi Oval Yapma

Yukarıdaki örnekte her köşe yazdığımız standart kod yardımıyla oval oldu. Ancak istediğimiz köşeyi oval istediğimizi keskin yapmak mümkün.

#ornek2{
	width:500px;
	height:100px;
	background:#FDD;
	border:solid 2px #EA0000;
	-moz-border-radius-topleft:15px;
	-webkit-border-top-left-radius:15px;
	-moz-border-radius-bottomright:15px;
	-webkit-border-bottom-right-radius:15px;
	padding:10px;}

Biz bu örnekte sol üst köşeyi ve sağ alt köşeyi oval yaptık. İstersek tam tersini de yapmak mümkün. Bunun için aşağıdaki değerlere göz atmak gerekiyor.

  • -moz-border-radius-topleft
    -webkit-border-top-left-radius
    sol üst köşe
  • -moz-border-radius-topright
    -webkit-border-top-right-radius
    sağ üst köşe
  • -moz-border-radius-bottomright
    -webkit-border-bottom-right-radius
    sağ alt köşe
  • -moz-border-radius-bottomleft
    -webkit-border-bottom-left-radius
    sol alt köşe

Yukarıdaki konumlamalar ile kodlarımızı oluştururarak istediğimiz köşeye istediğimiz ovalliği verebiliyoruz.

Örneği görüntülemek için buraya CSS dosyasına bakmak için de buraya bağlantı vererek yazımızı bitirelim. Sorularınızı yorumlardan iletebilirsiniz.

CSS Compressor:CSS Optimizasyon

Günümüzdeki internet sayfalarının görsel olarak ön plana çıkmasını sağlayan CSS bazen çok büyük boyutlara ulaşır. Satır aralarındaki boşluklar, yorumlar ve buna benzer unsurlar CSS’in şişmesine ve her yüklenişinde site sahibine ek maliyet getirir. Bu unsurları kaldırıp sıkıştırma işlemine de optimizasyon denir. Bunu yapmak için onlarca program ve internet servisi mevcut. Onlardan birisi ve en başarılı olanlardan birisi de CSS Compressor‘dur. Çalışması için sadece CSS kodunuzu kutucuğa basıp onaylamanız yeterlidir. Ücretsiz olan servis benim kendi sitemde bile %20’ye yakın sıkıştırma yaptı. Mutlaka deneyin.

WordPress İçin Yazı İçinde Not Alanları Oluşturmak

WordPress blogumuzda yazılar yazarken bazıyerlerin not olarak aktarılmasını diğer kısımlara göre daha farklı görünümde olup dikkat çekmesini isteriz. Bunun için çözümlerden birisi özel bir span tanımlayıp bu kısmı span ile yazmaktır. Ancak bu her zaman çözüm olmuyor. Bunun yerine özel bir not kodu oluşturup, not alanını CSS ile kendimize göre ayarlayarak daha basit bir şekilde yapabiliriz.

Continue reading

CSS Sprite Tekniği

İnternet standartlarının yükselişi ile CSS, yeni bir soluk getirdi hem kullanıcılara hem de programcılara. Son dönemin de yeni soluğu Sprite CSS yine hem kullanıcı açısından hem de site yöneticileri açısından pek çok avantajı beraberinde getirdi. Makalemizde Sprite CSS’in ne olduğuna, kullanıcılara, site yöneticilerine ve programcılara ne gibi avantajlar sağladığına ve Sprite CSS’in nasıl oluşturulacağına dilim döndüğünce değinmeye çalışacağım. Aslında makaleyi kendi adıma unutmamak için yazdığımı da belirtmek isterim (:

Continue reading