Zıplanacak içerik
  • Üye Ol

CSS3 Gölgeli Kutular (3)


suaritiminet

Önerilen İletiler

Safari ve Chrome 'da kusursuz çalışan gölgeli kutular yapmak isterseniz, aşağıdaki kodlardan faydalanabilirsiniz.

 

HTML SAYFA KODLARINIZ:

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Css3 Gölgeli Kutular</title>
<link href="style.css" rel="stylesheet" media="all">
</head>
<body>

	<div  class="box1">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
		laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
		voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
		non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
	</div><!-- end box1 -->
	<div class="box2">
	 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
		laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
		voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
		non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
	</div><!-- end box2 -->
	<div class="box3">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
			ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
			laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
			voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
			non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
	</div><!-- end box box3 -->
 <div class="box4">
	 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
		laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
		voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
		non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <div class="shr_box4"></div>
	   <div class="shl_box4"></div>
	</div><!-- end box 4 -->

 <div class="box5">
	 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
		laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
		voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
		non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
	  <div class="fold_box5"></div>
	  <div class="fold2_box5"></div>
	</div><!-- end box 5 -->
 <div class="box6">
	 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
		laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
		voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
		non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
	 <div class="box6_corner_lf"></div>
		<div class="box6_corner_rt"></div>
	</div><!-- end box 6 -->
	<div class="box7">
	 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
		laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
		voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
		non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
	</div><!-- end box7 -->
	<div class="box8"></div><!-- end box8 -->
 <div class="box9"></div><!-- end box9 -->

 <div class="box10">
	 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
		laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
		voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
		non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
	</div><!-- end box10 -->

 <div class="box11">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
		laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
		voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
		non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
	<div class="box11_ribbon"></div>
	</div><!-- end box11 -->

 <div class="box12">
	 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
		laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
		voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
		non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
	  <div class="fold_box12"></div>
	  <div class="fold2_box12"></div>
	  <div class="box12_ribbon"></div>
	</div><!-- end box12 -->

 <div class="box13">
	 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
		laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
		voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
		non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
	 <div class="box13_corner_lf"></div>
		<div class="box13_corner_rt"></div>
		<div class="box13_ribbon"></div>
	</div><!-- end box 13 -->

	<div class="box14">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
		laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
		voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
		non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
		<div class="box14_ribbon"></div>
	</div><!-- end box box14 -->

 <div class="box15">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
		ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
		laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
		voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
		non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
	  <div class="box15_ribbon"></div>
	</div><!-- end box15 -->
	<div class="box16">
	  <div class="box16_ribbon"></div>
	</div><!-- end box16 -->

</body>
</html>

Yoruma sekme
Diğer sitelerde paylaş

Katılın Görüşlerinizi Paylaşın

Şu anda misafir olarak gönderiyorsunuz. Eğer ÜYE iseniz, ileti gönderebilmek için HEMEN GİRİŞ YAPIN.
Eğer üye değilseniz hemen KAYIT OLUN.
Not: İletiniz gönderilmeden önce bir Moderatör kontrolünden geçirilecektir.

Misafir
Maalesef göndermek istediğiniz içerik izin vermediğimiz terimler içeriyor. Aşağıda belirginleştirdiğimiz terimleri lütfen tekrar düzenleyerek gönderiniz.
Bu başlığa cevap yaz

×   Zengin metin olarak yapıştırıldı..   Onun yerine sade metin olarak yapıştır

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Önceki içeriğiniz geri getirildi..   Editörü temizle

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Yeni Oluştur...

Önemli Bilgiler

Bu siteyi kullanmaya başladığınız anda kuralları kabul ediyorsunuz Kullanım Koşulu.