Thiet Ke Web » Thiet Ke Web bằng CSS » Rounded-Corner với chiều rộng cố định

Thông thường các khối hình vuông hoặc chữ nhật sẽ rất dễ cho việt lập trình, chúng ta chỉ cần đổ 1 màu hoặc màu radient được repeat là xong. Với các rounded-corner backgroud thì việc viết code hmtl phức tạp hơn 1 chút, rounded-corner background được chia thành rất nhiều loại khác nhau như: rounded-corner với chiều rộng cố định hoặc chiều rộng và chiều cao đều co giản được. Khi thie ke web, rounded-corner có thể làm cho website chúng ta trở nên đẹp hơn, "mềm mại hơn". Đầu tiên chúng ta sẽ tìm hiểu về rounded-corner dễ nhất, đó là rounded-corner với chiều rộng cố định và chỉ đổ 1 màu duy nhất.

Rounded-Corner với chiều rộng cố định

Đây là dạng dễ nhất trong các rounded-corner, xem hình bên dưới. Với dạng này, chúng ta chỉ cần có 2 hình: 1 cái ở trên, 1 cái ở dưới, và bên trong là đổ cùng 1 màu.

Code HTML

<div class="box">

<h2>This is great</h2>

<p>Noi dung o day</p>

</div>

Code HTML

.box

{

       width: 418px;

       background: #ffdd67 url(../images/bottom1.gif) no-repeat left bottom;

}

 

.box h2

{

       background: url(../images/top1.gif) no-repeat left top;

       padding: 20px 20px 0 20px;

}

 

.box p

{

       padding: 0 20px 20px 20px;

}

Để làm được phần này, bạn phải tự tạo 2 hình top, bottom để tạo background hoặc bạn có thể download từ website này. Xem hình bên dưới

Đầu tiên chúng ta tạo bên dưới trước: background: #ffdd67 url(../images/bottom1.gif) no-repeat left bottom;. Màu: #ffdd67 là màu vàng, khi bạn nhập nội dung vô, chiều cao sẽ tự động giản xuống và tô màu vàng vô. Màu vàng #ffdd67 là màu của nội dung chính.

Rounded-corner với chiều rộng cố định và Có Border

Trường hợp này khó hơn một chút, bạn cần phải cắt một đường ngay có chiều rộng bằng chiều rộng của hình và chiều cao chỉ cần 1-5px, chúng ta sẽ lặp hình này từ trên xuống dưới với chiều cao không giới hạn.

Trong class box, chúng ta thêm vô background: url(../images/tile2.gif) repeat-y;. Phần background nhỏ này

Code CSS

.box

{

       width: 424px;

       background: url(../images/tile2.gif) repeat-y;

}

.box h2

{

       background: url(../images/top2.gif) no-repeat left top;

       padding-top: 20px;

}

.box .last

{

       background: url(../images/bottom2.gif) no-repeat left bottom;

       padding-bottom: 20px;

}

.box h2, .box p

{

       padding-left: 20px;

       padding-right: 20px;

}

<div class="box">

Code HTML

<h2>Rounded-corner với Border</h2>

        <p class="last">Nội dung ở đây</p>

</div>

  1. Phần 1: Format các thể chuẩn của HTML: p, h1, h2, h3, ...
  2. Phần 2: Float hình trong paragraph
  3. Phần 3: Tạo background cho website
  4. Phần 4: Tạo Icon, Bullet cho Heading, h1, h2
  5. Phần 5: Rounded-Corner với chiều rộng cố định
  6. Phần 6: Tạo Drop Shadows - Đổ bóng