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ı:

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

Rounded Corners

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

\"css

CSS Kodları:

[php]
.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;
}
[/php]

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ı:

[php]
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;
}
[/php]

Emrah

1981 Samsun doğumlu ve Gazi Üniversitesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi mezunu. Bilişim Teknolojileri Öğretmeni, Yazar, WebMaster, Blogger, SEO eğitmeni. Araştırmacı, sinema sever, fitness yapar, farklı doğal güzellikleri keşfetmeye bayılır.

2 thoughts on “CSS Border Örnekleri

  • 25 Temmuz 2010 tarihinde, saat 13:12
    Permalink

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

  • 31 Temmuz 2010 tarihinde, saat 20:14
    Permalink

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

Yorum Yapın