CSS 

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;
}

Emrah

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.

Bunları da sevebilirsiniz

CSS Border Örnekleri” için 2 yorum

Yorum Yap

umraniye ankara
ümraniye escort
porn izle kartal escort beşiktaş escort ataköy escort rus escort