Mẫu khung CSS đẹp và tinh tế cho blog

bùi sang thọ | 16.3.15 | Blog |

Bạn để ý đến những bài về toán học của Math2IT, các khung định nghĩa, định lý và phụ đề được trang trí khá bắt mắt và tinh tế. Bài này sẽ hướng dẫn bạn làm được giống như thế.

Cũng giống như bài tạo khung chèn code đẹp cho blog hay bài tạo khung thông báo đẹp cho blog, bài này cũng sử dụng các thiết kế dành riêng cho một class cụ thể.

Bạn có thể xem ví dụ ngay phía trên. Để làm được, bạn thực hiện theo các bước sau.

Bước 1.  Những đoạn code sau đây sẽ được đặt trước thẻ

]]></b:skin>

Bước 2. Dưới đây là code cho ví dụ ở trên (cùng màu sắc).

.dinhnghia{
  display:block;
  background: #d4faff;
  padding: 15px 20px;
  margin: 20px 0;
  position: relative;
  
  /*Font*/
  font-size: 15px;
  line-height: 1.4;
  color: #4d4d4d;
  text-align: justify;
  
  /*Borders - (Optional)*/
  border-left: 15px solid #37c3d4;
  border-right: 2px solid #37c3d4;
  
  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}

Trong đó, bạn có thể thay đổi theo ý mình ở những chỗ sau

• background: #d4faff; - màu nền của khung, bạn có thể tự tìm cho mình mã code của màu ở link này.
• font-size: 15px; - kích cỡ của font chữ.
• color: #4d4d4d; - màu chữ.
• border-left: 15px solid #37c3d4; - màu sắc thanh ở bên trái. 15px là độ dày.
• border-right: 2px solid #37c3d4; - màu sắc thanh ở bên phải. 2px là độ dày.
• dinhnghia - tên của class, bạn có thể thay đổi theo ý bạn.

Bước 3. Bạn có thể tạo thêm nhiều cái khác, mỗi cái đại diện cho một loại khung, một loại màu sắc. Còn khi dùng, bạn cứ việc tạo một thẻ div với tên của class giống như bên dưới là ok.

<div class="dinhnghia" style="text-align:justify;">
abc
</div>

Bài này trích nguyên văn từ trang http://www.math2it.com.