CSS 23 Temmuz 2010

CSS Border Örnekleri

\"cssMetin kutuları veya resimlerde çeşitli efektler elde etmek için bazı basit hileler paylaşmak istiyorum.

CSS ile klasik border efektleri dışında ışıklı gölgelerde kullanabiliriz. Light Shadow dediğimiz ışıklı gölge için gri tonlar kullanılabilir. CSS3 ile gerçek bir ışıklı gölge yapabilirsiniz.

Light Shadow

\"light

CSS Kodları:

.shadow {
padding: 20px;
border: 1px solid #f0f0f0;
border-bottom: 2px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Rounded Corners

CSS3 ile köşeleri yuvarlatılmış kutularda yapabilirsiniz. Örnek:

\"css

CSS Kodları:

.pressed {
color: #fff;
padding: 20px;
background: #111;
border: 1px solid #000;
border-right: 1px solid #353535;
border-bottom: 1px solid #353535;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Beveled

Bu teknik, resimler için kullanılan çift border tekniğidir. Outline özelliği kullanılarak border da ince bir eğimli görünüm verilir.

\"beveled\"

CSS Kodları:

img.light {
outline: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 10px;
background: #f0f0f0;
}
img.dark {
outline: 1px solid #111;
border-top: 1px solid #555;
padding: 10px;
background: #333;
}
Bunu da Oku:  Animasyonlu CSS3 Fotoğraf Yığını

Yazar Bilgileri

Emrah emrah19may@hotmail.com
1981 Samsun doğumlu ve Gazi Üniversitesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi mezunu. Bilişim Teknolojileri Öğretmeni olarak görev yapmakta olup DMOZ Editörü, Web-Grafik Tasarımı ve SEO eğitmeni.

BUNLARI DA OKUYUN

Yapılan Yorumlar (2)

  1. Teşekkürler. Border konusu görünüm için önemli. CSS in imkanlarından faydalanmak için iyi bir yazı…

  2. Güzel borderlar emeğinize sağlık.

Yorum Yap