En yakın tamsayıya yuvarlanmış bir sayının değerini döndürür, sayi herhangi bir sayısal değer veya mevcut bir nösnenin bir özelliği.round ( sayi)

Eğer bir sayının kesirli kısmı 0.5 veya daha büyükse, argüman enyakın tamsayıya yuvarlanır. Eğer sayının kesirli kısmı 0.5 den daha az ise, argüman sonraki en düşük tamsayıya yuvarlar.

Örnek 1:

document.write ("Yuvarlanan değer " + Math.round( 20.49 ))20 değerini gösterir

document.write ("Yuvarlanan değer " + Math.round( 20.5 ))21 değerini gösterir.

document.write ("Yuvarlanan değer " + Math.round( -20.5 )) -20 değerini gösterir.

document.write ("Yuvarlanan değer " + Math.round( -20.51 ) ) -21 değerini gösterir.

Bu eleman tarayıcıya dosyanın HTML kodu içerdiğini söyler. Dosya uzantısı html de

bir HTML dosyası olduğunu gösterir ve bunu kullanmak zorundayız (.htm uzantısıda tarayıcılar ve sunucular tarafından desteklenmektedir ).

HEAD

Head elemanı HTML kodlu dokümanın başlık ( title ) kısmını içeren ilk parçasını tanımlar, title web sayfanız tarayıcı içinde görüntülendiği zaman tarayıcı penceresinin başlık kısmında gösterilir.

TİTLE

title elemanı doküman başlığınızı içerir ve global bağlamda onun içeriğini tanımlar, title tipik olarak tarayıcı penceresinin kendi içinde değil en üst kısmında başlık (caption ) kısmında gösterilir. Bir title sayfanızı tanımak için tarama motorları tarafından da kullanılır.

BODY

İkinci ve engeniş HTML dokümanının parçası body ( gövde ) kısmıdır. Bu kısım dokümanınızın içeriğini taşır ( tarayıcı penceresinin text alanı içinde gösterilir). Sonraki konularda açıklanan etiketler HTML dokümanının gövde kısmında geniş bir şekilde kullanılır.

HTML dokümanları herhangi bir text editörü ( Windows platformunda en çok bilinen Notepad veya diğer text editörler ) kullanılarak oluşturulan basit-text yapısında (ASCII olarak bilinir ) dosyalardır. Başka bir kelime işlemci kullanarak ta editör görevini yaptırabilirisiniz.

Şıı anda yazılım piyasasında çok sayıda irili ufaklı HTML kod yazmak için editörler bulunmaktadır. Internet ortamından bunları çok kolay bir şekilde indirip kullanabilirsiniz. Bunların bir çoğunda sizin tek tek HTML. kod yazmanıza gerek kalmadan birkaç fare tıklaması ile istediğinize uygun bir web sayfasını tasarlamanıza imkan veren özelliklere sahiptir, ancak başlangıç aşamasında bu kodları normal bir text editörü kullanarak yazmanızı tavsiye ederim. Neden diyecek olursanız? çünkü bu yol diğer dillerde de olduğu gibi HTML kodlarını tanımak ve öğrenmek için en iyi yoldur.

HTML. dokümanları HTML işaretlemesi ve asıl biçimlendirilecek verilerimizi taşır. DHTML kullandığımızda ise CSS, ve JavaScript kodlarını da içinde taşır. Bu doküman web sayfamızı yayınladığımızda ziyaretçiler tarafından görünen göıütünün tarayıcı üzerinde yorumlanmamış halidir.

Doküman Nesne Modeline ( DOM - Document Object Model ) göre doküman nesnesi document olarak adlandırılır.

HTML ( HyperText Markup Language ) kısaltması olup web sayfalarının tasarımında metin işaretleme dili olarak kullanılır. İşaretleme asıl dokümandan ayrıdır. HTML Web tarayıcılarına sayfa tasarımında sayfaların nasıl görüntüleneceklerini bildirmek için kullanılır. Tarayıcıyı kullanarak HTML kodları ile biçimledirilmiş bir web sayfasını ziyaret ettiğinizde .tarayıcı tarafından uygun bir şekilde yorumlanarak bir görünüm elde edilir. Elde edilen bu görünüm size web sayfasının tarayıcı penceresi içindeki görüntü olarak yansıyacaktır.

CSS ( Cascading Style Sheet ) kendi başına kullanıldığında bir anlamı olmayan , ve üst seviye bir dil olarakta değerlendiremediğimiz ancak HTML ve XML kodlan birlikte kullanılarak etkisini görebileceğimiz bir biçimlendirme dili diyebiliriz doğrusu bir alt dil olarak kabul edebiliriz. CSS. HTML, XML ve JavaScript ortaklaşa kullanımı ile web sayfalarınızda statik bir durumdan dinamik bir yapıya geçiş yapabilirsiniz.

XML ( extensible Markup Language ). HTML'nin şimdiden rakibi olmaya başlayan ve web sayfa tasarımında yeni bir bakış açısı getiren işaretleme dilidir. HTML bir kısım dokümanların yapılandırılması ve izlenmesi konusunda esnek değildir. İşte bu gibi eksiklikleri kazanmak için daha esnek ve kullanışlı olan XML ortaya çıkmıştır.

İstemci tarafından tarayıcı tarafından yorumlanır. Çalışma zamanı sistemini destekler.

Nesne tabanlıdır, genişletilebilir nesneleri kullanır, sınıflar ve miras kavramı yoktur.

Kodlar HTML içine gömülür veya eklenir. Değişken veri tipleri bildirilmesi yapılmaz

Nesne başvuruları çalışma-zamanı kontrol edilir ve dinamik olarak bağlama işlemi yapılır.

Güvenlidir ve diske yazamaz.

Java

İstemci üzerinde yürütülmeden önce sunucu üzerinde derlenmek zorunda. Derleme zamanı sistemini destekler.

Nesneye yöneliktir ve miras yolu ile appletler nesne sınıfları içerir. Appletleıe HTML sayfalarından erişilir. Değişken veri tipleri yapılmak zorunda.

Nesne başvuruları derleme-zamanında mevcut olmak zorunda ve statik olarak bağlama işlemi yapılır.

Güvenlidir ve diske yazamaz.

JavaScript, yapı olarak Java ya benzer fakat aynı şey değildir. Tasarım ve çalışına zamanında farklı şekillerde değerlendirirlirler. Hata veya istenmeyen durumlar ile JavaScript içinde çalışma zamanında karşılaşırsınız, fakat Java da ise derleme aşamasında herşey ortaya çıkar.

JavaScript

JavaScript istemci ve sunucu tarafı internet uygulamaları geliştirmekte kullanılan nesne tabanlı bir script dilidir. Bir HTML içine eklenen JavaScript kodları herhangi bir derleme olmaksızın doğrudan tarayıcılar ( Microsoft Internet Explorer, Netscape Navigator gibi ) tarafından yorumlanarak gerekli işlemler yapılır.

Bir tarayıcı için bir istemcide, bir HTML sayfası içine eklenen JavaScript ifadeleri tanınır ve kullanıcı tarafından neden olunan fare tıklaması, form girişi, ve sayfa değiştirmek gibi olaylara cevap verilir.

Örneğin, kullanıcının, bir form üzerinde text alanına girilen bir bilginin geçerli olup olmadığını sınaması için geçerlilik testi yapan bir fonksiyon yazabilirsiniz. Ağ üzerinden herhangi bir iletim olmaksızın, JavaScript kodları eklenmiş bir HTML sayfası üzerinde girilen bilginin geçerli olup olmadığı kontrol edilir ve ona göre kullanıcıya bir uyarı mesajı verilebilir veya siz kullanıcıya bir sayfayı açtığında veya kapattığında JavaScripti kullanarak ses dosyası çalma, bir Java appleti yürütme gibi işlemleri yapabilirsiniz.

JavaScript ve Java

JavaScript dili Java'ya benzer, fakat Java'nın yazımı ve güçlü tip kontrolünden yoksundur. JavaScript, Javanın birçok yapısının yazılım şeklini ve temel kontrol akış yapısını destekler. Java derleme-zamanı ( compiler-time ) sistemini destekler, yani Java kodları Java derleyicisi ile derlenmeden çalışmaz, bildirimler kullanılarak inşa edilen sınıflar yoğunluktadır. JavaScript bir çalışma-zamanı ( run-time ) sistemini destekler, yani JavaScript kodlarını kullanıcı tarayıcısı sunucudan alır ve yorumlar.

RESET.CSS

/*Tripoli is a generic CSS standard for HTML rendering.
_______________________________
RESET */
*{
margin:0;
padding:0;
}
code,kbd,samp,pre,tt,var,textarea,input,select,isindex,listing,xmp,plaintext{
font:inherit;
white-space:normal;
}
a,img,a img,iframe,form,abbr,acronym,object,applet,table,a abbr,a acronym{
border-width:0;
}
dfn,i,cite,var,address,em{
font-style:normal;
}
th,b,strong,h1,h2,h3,h4,h5,h6,dt{
font-weight:normal;
}
caption,th,td{
text-align:left;
}
html{
font-family:arial, sans-serif;
}
/* \*/
html{
font-family:sans-serif;
}
/* */
q{
quotes:"\201C""\201D""\2018""\2019";
}
ul,ol,dir,menu{
list-style:none;
}
sub,sup{
vertical-align:baseline;
}
a{
color:inherit;
}
/*_______________________________DISABLE DEPRECATED HTML */
font,basefont{
color:inherit;
font:inherit;
font-size:100%;
}
center,*[align]{
text-align:inherit;
}
s,strike,u{
text-decoration:inherit;
}
img{
border:none;
margin:0;
}
ol{
list-style-type:decimal;
}
/*body{
background-color:transparent;
}*/
tr,th,td{
width:auto;
height:auto;
background-color:transparent;
vertical-align:inherit;
*border:none;
}
nobr{
white-space:normal;
}
marquee{
overflow:visible;
-moz-binding:none;
}
blink{
text-decoration:none;
}
/*_______________________________GENERAL */
html{
font-size:100%;
}
body{
font-size:100%;
}
a{
text-decoration:underline;
}
strong,th,thead td,h1,h2,h3,h4,h5,h6,dt{
font-weight:bold;
}
cite,em,dfn{
font-style:italic;
}
code,kbd,samp,pre,tt,var,input[type='text'],input[type='password'],textarea{
font-size:100%;
}
pre{
white-space:pre;
}
pre *{
font-size:100%;
white-space:pre;
}
del{
text-decoration:line-through;
}
ins,dfn{
border-bottom:1px solid black;
}
small,sup,sub{
font-size:10px;
padding:0 0 20px 0;
}
big{
font-size:125%;
line-height:80%;
}
abbr,acronym{
text-transform:uppercase;
font-size:85%;
letter-spacing:.1em;
}
abbr[title],acronym[title],dfn[title]{
cursor:help;
border-bottom:1px dotted black;
}
sup{
vertical-align:super;
}
sub{
vertical-align:sub;
}
blockquote{
padding-left:2.2em;
}
hr{
display:none; /* We will re-reset it later for content */
}
:lang(af),:lang(nl),:lang(pl){
quotes:'\201E' '\201D' '\201A' '\2019';
}
:lang(bg),:lang(cs),:lang(de),:lang(is),:lang(lt),:lang(sk),:lang(sr),:lang(ro){
quotes:'\201E' '\201C' '\201A' '\2018';
}
:lang(da),:lang(hr){
quotes:'\00BB' '\00AB' '\203A' '\2039';
}
:lang(el),:lang(es),:lang(sq),:lang(tr){
quotes:'\00AB' '\00BB' '\2039' '\203A';
}
:lang(en-GB){
quotes:'\2018' '\2019' '\201C' '\201D';
}
:lang(fi),:lang(sv){
quotes:'\201D' '\201D' '\2019' '\2019';
}
:lang(fr){
quotes:'\ab\2005' '\2005\bb' '\2039\2005' '\2005\203a';
}
*[lang|='en'] q:before{
content:'\201C';
}
*[lang|='en'] q:after{
content:'\201D';
}
*[lang|='en'] q q:before{
content:'\2018';
}
*[lang|='en'] q q:after{
content:'\2019';
}
input,select,button{
cursor:pointer;
}
input[type='text'],input[type='password']{
cursor:text;
}
input[type='hidden']{
display:none;
}
/*_______________________________CONTENT */
h1{
font-size:1.6em;
line-height:1;
margin:1em 0 .5em;
}
h2{
font-size:1.5em;
line-height:1;
}
h3{
font-size:1.5em;
line-height:1;
margin:1.14em 0 .57em;
}

h4{
font-size:1.3em;
line-height:1;
margin:1.23em 0 .615em;
}
h5{
font-size:1.2em;
line-height:1;
margin:1.33em 0 .67em;
}
h6{
font-size:1em;
line-height:1;
margin:1.6em 0 .8em;
}
hr{
display:block;
background:black;
color:black;
width:100%;
height:1px;
border:none;
}
ul{
list-style:disc outside;
}
ol{
list-style:decimal outside;
}

hr,.content p,.content ul,.content ol,.content dl,.content pre, .content address,.content table,.content form{
margin:0;
}
p+p{
margin-top:0;
}
fieldset{
margin:1.6em 0;
padding:1.6em;
}
/* \*/
legend{
padding-left:.8em;
padding-right:.8em;
}
/* */
@media all and (min-width: 0px) /* for Opera 8 */{
legend{
 margin-bottom:0;
}
fieldset{
 margin-top:0;
}
[class^='content'] fieldset{
 margin-top:1.6em;
}
}
fieldset>*:first-child{
margin-top:0;
}
textarea,.content input[type='text']{
padding:0;
}
input{
padding:0;
}
select{
padding:0;
}
select[multiple]{
margin-bottom:0;
}
option{
padding:0;
}
button{
padding:0;
}
input[type='radio']{
position:relative;
bottom:0;
}
dt{
margin-top:0;
margin-bottom:0;
}
ul, ol{
margin-left:0;
}
caption,form div{
padding-bottom:0;
}
ul ul,content ol ul,.content ul ol,content ol ol{
margin-bottom:0;
}
/*_______________________________END */

3.ADIM İÇİN TIKLAYINIZ

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>

CSS DOSYALARINIZ:

STYLE.CSS

@charset "utf-8";
/* CSS Document */
@import url(reset.css);

/************/
/*** Box1 ***/
/************/
.box1 p, .box2 p, .box3 p, .box4 p, .box5 p, .box6 p, .box7 p, .box9 p, .box10 p, .box11 p, .box12 p, .box13 p, .box14 p, .box15 p, .box16 p{
margin: 30px;
color: #aaa;
outline: none;
}
.box1{
width: 300px;
margin: 40px;
min-height: 200px;
position:relative;
display: inline-block;
background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
border: 1px solid #ccc;
-webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
-webkit-border-bottom-right-radius: 6px 50px;
}
.box1:before{
content: '';
width: 50px;
height: 100px;
position:absolute;
bottom:0; right:0;
-webkit-box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);
z-index:-1;
-webkit-transform: translate(-35px,-40px)
  skew(0deg,30deg)
  rotate(-25deg);
}
.box1:after{
content: '';
width: 100px;
height: 100px;
top:0; left:0;
position:absolute;
display: inline-block;
z-index:-1;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
  translate(20px,25px)
  skew(20deg);
}
/************/
/*** Box2 ***/
/************/
.box2{
margin: 50px;
width: 300px;
min-height: 150px;
padding: 0 0 1px 0;
position:relative;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-border-bottom-right-radius: 60px 60px;
-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);

}
.box2:before{
content:'';
width: 25px;
height: 20px;
position: absolute;
bottom:0;
right:0;
-webkit-border-bottom-right-radius: 30px;
-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
-webkit-transform:
rotate(-20deg)
skew(-40deg,-3deg)
translate(-13px,-13px);
}
.box2:after{
content: '';
z-index: -1;
width: 100px;
height: 100px;
position:absolute;
bottom:0;
right:0;
background: rgba(0, 0, 0, 0.2);
display: inline-block;
-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(0deg)
  translate(-45px,-20px)
	 skew(20deg);
}

/************/
/*** Box3 ***/
/************/
.box3{
margin: 50px;
width: 300px;
padding: 5px 0 ;
position:relative;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
border: 1px solid #ccc;
-webkit-border-radius: 60px 5px;
-webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}
.box3:before{
content: '';
width: 50px;
height: 50px;
top:0; right:0;
position:absolute;
display: inline-block;
z-index:-1;
-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
  translate(-14px,20px)
	 skew(-20deg);
}
.box3:after{
content: '';
width: 100px;
height: 100px;
top:0; left:0;
position:absolute;
z-index:-1;
display: inline-block;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
  translate(20px,25px)
	 skew(20deg);
}
/************/
/*** Box4 ***/
/************/
.box4{
margin: 50px;
min-height: 100px;
width: 300px;
padding: 5px 0 ;
position:relative;
background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#fff), to(#fff), color-stop(.2, #f2f2f2));
border: 1px solid #ccc;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.box4:before{
content: '';
width: 50px;
height: 50px;
top:0; right:0;
position:absolute;
z-index: -1;
-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
  translate(-14px,20px)
  skew(-20deg);
}
.box4:after{
content: '';
width: 50px;
height: 50px;
top:0; left:0;
position:absolute;
z-index:-1;
display: inline-block;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
  translate(12px,25px)
	 skew(20deg);
}
.shr_box4{
width: 100px;
height: 100px;
bottom:0; right:0;
position:absolute;
z-index: -1;
-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(0deg)
translate(-20px,-15px)
	skew(20deg);
}
.shl_box4{
content: '';
width: 100px;
height: 100px;
bottom:0; left:0;
position:absolute;
z-index: -1;
-webkit-box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(0deg)
translate(20px,-15px)
	skew(-20deg);
}
/************/
/*** Box5 ***/
/************/
.box5{
margin: 50px;
width: 300px;
padding: 0 0 1px 0;
position:relative;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-border-bottom-right-radius: 60px 60px;
-webkit-border-bottom-left-radius: 60px 60px;
-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);

}
.box5:before{
content:'';
width: 25px;
height: 20px;
background: white;
position: absolute;
bottom:0; right:0;
background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
-webkit-border-bottom-right-radius: 30px;
-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(-20deg)
  skew(-40deg,-3deg)
  translate(-13px,-13px);
}
.box5:after{
content: '';
z-index: -10;
width: 100px;
height: 100px;
position:absolute;
bottom:0;
right:0;
background: rgba(0, 0, 0, 0.2);
display: inline-block;
-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(0deg)
  translate(-45px,-20px)
  skew(20deg);
}
.fold_box5{
z-index: -10;
width: 50px;
height: 50px;
position:absolute;
bottom:0; left:0;
-webkit-box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(0deg)
  translate(40px,-20px)
  skew(-20deg);
}
.fold2_box5{
content:'';
width: 25px;
height: 20px;
background: white;
position: absolute;
bottom:0; left:0;
background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));
-webkit-border-bottom-right-radius: 30px;
-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(103deg)
  skew(-3deg,-40deg)
  translate(-13px,-15px);
}
/***************/
/*** box Six ***/
/***************/
.box6{
margin: 50px;
width: 300px;
min-height: 150px;
padding: 0 0 1px 0;
position:relative;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
-webkit-border-top-left-radius: 60px 5px;
-webkit-border-top-right-radius: 60px 5px;
-webkit-border-bottom-right-radius: 60px 60px ;
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;

}
.box6:before{
content:'';
width: 25px;
height: 20px;
position: absolute;
bottom:0;
right:0;
-webkit-border-bottom-right-radius: 30px;
-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
-webkit-transform:
rotate(-20deg)
skew(-40deg,-3deg)
translate(-13px,-13px);
}
.box6:after{
content: '';
z-index: -10;
width: 100px;
height: 100px;
position:absolute;
bottom:0;
right:0;
background: rgba(0, 0, 0, 0.2);
display: inline-block;
-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(0deg)
  translate(-45px,-20px)
	 skew(20deg);
}
.box6_corner_lf{
width: 100px;
height: 100px;
top:0; left:0;
position:absolute;
z-index:-6;
display: inline-block;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
  translate(20px,25px)
	 skew(20deg);
}
.box6_corner_rt{
content: '';
width: 50px;
height: 50px;
top:0; right:0;
position:absolute;
display: inline-block;
z-index:-6;
-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
  translate(-14px,20px)
	 skew(-20deg);
}
/*****************/
/*** box Seven ***/
/*****************/
.box7{
margin: 50px;
width: 320px;
min-height: 150px;
padding: 0 0 1px 0;
position:relative;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2) ;
}
.box7:before{
content: '';
position:absolute;
width: 130px;
height: 30px;
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
-webkit-transform:translate(-50px,10px)
  skew(10deg,10deg)
  rotate(-50deg)
}
.box7:after{
content: '';
position:absolute;
right:0;
bottom:0;
width: 130px;
height: 30px;
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
-webkit-transform: translate(50px,-20px)
  skew(10deg,10deg)
  rotate(-50deg)
}
/*****************/
/*** box eight ***/
/*****************/
.box8{
margin: 70px 50px;
width: 300px;
min-height: 250px;
position:relative;
border: 2px solid #ccc;
background: rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
}
.box8:before{
content: '';
width: 110%;
left: 0;
height: 125%;
z-index:-1;
position:absolute;
border: 1px solid #ccc;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
-webkit-transform: translate(-5%,-5%);
}
.box8:after{
content: '';
width: 100%;
left: 0;
height: 115%;
z-index:-2;
background: none;
position:absolute;
border-radius: 20px;
-webkit-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
-webkit-transform: translate(0,0);
}
/****************/
/*** box nine ***/
/****************/
.box9{
margin: 70px 50px;
width: 300px;
min-height: 250px;
position:relative;
border: 1px solid rgba(0,0,0,0.1);
border-radius:20px;
background: white;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
.box9:before{
content: '';
width: 110%;
left: 0;
height: 111%;
z-index:-1;
position:absolute;
border-radius:20px;
border: 1px solid rgba(0,0,0, 0.1);
background: rgba(0, 0, 0, 0.0);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-webkit-transform:  translate(-5%,-5%);
}
.box9:after{
content: '';
position:absolute;
top:-25px; left: 30%;
width: 130px;
height: 40px;
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}
/****************/
/*** box ten ***/
/****************/
.box10{
margin: 50px;
width: 320px;
min-height: 150px;
padding: 0 0 1px 0;
position:relative;
background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
border: 1px solid #ccc;
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
-webkit-border-bottom-right-radius: 60px 5px;

}
.box10:before{
content: '';
width: 98%;
z-index:-1;
height: 100%;
padding: 0 0 1px 0;
position: absolute;
bottom:0; right:0;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
border: 1px solid #ccc;
-webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1);
-webkit-border-bottom-right-radius: 60px 5px;
-webkit-transform: skew(2deg,2deg)
  translate(3px,8px)
}
.box10:after{
content: '';
width: 98%;
z-index:-1;
height: 98%;
padding: 0 0 1px 0;
position: absolute;
bottom:0; right:0;
background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
border: 1px solid #ccc;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
-webkit-transform: skew(2deg,2deg)
  translate(-1px,2px)
}
/******************/
/*** box eleven ***/
/******************/
.box11{
margin: 50px;
width: 300px;
min-height: 150px;
padding: 0 0 1px 0;
position:relative;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
border-top: 1px solid white;
border-right: 1px solid #ccc;
-webkit-border-bottom-right-radius: 60px 60px;
-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);

}
.box11:before{
content:'';
width: 25px;
height: 20px;
background: white;
position: absolute;
bottom:0; right:0;
background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
-webkit-border-bottom-right-radius: 30px;
border-bottom-right-radius: 30px;
-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(-20deg)
  skew(-40deg,-3deg)
  translate(-13px,-13px);
  transform: rotate(-20deg)
  skew(-40deg,-3deg)
  translate(-13px,-13px);
}
.box11:after{
content: '';
z-index: -1;
width: 100px;
height: 100px;
position:absolute;
bottom:0;
right:0;
background: rgba(0, 0, 0, 0.2);
display: inline-block;
-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(0deg)
  translate(-45px,-20px)
	 skew(20deg);
}

.box11_ribbon{
position:absolute;
top:-25px; left: 30%;
width: 130px;
height: 40px;
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}
/************/
/*** Box twelve ***/
/************/
.box12{
margin: 50px;
width: 300px;
padding: 0 0 1px 0;
position:relative;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-border-bottom-right-radius: 60px 60px;
-webkit-border-bottom-left-radius: 60px 60px;
-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);

}
.box12:before{
content:'';
width: 25px;
height: 20px;
background: white;
position: absolute;
bottom:0; right:0;
background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
-webkit-border-bottom-right-radius: 30px;
-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(-20deg)
  skew(-40deg,-3deg)
  translate(-13px,-13px);
}
.box12:after{
content: '';
z-index: -10;
width: 100px;
height: 100px;
position:absolute;
bottom:0;
right:0;
background: rgba(0, 0, 0, 0.2);
display: inline-block;
-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(0deg)
  translate(-45px,-20px)
  skew(20deg);
}
.fold_box12{
z-index: -10;
width: 50px;
height: 50px;
position:absolute;
bottom:0; left:0;
-webkit-box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(0deg)
  translate(40px,-20px)
  skew(-20deg);
}
.fold2_box12{
width: 25px;
height: 20px;
z-index:20;
background: white;
position: absolute;
bottom:0; left:0;
background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff), to( #eee), color-stop(.1,#fff));
-webkit-border-bottom-right-radius: 30px;
-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(103deg)
  skew(-3deg,-40deg)
  translate(-13px,-15px);
}
.box12_ribbon{
content: '';
position:absolute;
top:-25px; left: 30%;
width: 130px;
height: 40px;
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}
/***************/
/*** box thirteen ***/
/***************/
.box13{
margin: 50px;
width: 300px;
min-height: 150px;
padding: 0 0 1px 0;
position:relative;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
-webkit-border-top-left-radius: 60px 5px;
-webkit-border-top-right-radius: 60px 5px;
-webkit-border-bottom-right-radius: 60px 60px ;
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3) ;

}
.box13:before{
content:'';
width: 25px;
height: 20px;
position: absolute;
bottom:0;
right:0;
-webkit-border-bottom-right-radius: 30px;
-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
-webkit-transform:
rotate(-20deg)
skew(-40deg,-3deg)
translate(-13px,-13px);
}
.box13:after{
content: '';
z-index: -10;
width: 100px;
height: 100px;
position:absolute;
bottom:0;
right:0;
background: rgba(0, 0, 0, 0.2);
display: inline-block;
-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(0deg)
  translate(-45px,-20px)
	 skew(20deg);
}
.box13_corner_lf{
width: 100px;
height: 100px;
top:0; left:0;
position:absolute;
z-index:-6;
display: inline-block;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
  translate(20px,25px)
	 skew(20deg);
}
.box13_corner_rt{
content: '';
width: 50px;
height: 50px;
top:0; right:0;
position:absolute;
display: inline-block;
z-index:-6;
-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
  translate(-14px,20px)
	 skew(-20deg);
}
.box13_ribbon:before{
content: '';
position:absolute;
top:0; left: 0;
width: 130px;
height: 40px;
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(90deg) skew(0,0) translate(100px,65px);
}
.box13_ribbon:after{
content: '';
position:absolute;
top:0; right: 0;
width: 130px;
height: 40px;
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(90deg) skew(0,0) translate(100px,-65px);
}
/*********************/
/*** Box Fourteen  ***/
/*********************/
.box14{
margin: 50px;
width: 300px;
padding: 5px 0 ;
position:relative;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
border: 1px solid #ccc;
-webkit-border-radius: 60px 5px;
-webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}
.box14:before{
content: '';
width: 50px;
height: 50px;
top:0; right:0;
position:absolute;
display: inline-block;
z-index:-1;
-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
  translate(-14px,20px)
	 skew(-20deg);
}
.box14:after{
content: '';
width: 100px;
height: 100px;
top:0; left:0;
position:absolute;
z-index:-1;
display: inline-block;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
  translate(20px,25px)
	 skew(20deg);
}
.box14_ribbon{
position:absolute;
top:0; right: 0;
width: 130px;
height: 40px;
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(6deg) skew(0,0) translate(-60%,-5px);
}
/****************/
/*** box fifteen ***/
/****************/
.box15{
margin: 50px;
width: 320px;
min-height: 150px;
padding: 0 0 1px 0;
position:relative;
background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
border: 1px solid #ccc;
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
-webkit-border-bottom-right-radius: 60px 5px;

}
.box15:before{
content: '';
width: 98%;
z-index:-1;
height: 100%;
padding: 0 0 1px 0;
position: absolute;
bottom:0; right:0;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
border: 1px solid #ccc;
-webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1);
-webkit-border-bottom-right-radius: 60px 5px;
-webkit-transform: skew(2deg,2deg)
  translate(3px,8px)
}
.box15:after{
content: '';
width: 98%;
z-index:-1;
height: 98%;
padding: 0 0 1px 0;
position: absolute;
bottom:0; right:0;
background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
border: 1px solid #ccc;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
-webkit-transform: skew(2deg,2deg)
  translate(-1px,2px)
}
.box15_ribbon{
position:absolute;
top:0; left: 0;
width: 130px;
height: 40px;
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
}
/*****************/
/*** box sixteen ***/
/*****************/
.box16{
margin: 70px 50px;
width: 300px;
min-height: 250px;
position:relative;
border: 2px solid #ccc;
background: rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.1);
}
.box16:before{
content: '';
width: 110%;
left: 0;
height: 125%;
z-index:-1;
position:absolute;
border: 1px solid #ccc;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
-webkit-transform: translate(-5%,-5%);
}
.box16:after{
content: '';
width: 100%;
left: 0;
height: 115%;
z-index:-2;
background: none;
position:absolute;
border-radius: 20px;
-webkit-box-shadow: 15px 0px 30px rgba(0, 0, 0, 0.2);
-webkit-transform: translate(0,0);
}
.box16_ribbon{
position:absolute;
top:0; left: 0;
width: 130px;
height: 40px;
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(-30deg) skew(0,0) translate(-20px,-20px);
}
.box16_ribbon:before{
content: '';
position:absolute;
top:0; left: 0;
width: 130px;
height: 40px;
background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
border-left: 1px dashed rgba(0, 0, 0, 0.1);
border-right: 1px dashed rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(0deg) skew(0,0) translate(-15px,-20px);
}

2.ADIM İÇİN TIKLAYINIZ

Oyunu Baştan Yazamam (Php Akıcı Şekilde Bilmiyorum)Ama O oyunu değiştire Bilirim Yeni Özellikler Ekleyerek...

Bende Mesela omerta Sayfasını İndiriyorum İndirilen Yerlerde Scriptler Fln Yazıo... O scriptlerle O Scriptler Derlenip O oyunun Aynısı Yapılırmı...? Tabi Resimleride Hepsi İncek...

VE Bunu YApmak Yasakmı?

Hem Yasak DEyil Hemde Böyle Olmuyorsa Nasıl Oluyor...

Yasaksa Mecbur Akıcı Şekilde PHP Öğrencez... ((Lütfen Cevaplarınızı Esirgelemeyiniz))

.::HK::.

<embed src="videonun yeri(Link)" width="295" height="295" hidden="false" autostart="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>

blog sitemde bu kodu uygulayarak istediğim herhangi bir siteye sayfamda yer vermek istiyorum ama orda mp3 çalar vaya otomatik oynayan videolar olabiliyor...

zaten bende arka planda herhangi bir müzik ekliyorum tabi kargaşa çıkıyor..

istediğim bu linkini giripte sayfamda açtığım sitenin ortam sesini kapatmak bu kodlara ne eklene bilir yada başka bir kod..varmıdır acaba..

mühim olan sadece sesi kapama o sayfadaki videonun oynası önemli değil

Arkadaşlar bu tip şeyler bilmek bilgisayar kullanan insanlar için herzaman faydalı olacaktır o yüzden tanıdıklarınızada bir sorun lütfen.. sağolun