Herkese Merhabalar :)

Web Tasarımı işine yeni yeni başlayan bir çok arkadaşımız, Css web tasarım olayını sadece, yazılara link vermek, üzerine gelince şu renk, aktifken bu renk, arka plan rengi ya da boyutlarından ibaret olarak bilir ya da sadece bu şekilde kullanır.

Mesala basit bir örnek vermek gerekirse; köşeli bir buton yapmak için, photoshop ya da benzeri bir programda buton yapmakla oldukça uğraşır bunu html de çevirir sonra sitesine ekler ya da benzeri uğraşlar sergiler ama basit bir buton yapmak için sadece bir kaç satır css bilgisi yeterli olacaktır. Hikaye kısımlarını atlayıp hızlıca bir örnek yapalım hemen..

Aşağıdaki kodları .css dosyanızın içerisinde de kullanabilirsiniz, style=”” etiketi içerisinde de burası size kalmış.

[css]
border-radius: 5px; /* Standart Özellik: CSS 3 için kullanılan özellik */
-moz-border-radius: 5px; /* Mozilla Firefox için kullanılan özellik */
-webkit-border-radius: 5px; /* Safari ve Chrome için kullanılan özellik */

[/css]

Örnek 1- Görünüm;

Tüm kodları açık açık yazmaya çalıştım daha açıklayıcı olması için, left (sol) – top(üst) – bottom(alt) Ayrıca piksel hızlıca rastgele girdim siz hesaplayarak yaparsanız daha düzgün görüntü elde edebilirsiniz :)
Bu örneğin css kodları ise;

[css]
/* css ile oval div yapımı */

background-color: #f9f9f9;
border:1px solid #cCc;
width: 100px; height: 40px;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
padding-bottom: 5px; padding-top: 25px;
padding-left: 20px;
font-size: 16px;
/* css ile oval div yapımı */

[/css]

Ayrıca köşelere ayrı ayrı değerler vererek farklı bir görüntü de oluşturabilirsiniz. Bunun için de aşağıdaki örneği inceleyebilirsiniz.

[css]
/* farklı köşeler */
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 45px;</pre>
/* farklı köşeler */
[/css]