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.

Fotoğraf Galerisi Şablonu Hazırlama

Site işleri ile uğraşan kişiler genelde kendi mamüllerini kullanmak isterler. Mesela bir fotoğraf galerisinde alt yapısından üst yapısına kadar herşeyini kendisi oluşturmak ister. Ama bazı zamanlar bu mümkün olmuyor. Programlama değil üst yapısında değişiklik yapacak bilgimiz olmayabiliyor. Aslında işin içine girince çok da zor olmadığı görülüyor. Bu yazımda basit yollu bir fotoğraf galerisinin üst yapısını yani tasarımını ve yerleşimini dilimin döndüğünce anlatmaya çalışacağım.

Continue reading

Paylaşımlarınızı Periyodik Olarak Twitter’a Ekleyin

Bir Twitter servisinin incelemesinde daha birlikteyiz. Blogumuzdan, diğer kullandığımız servislerden (Flickr, Del.icio.us vb.) yaptığımız güncellemelerimizi Twitter’dan bizi takip edenlerin görmesini elbette isteriz. Ben kendimden kıyas biçecek olursam Google Reader hesabımda bazen çok güzel içerikler paylaşıyorum. Bu paylaşımlar Facebook profilimde görünüyor, Twitter’a ise elimle bağlantıları tek tek elle ekliyorum. Bu benim için zahmetli oluyor. Gördüm ki bu işi bir servis bizim adımıza yapıyor.

Continue reading