CSS3 ile Web Sayfasına Yuvarlak Köşeli Elemanlar Koymak

Bir web sayfasına içerik yerleştirilirken genellikle div, span gibi kutu özelliği olan ve sayfa üzerinde belirli bir yüzeyi kaplayan elemanlar kullanılır. Tablo ile web tasarımının modasının geçtiği şu günlerde, tasarımcılar sayfalarını "div" veya "span" gibi kutu elemanları ile hazırlamaktadırlar. Bu elemanlar CSS'nin verdiği sayısız özellikler sayesinde web tasarımcıların daha keliteli ve daha güzel görünümlü siteler tasarlamasına olanak sağlamıştır. Bu yazıda artık üçüncü versiyonu ile karşımıza çıkan CSS'nin tasarımcılara verdiği yeni bir imkandan bahsetmek istiyorum. CSS3 ile gelen "border-radius" kodu sayesinde artık tasarımcı hazırladığı web sayfasına köşeleri yuvarlatılmış HTML elemanları yerleştirebilir. Bunu bir örenek kod üzerinde gösterelim. Mesela bir "div" elemanı CSS3 sayesinde şu şekilde biçimlendirilebilir,

<div style="float:left; text-align:center; font-size:18px; background: #9CF; border:solid 5px #c1c6c7; border-radius: 55px 35px 20px 10px; padding:30px;">Köşeleri Yuvarlatılmış Div</div>

Bu kodlamanın sonucu aşağıdaki gibi görüntülenir.

Köşeleri Yuvarlatılmış Div

İsterseniz benzer bir kodlama ile yuvarlak butonlar da yapabilrisiniz. Alın size bir örnek,

<input type="button" value="Yuvarlak buton" style="text-align:center; font-size:18px; color:#fff; background: #9CF; border-radius:10px; padding:5px;"/>

Bu kodlama da şu şekilde görüntülenir,

"border-radius" bu kodun standart halidir. Eğer yaptığınız kodlamanın diğer web tarayıcılarda da sorunsuz çalışmasını istiyorsanız Şu kodları da sayfanıza eklemelisiniz,

-moz-border-radius:55px 35px 20px 10px; / Firefox için /

-webkit-border-radius:55px 35px 20px 10px; /Safari ve Google Chrome için /

Burda verdiğiniz

ilk değer: sol-üst köşeyi,

ikinci değer: sağ-üst köşeyi,

üçüncü değer:sağ-alt köşeyi,

dördüncü değer:sol-alt köşeyi

yuvarlatmak için vermeniz gereken yarıçap değerleridir. Eğer yarıçap için tek bir değer girerseniz, tüm köşeler aynı değerde yuvarlatılır.

Son olarak "border-radius" kodu ile uymlu tarayıcı listesini de verelim.

Uyumlu tarayıcılar:

-----------------------------

Firefox 3.5 ve üzeri

Internet Explorer 9 ve üzeri

Netscape Navigator 3 ve üzeri

Opera 10.5 ve üzeri

Google Chrome 4.0 ve üzeri

Kaynak:  Fatih Hayrioğlu

Yazıların Arkaplan Rengini Değiştirmek

Web sayfanıza koymak istediğiniz metin içeriğinin önemli gördüğünüz kısımlarını işaretlemek, belirgin hale getirmek isteyebilirsiniz. Basit bir CSS kodu yardımıyla ders çalışırken kullandığınız fosforlu kalemle işaretler gibi metin içeriğinizin istediğiniz kısımlarını ya da tamamını işaretleyebilirsiniz. Bunun için kullanmanız gereken CSS kodu "background-color" dur. Bu kodu metin içeriğinizi işarelemek içi kıullandığınız HTML tagına (<b>, <a>, <span>, <div>,... gibi) bir "Style" özelliği olarak ekleyebilrsiniz. Bunu bir örnekle açıklayalım,

< b style="background-color: #9fc666;" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at...... </b>

Bu kodlamanın sonucu aşağıdaki gibi görüntülenir.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque.

Taglar arasındaki farkı görebilmemiz açısından aynı işemi <div> tagı için uygulayalım.

<div style="background-color: #9fc666;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque.</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum augue. Nulla facilisi. Vestibulum commodo tellus nec urna posuere cursus. Nam nec odio magna. Praesent vulputate elementum erat, vel tincidunt nisi ullamcorper at. Nulla cursus, lectus eu dignissim porta, massa ante pulvinar orci, hendrerit accumsan libero sem id turpis. Curabitur bibendum aliquet porta. Duis porta convallis scelerisque.

Dikkat ettiyseniz iki tag arasında önemli bir fark var. HTML'nin bazı tağları sayfayı satır satır işaretlerken bazıları kutu şeklinde bir alanı işaretler. Tasarımınızı yaparken bu önemli farkı da göz önünde bulundurmalısınız.