CSS Border Örnekleri

Metin 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

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 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.

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