Bo 2 cạnh bên với CSS dùng hình ảnh - 12 July 2010 - All 4 You
Thursday, 23-Feb-2017, 11:05 AM
Welcome Guest | RSS
Main » 2010 » July » 12 » Bo 2 cạnh bên với CSS dùng hình ảnh
10:48 PM
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>

Chúc các bạn thành công.
Category: Design | Views: 875 | Added by: all4u | Rating: 0.0/0
Total comments: 2
2  
Was totally stuck until I read this, now back up and <a href="http://rnslvl.com">runnnig.</a>

1  
Posts like this brethgin up my day. Thanks for taking the time.

Only registered users can add comments.
[ Registration | Login ]
Login Form
Nhận bài qua Email


Đăng ký để nhận thông tin
và bài post mới nhất qua email

Chuyên mục
Toàn tập Dmon/ Ucoz [22]
Hướng dẫn thiết kế website với dịch vụ của Dmon.com/ Ucoz.com,...
Code [18]
Các code giúp bạn cá nhân hóa trang web của bạn
Design [21]
Các công cụ web giúp thiết kế web....
Featured Post - Image Gallery [15]
Menu [5]
Các Menu đẹp cho web của bạn
Tab Content [6]
Templates [3]
Toàn bộ thiết kế Template
Khác [0]
Rearch
Thống kê

Total online: 1
Guests: 1
Users: 0
Bản đồ truy cập
Locations of visitors to this page