Tạo màu sắc cho khung Blockquote trên CSS3

Thiết kế các Blockquote hiển thị theo những màu sắc khác nhau sẽ giúp bạn có được nhiều lựa chọn hơn cho những dự án của mình theo mục đích khác nhau.

Những mẫu thiết kế này hoàn toàn được thiết kế rất đơn giản trên CSS3, các bạn có thể tham khảo cho những thiết kế website của mình.

Đầu tiên là khung HTML

Khung chuẩn html rất đơn giản , các bạn chỉ cần đặt nội dung bên trong thẻ blockquote và chọn tên class phù hợp với mẫu thiết kế.

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

Tiếp theo là phần CSS

Với mỗi mẫu sẽ có định dạng css khác nhau, nếu bạn cần mẫu nào chỉ cần copy theo mẫu đó là có thể dùng được, hay có thể tự sáng tạo theo ý muốn của riêng bạn:

@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;
}

Chúc bạn có được những mẫu Blockquote hợp ý.