XEM NGAY

Bài viết mới

12 kiểu đóng khung trích dẫn đẹp với css3

Đoàn Long | 15 April, 2015 - 1753 Lượt xem

Doanduylong.com – 12 kiểu đóng khung trích dẫn đẹp với css3. BlockQuote (Trích dẫn) là phần không thể thiếu trong mỗi bài viết của website làm cho phần nội dung thêm sinh động và lôi kéo được sự chú ý của người đọc.

12 kiểu đóng khung trích dẫn đẹp với css3

HTML:


<blockquote class="aqua">
  <h1><span class="Caqua">AQUA</span> - Blockquote Color Palette</h1>
  <p> Some content here </p>
 
</blockquote>

 

CSS:

@import url('https://fonts.googleapis.com/css?family=Montez');
@import url(https://fonts.googleapis.com/css?family=Francois+One);
 
body{
  background: #f5f7fa;
  margin:10px;
  padding:10px;
  font-family:sans-serif;
}
 
blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;
 
  /*Font*/
  font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.2;
  color: #666;
 
  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
 
  /*Borders - (Optional)*/
  border-left-style: solid;
  border-left-width: 15px;
  border-right-style: solid;
  border-right-width: 2px;
}
 
blockquote::before{
  content: &quot;\201C&quot;; /*Unicode for Left Double Quote*/
 
  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
 
  /*Positioning*/
  position: absolute;
  left: 10px;
  top:5px;
 
}
 
blockquote::after{
  /*Reset to make sure*/
  content: &quot;&quot;;
}
 
blockquote a{
  text-decoration: none;
  background: #eee;
  cursor: pointer;
  padding: 0 3px;
  color: #c76c0c;
}
 
blockquote a:hover{
 color: #666;
}
 
blockquote em{
  font-style: italic;
}
 
  /*Default Color Palette*/
blockquote.default{
  border-left-color: #656d77;
  border-right-color: #434a53;
}
 
/*Grapefruit Color Palette*/
blockquote.grapefruit{
  border-left-color: #ed5565;
  border-right-color: #da4453;
}
 
/*Bittersweet Color Palette*/
blockquote.bittersweet{
  border-left-color: #fc6d58;
  border-right-color: #e95546;
}
 
/*Sunflower Color Palette*/
blockquote.sunflower{
  border-left-color: #ffcd69;
  border-right-color: #f6ba59;
}
 
/*Grass Color Palette*/
blockquote.grass{
  border-left-color: #9fd477;
  border-right-color: #8bc163;
}
 
/*Mint Color Palette*/
blockquote.mint{
  border-left-color: #46cfb0;
  border-right-color: #34bc9d;
}
 
/*Aqua Color Palette*/
blockquote.aqua{
  border-left-color: #4fc2e5;
  border-right-color: #3bb0d6;
}
 
/*Blue Jeans Color Palette*/
blockquote.bluejeans{
  border-left-color: #5e9de6;
  border-right-color: #4b8ad6;
}
 
/*Lavander Color Palette*/
blockquote.lavander{
  border-left-color: #ad93e6;
  border-right-color: #977bd5;
}
 
/*Pinkrose Color Palette*/
blockquote.pinkrose{
  border-left-color: #ed87bd;
  border-right-color: #d870a9;
}
 
/*Light Color Palette*/
blockquote.light{
  border-left-color: #f5f7fa;
  border-right-color: #e6e9ed;
}
 
/*Gray Color Palette*/
blockquote.gray{
  border-left-color: #ccd1d8;
  border-right-color: #aab2bc;
}

 

Link download Server Fshare: TẢI VỀ

Link download Server TenLua: TẢI VỀ

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

Mọi thắc mắc, góp ý bạn có thể comment dưới bài viết.

DOANDUYLONG.COM

Bình luận trên Facebook