Tạo box-shadow với CSS3 đơn giản mà đẹp mắt

Hôm nay mình sẽ hướng dẫn các bạn tạo mẫu box-shadow đơn giản chỉ vài code CSS mà rất đẹp.

CSS:

.box-shadow {
  border:4px solid #fff;
  padding:10px 20px;
  overflow:hidden;
  width:310px;
  background-image:-moz-linear-gradient(top,#f6f2ec,#e2dbce);
  background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f6f2ec),color-stop(1,#e2dbce));
  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f6f2ec',EndColorStr='#e2dbce');
  -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#f6f2ec',EndColorStr='#e2dbce')";
  -moz-box-shadow:0 0 2px rgba(0,0,0,0.35),0 85px 180px 0 #fff,0 12px 8px -5px rgba(0,0,0,0.85);
  -webkit-box-shadow:0 0 2px rgba(0,0,0,0.35),0 85px 810px -68px #fff,0 12px 8px -5px rgba(0,0,0,0.65);
  box-shadow:0 0 2px rgba(0,0,0,0.35),0 85px 180px 0 #fff,0 12px 8px -5px rgba(0,0,0,0.85);
}

HTML:

Nội dung trong box

Tự hiển thị box-shadow vào ảnh khi post ảnh trong bài viết Blogspot.

Bước 1: Vào Template > Mẫu > Chỉnh sửa HTML vào tìm kiếm dòng sau:

<b:skin><![

Bước 2: Copy CSS sau và dán vào đó:

.separator img {
 border: 4px solid #fff;
 padding: 0px;
 overflow: hidden;
 background-image: -moz-linear-gradient(top, #f6f2ec, #e2dbce); /* FF3.6 */
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f6f2ec),color-stop(1, #e2dbce)); /* Saf4+, Chrome */
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#f6f2ec', EndColorStr='#e2dbce'); /* IE6,IE7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f6f2ec', EndColorStr='#e2dbce')"; /* IE8 */
  
 -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #fff, 0 12px 8px -5px rgba(0, 0, 0, 0.85); /* FF3.5+ */
 -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 810px -68px #fff, 0 12px 8px -5px rgba(0, 0, 0, 0.65); /* Saf3.0+, Chrome */
 box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #fff, 0 12px 8px -5px rgba(0, 0, 0, 0.85); /* Opera 10.5, IE 9.0 */
} 

Bước 3: Lưu Template lại và xem kết quả.

Chúc các bạn thành công!

 Jakub BB