css 3 box-shadowボックス効果

単純なシャドウ

html code:

   
• 
   
• 
   
• 

css code:

img{
	vertical-align:bottom;
}
#demo1 li{
	margin-right:10px;
	padding:2px;
	border:1px solid #ccc;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:0 0 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
#demo1 li:hover{
	border:1px solid rgba(82, 168, 236, 0.6);
	-webkit-box-shadow:0 0 8px rgba(82, 168, 236, 0.6);
	-moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
	box-shadow: 0 0 8px rgba(82, 168, 236, 0.6);
}

総合シャドウ
html code 3:

   

• no spread
  0 10px 10px rgba(0,0,0,0.5)

   

• spread
  0 10px 10px -10px rgba(0,0,0,0.5)

   

• no spread
  inset 0 10px 10px rgba(0,0,0,0.5),
  inset 0 -10px 10px rgba(0,0,0,0.5)

   

• spread
  inset 0 10px 10px -10px rgba(0,0,0,0.5),
  inset 0 -10px 10px-10px rgba(0,0,0,0.5)

css code 3:
#demo3 li{
    width:320px;
    height:180px;
    background-color:#ededed;
    margin:30px 30px 0 0;
    text-align:center;
}
#demo3 li:nth-child(-n+2){
    margin-top:0;
}
#demo3 li span{
    color:#f00;
}
#demo3 li p{
    margin-top:50px;
    font-size:16px;
}
#demo3 li:nth-of-type(1){
    -webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    box-shadow: 0 10px 10px rgba(0,0,0,0.5);
}
#demo3 li:nth-of-type(2){
    -webkit-box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
    box-shadow: 0 10px 10px -10px rgba(0,0,0,0.5);
}
#demo3 li:nth-of-type(3){
    -webkit-box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);
    -moz-box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);
    box-shadow:inset 0 10px 10px rgba(0,0,0,0.5),inset 0 -10px 10px rgba(0,0,0,0.5);
}
#demo3 li:nth-of-type(4){
    -webkit-box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);
    -moz-box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);
    box-shadow:inset 0 10px 10px -10px rgba(0,0,0,0.5),inset 0 -10px 10px -10px rgba(0,0,0,0.5);
}
html code 4:

           

• bottom right style

           

• bottom style

           

• top left & bottom right style

           

• book style

           

• stick style

       

/* #demo4 */
#demo4 li{
	width:320px;
	height:180px;
	background-color:#ededed;
	margin:50px 30px 0 30px;
	text-align:center;
	line-height:180px;
	font-size:16px;
	position:relative;
}
#demo4 li:nth-child(-n+2){
	margin-top:0;
}
#demo4 li:before,
#demo4 li:after{
	position:absolute;
	z-index:-1;
}
/* bottom right style */
#demo4 li:nth-of-type(1):after{
	content:"";
	width:50%;
	height:50%;
	right:0;
	top:50%;
	box-shadow:20px 30px 15px rgba(0,0,0,0.2);
	-webkit-transform:skew(10deg,10deg) translate(-40px,-20px);
	-moz-transform:skewX(10deg) skewY(10deg) translate(-40px,-20px);
	-ms-transform:skew(10deg,10deg) translate(-40px,-20px);
	-o-transform:skew(10deg,10deg) translate(-40px,-20px);
	transform:skew(10deg,10deg) translate(-40px,-20px);
}
/* bottom style */
#demo4 li:nth-of-type(2):before{
	content:"";
	width:50%;
	height:50%;
	left:0;
	top:50%;
	box-shadow:20px 30px 15px rgba(0,0,0,0.2);
	-moz-transform:skewX(-10deg) skewY(-10deg) translate(0,-20px);
	-webkit-transform:skew(-10deg,-10deg) translate(0,-20px);
	-ms-transform:skew(-10deg,-10deg) translate(0,-20px);
	-o-transform:skew(-10deg,-10deg) translate(0,-20px);
	transform:skew(-10deg,-10deg) translate(0,-20px);
}
#demo4 li:nth-of-type(2):after{
	content:"";
	width:50%;
	height:50%;
	right:0;
	top:50%;
	box-shadow:20px 30px 15px rgba(0,0,0,0.2);
	-webkit-transform:skew(10deg,10deg) translate(-40px,-20px);
	-moz-transform:skewX(10deg) skewY(10deg) translate(-40px,-20px);
	-ms-transform:skew(10deg,10deg) translate(-40px,-20px);
	-o-transform:skew(10deg,10deg) translate(-40px,-20px);
	transform:skew(10deg,10deg) translate(-40px,-20px);
}
/* top left & bottom right style */
#demo4 li:nth-of-type(3):before{
	content:"";
	width:50%;
	height:50%;
	left:0;
	top:0;
	box-shadow:-20px -30px 15px rgba(0,0,0,0.2);
	-moz-transform:skewX(10deg) skewY(10deg) translate(40px,30px);
	-webkit-transform:skew(10deg,10deg) translate(40px,30px);
	-ms-transform:skew(10deg,10deg) translate(40px,30px);
	-o-transform:skew(10deg,10deg) translate(40px,30px);
	transform:skew(10deg,10deg) translate(40px,30px);
}
#demo4 li:nth-of-type(3):after{
	content:"";
	width:50%;
	height:50%;
	right:0;
	top:50%;
	box-shadow:20px 30px 15px rgba(0,0,0,0.2);
	-webkit-transform:skew(10deg,10deg) translate(-40px,-20px);
	-moz-transform:skewX(10deg) skewY(10deg) translate(-40px,-20px);
	-ms-transform:skew(10deg,10deg) translate(-40px,-20px);
	-o-transform:skew(10deg,10deg) translate(-40px,-20px);
	transform:skew(10deg,10deg) translate(-40px,-20px);
}
/* book style */
#demo4 li:nth-of-type(4){
    background: #fff;
    background: -moz-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
	background: -webkit-linear-gradient(100% 50%, #fff, #fff 10%, #f3f3f3);
    border: 1px solid #ccc;
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
    box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
    -webkit-border-bottom-right-radius: 60px 5px;
    -moz-border-radius-bottomright: 60px 5px;
    border-bottom-right-radius: 60px 5px;
}
#demo4 li:nth-of-type(4):before{
	content:"";
	width:98%;
	height:98%;
	left:0;
	top:0;
	background-color:#fff;
	border: 1px solid #ccc;
	-webkit-transform:skew(4deg, 2deg) translate(6px, 7px);
	-moz-transform:skewX(4deg) skewY(2deg) translate(6px, 7px);
	-ms-transform:skew(4deg, 2deg) translate(6px, 7px);
	-o-transform:skew(4deg, 2deg) translate(6px, 7px);
	transform:skew(4deg, 2deg) translate(6px, 7px);
	-webkit-border-bottom-right-radius: 60px 5px;
    -moz-border-radius-bottomright: 60px 5px;
    border-bottom-right-radius: 60px 5px;
}
#demo4 li:nth-of-type(4):after{
	content:"";
	width:98%;
	height:98%;
	left:0;
	top:0;
	background-color:#fff;
	border: 1px solid #ccc;
	-webkit-transform:skew(3deg, 1deg) translate(4px, 4px);
	-moz-transform:skewX(3deg) skewY(1deg) translate(4px, 4px);
	-ms-transform:skew(3deg, 1deg) translate(4px, 4px);
	-o-transform:skew(3deg, 1deg) translate(4px, 4px);
	transform:skew(3deg, 1deg) translate(4px, 4px);
}
/* stick style */
#demo4 li:nth-of-type(5){
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
#demo4 li:nth-of-type(5):before{
	content:"";
	width:110px;
	height:30px;
	background-color:rgba(255,255,0,0.2);
	z-index:1;
	top:8px;
	left:-32px;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
#demo4 li:nth-of-type(5):after{
	content:"";
	width:110px;
	height:30px;
	background-color:rgba(255,255,0,0.2);
	z-index:1;
	bottom:8px;
	right:-32px;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
}