Bo 2 cạnh bên với CSS dùng hình ảnh
Side Border Images[FD's BlOg] - Một thủ thuật để làm đẹp layout cho blog của bạn. Với 1 chút code css là bạn có thể tạo đường viền 2 bên của khung nội dung bằng hình ảnh.
Hình ảnh minh họa kết quả:
Để thực hiện việc này, bạn cần phải có ảnh có tính chất tương tự, tức là có thể lập đi lặp lại được, và cụ thể ở đây là lặp theo chiều dọc (trục y)
Có thể xem hình mẫu này :
☼ragged-right.gif
☼ragged-right.gif
Và đây là code CSS của thủ thuật này. và để áp dụng cho blog, bạn chỉ việc thêm đọan code CSS này vào trước dòng ]]></b:skin> trong code template của blog.
☼Code CSS:
.outerx{
width:50%;
margin-left:25%;
border:1px solid #000;
background:#fff url(ragged-right.gif) repeat-y left top;
}
.innerx{
background:transparent url(ragged-left.gif) repeat-y right top;
width:100%;
padding:1em 0;
}
.outerx p{
padding:0 20px;
margin:0 0 1em 0
}
- Thay link ảnh (code màu xanh) thành link của bạn,hoặc có thể sử dụng hình mẫu.
- Chú ý: dòng lệnh padding:0 20px; đây là lênh để căn trái và phải cho khung nội dung. và độ rộng của việc căn lề này bằng độ rộng của ảnh (có thể lớn hơn, tùy bạn, nhưng không nên để nhỏ hơn)
☼ code HTML:
<div class="outerx">
<div class="innerx">
<p>
{Nội dung của bạn}
</p>
</div>
</div>
- Tạo tab nội dung với CSS
- Menu nằm ngang - Hiệu ứng sổ menu con kiểu 1 hàng ngang (Mootools effect)
- Bộ sưu tập 31 style menu nằm ngang
- CSS Outline : Tạo đường viền cho khung
- Tạo tab có nội dung trượt liên tục theo thời gian - Ứng dụng của Mootools
- Hiểu rõ hơn về bố cục Blog của blogspot : Dành cho người mới bắt đầu tập chỉnh sửa CSS
- Bo góc với CSS : Bo 4 góc, 2 góc trên, 2 góc dưới... dùng hình ảnh
- Bo góc với lệnh CSS
- Làm cho nút "Read More..." (Đọc thêm) trông pro hơn
- Thủ thuật cơ bản : xóa đường viền của ảnh
- 1 Thủ thuật nhỏ cho các liên kết bằng hình ảnh
- Tạo các Tab nội dung
Comments[ 0 ]
Đăng nhận xét