Tasarımlarımızı XHTML ve CSS’e geçirirken bazen çok basit şekilleri bile kimi zaman resim olarak kaydederek tasarımlarımıza ekliyoruz. Oysa bu davranış bize ekstra bir “http isteği” olarak dönmüş oluyor. Daha önce CSS Sprite'ların kullanım alanları yazımda bu istekleri azaltarak performansı nasıl yükselttiğimiz konusuna az da olsa değinmiştim. Bu yazıda ise minik ve basit resim dosyalarından kurtularak http isteklerini minimum düzeye çekecek ve sitelerimizin performansını arttıracak. Pingdom ile performansınızı ölçmeniz mümkün.
Dertlere derman css border
Başlıktan da anlayabileceğiniz gibi bu şekilleri çizmek için elimizdeki en önemli özellik border olacak. İstediğiniz şekli çizmek için border’ları solid yapmalı ve genişliklerini ayarlamalıyız.
Şimdi ufak bir örnekle border’ları nasıl ayarlamamız gerektiğini görelim.
.cisim{
width:0;
height:0;
line-height:0;
border-top: 50px solid magenta;
border-right: 100px solid green;
border-bottom: 100px solid red;
border-left: 50px solid yellow;
}
<span class="cisim"></span>
farklı renkteki border'lar
Burada rahatlıkla görebilmeniz için border değerlerini çeşitli renklerde tanımladım. Boyutsuz olan span elemanının etrafında üçgensel olarak 4 farklı bölge oluşuyor. İşte bu bölgeleri kullanarak çeşitli dörtgenler, içbükey çokgenler ve üçgenler çizerek tasarımlarımızı tamamlayacağız.
Konuşma balonu örneği
Tasarımlarda artık sıkça karşılaşılan elemanlardan biri de konuşma balonları. Genelde Blog sitelerinin yorumlar bölümünde, twitter kullanan kişilerin kişisel sitelerinde sıklıkla karşımıza çıkıyor konuşma balonları. Tasarımların olmazsa olmaz elemanı olan bu konuşma balonlarının yazı yazılan kısmını yapmak genelde imaj dosyası gerektirmeyen bir şekilde yapılabiliyor. Lakin balonun ucundaki oklar CSS şekilleri tekniğini çözene kadar imaj dosyası ile yapılmaktaydı. Artık bu imaj dosyasını kullanmadan maksimum iki satırlık bir css stili ile hem bandwith’ten hem de performanstan kazanç sağlayacağız.
ilk adım
Gördüğünüz gibi konuşma balonumuz hazır. Balonumuzu dizayn ettikten sonra bu balonu 2 parçaya ayırarak çalışmamıza devam edeceğiz.
ikinci adım
Okun biçimlendirilmesi
İki parçaya bölünen elemanda en çok okun biçimlendirilmesi konusuna yoğunlaşacağız. Çünkü diğer eleman basit bir div biçimlendirilmesi ile oluşturulabiliyor. Önce okun değerlerini belirleyelim:
üçüncü adım
Gördüğünüz gibi 25 e 25 piksellik bir ok tasarladım. Arkaplan olarak ben bildirgeçte arka plan resmi olmadığından beyaz kullandım.
Kodlamaya giriş
Öncelikle oku oluşturmak için bir span elemanı yaratıyoruz.
<span class="ok"></span>
Şimdi bu oku biçimlendirmek için head etiketleri içinde stilimizi tanımlıyoruz.
<style> .ok{ width:0; height:0; line-height:0; border-top: 25px solid #999999; border-right: 25px solid white; border-bottom: none; border-left: none; } </style>
Yarattığımız span’ın genişlik, yükseklik ve satır genişliği yüksekliğini 0 belirterek bu şekilleri oluşturabilmemiz mümkün oluyor. Daha sonra border-top tanımlaması ile okumuzun yükseklik değerini ve hangi renkde olacağını belirtiyoruz. Border-right ile de genişlik değerini ve okun arka planında bulunan renk değerini giriyoruz. Eğer arka planda resim kullandıysanız bu değeri transparent olarak girmelisiniz.
Gördüğünüz gibi okumuz oluştu. Şimdi yapmamız gereken ise ana kutucuğun altına bunu iliştirmek. Bunun için ben 300px genişliğinde bir p tanımladım. Ve bunu balon’umun içine koydum. Sonra da okumu bu p elemanından sonra yerleştirdim.
<div class="balon"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p><span class="ok"></span></div>
Okumuzda da bazı düzenlemeler yaparak balonumuzu son haline sokuyoruz:
<style>
.balon{ width:340px;}
.balon p{ width:300px; line-height:20px; background:#999; color:#fff; font-size:20px; padding:20px; margin:0; float:left; }
.ok{ width:0; height:0; line-height:0; border-top: 25px solid #999; border-left: none; border-bottom: none; border-right: 25px solid white; float:left; margin: 0 0 0 250px; }
</style>
İşte bu kadar basit! Artık basitçe şekiller üretebilir ve tasarımlarınızda kullanabilirsiniz. Benim kullandığım birkaç başka şekil de var. Bunları da inceleyelim.
tüm şekillerin çizimi
Şekil 1
Basit bir üçgendir. Tüm border değerlerine eşit ölçülü sayılarda atama yapacağız fakat border-top hariç hepsi renksiz olacaktır. Border-top ise bizim şeklimizin rengini verecektir.
<span class="cisim"></span>
<style>
.cisim{
width:0;
height:0;
line-height:0;
border-top: 50px solid #999;
border-left: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
Şekil 2
Her ölçüsü değişik olan bir üçgendir. Border değerlerinin tümü farklı ölçülerdedir. Border-top cismin rengini belirler, diğerleri ise arkaplan rengini belirler.
<span class="cisim"></span>
<style>
.cisim{
width:0;
height:0;
line-height:0;
border-top: 50px solid #999;
border-left: 20px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid transparent;
}
</style>
Şekil 3
Bayrak gibi bir görüntüsü olan bu şekil nerede işinize yarar bilinmez ama çokgenlerin oluşturulması konusunda bir örnek olsun.
<span class="cisim"></span>
<style>
.cisim{
width:0;
height:0;
line-height:0;
border-top: 50px solid #999;
border-left: 50px solid #999;
border-bottom: 50px solid #999;
border-right: 50px solid white;
}
</style>
Şekil 4
Bu şekil gördüğünüz gibi şekil 1’in tam tersi. Bu yüzden şekil 1’de border-top değerini cismin rengi olarak göstermişken burada border-bottom’da cismin rengini belirliyoruz.
<span class="cisim"></span>
<style>
.cisim{
width:0;
height:0;
line-height:0;
border-top: 50px solid white;
border-left: 50px solid white;
border-bottom: 50px solid #999;
border-right: 50px solid white;
}
</style>
CSS ile basit şekilleri bu şekilde çizebilmek mümkün. Biraz yaratıcılık biraz da CSS hakimiyeti ile daha karışık şekiller de çizmek tabi ki mümkün.
Bakmadan geçmeyin:
Twitter ile takip
Friendfeed ile takip
