Xem bài viết 16 kiểu shadows mà bạn không thể bỏ qua

16 kiểu shadows mà bạn không thể bỏ qua

Jul 13, 2012Html / Css

1. Phần HTML

Đây là phần HTML, mình viết giống như trong phần demo luôn đấy.

16 Kiểu Shadow mà bạn không thể bỏ qua - 2Cwebvn

Trở lại bài viết để xem hướng dẫn chi tiết

  • Shadow 1
  • Shadow 2
  • Shadow 3
  • Shadow 4
  • Shadow 5
  • Shadow 6
  • Shadow 7
  • Shadow 8
  • Shadow 9
  • Shadow 10
  • Shadow 11
  • Shadow 12
  • Shadow 13
  • Shadow 14
  • Shadow 15
  • Shadow 16

2. Phần CSS

Và đây là css cho 16 kiểu shadows, mình có đánh số cho các div shadow, bạn thích cái nào thì lấy dùng nhé.
body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1rem;text-align:center;
	background: url(background_2cwebvn.png);
}
div.container {
	margin: 20px auto; border:1px solid #ccc;
	width: 700px;
}
a{text-decoration:none;}
a:hover{color:#999;}
ul.column {
	float: left;
	padding: 0;
	list-style: none;
	width: 675px;
}
ul.column li {
	background: #fff;
	float: left;
	margin: 25px 0 0 25px;
	display: block;
	text-align: center;
	width: 100px;
	padding:20px;
	border-radius: 2px 2px 2px 2px;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
ul.column li.box1 {
	-webkit-box-shadow: 0 10px 6px -6px #777;
	-moz-box-shadow: 0 10px 6px -6px #777;
	box-shadow: 0 10px 6px -6px #777;
}
ul.column li.box2 {
	-webkit-box-shadow: 0 1px 2px #777;
	-moz-box-shadow: 0 2px 1px #777;
	box-shadow: 0 2px 1px #777;
}
ul.column li.box3 {
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}
ul.column li.box4 {
	box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
}
ul.column li.box5 {
	box-shadow: 0 0 1px rgba(34, 25, 25, 0.4);
}
ul.column li.box6 {
	box-shadow: 0 1px #FFFFFF inset, 0 1px 3px rgba(34, 25, 25, 0.4);
}
ul.column li.box7 {
	box-shadow: 0 4px 2px -3px;
}
ul.column li.box8 {
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}
ul.column li.box9 {
	border-bottom: 0 none;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
}
ul.column li.box10 {
	-webkit-box-shadow: 0 7px 4px #777;
	-moz-box-shadow: 0 7px 4px #777;
	box-shadow: 0 7px 4px #777;
}
ul.column li.box11 {
	-webkit-box-shadow: 0 3px 2px #777;
	-moz-box-shadow: 0 3px 2px #777;
	box-shadow: 0 3px 2px #777;
}
ul.column li.box12 {
	box-shadow: 0 0.5px 0 0 #ffffff inset, 0 1px 2px 0 #B3B3B3;
}
ul.column li.box13 {
	-webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
	box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
}
ul.column li.box14 {
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
ul.column li.box15 {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) inset;
	border-color: -moz-use-text-color #FFFFFF #FFFFFF -moz-use-text-color;
	border-style: none solid solid none;
	border-width: medium 1px 1px medium;
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.07);
	-moz-border-bottom-colors: none;
	-moz-border-image: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
}
ul.column li.box16 {
	box-shadow: 0 1px 1px 0 #C7C7C7 inset;
	background: none repeat scroll 0 0 #E9E9E9;
}
/* Clear Float */
.column:after, .box-collection:after, .clearfix:after, div.project-info:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

Kết luận

Bạn có thích bài viết này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, xin cảm ơn!

Mọi ý kiến đóng góp hay thắc mắc bạn có thể gởi về cho chúng tôi qua form bình luận phía dưới. Cám ơn bạn đã ghé thăm web mình và xin chúc bạn thành công!

Nguồn: 2Cweb.vn

 

Leave a Comments