50 Thủ thuật CSS không thể bỏ qua – Part 3

Tiếp theo những phần trước, hôm nay chúng ta tìm hiểu thêm một số thủ thuật CSS hay sử dụng trong quá trình thiết kế website.

20. Cross-browser gradient

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(left,  #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to right, #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */

 

Ngoài ra bạn có thể tùy biến hơn bằng công cụ CSS Gradient Generator.
 

21. Nth-child

nth-child pseudo class cho phép bạn chọn các thành phần có thự tự bất kỳ trong một list. Ví dụ:
ul li:nth-child(3) {
    background: blue
}

 

Đoạn CSS trên sẽ đặt background là blue cho thành phần thứ 3 của list.
ul li:nth-child(3n+3) {
    background: blue
}

 

Đoạn CSS trên sẽ đặt background là blue cho các thành phần thứ 3, 6, 9, 12,… của list.
 
nth-child hay được dùng để style cho các dòng chẵn, dòng lẻ của một table. nth-child được hỗ trợ bởi hầu hết các trình duyệt trừ IE8 trở xuống. Bạn có thể dùng nth-child selector của jQuery để thay thế.
 

22. Css shortthand

Sử dụng cách viết tắt này làm cho đoạn code của bạn ngắn gọn và sáng sủa hơn:
margin: margin-top margin-right margin-bottom margin-left;
       /* margin: 1px 2px 3px 4px; */
       /* padding, border-width, outline-width tương tự */

border: width style color;
       /* border: 1px solid red; */
       /* border-top, border-bottom, border-right, border-left tương tự */

background: color image repeat position scroll;
       /* background: red url('bg.png') repeat bottom right fixed; */

font: style variant weigth size/line-height family;
       /* font: italic small-caps bold 1em/1.2em segoe ui, arial, tahoma; */

list-style: type position image;
       /* list-style: square outside url('start.png'); */

 

23. Vẽ hình tròn với border-radius

Đặt giá trị cho width và height gấp đôi border-radius để tạo ra hình tròn:
.cirlce {
    width: 300px;
    height: 300px;
    background-color: red;
    border-radius: 150px;
    -moz-border-radius: 150px;
    -webkit-border-radius: 150px;
}

 

24. Vẽ hình tam giác với css

.triangle {
    border-color: transparent transparent green transparent;
    border-style: solid;
    border-width: 0px 300px 300px 300px;
    height: 0px;
    width: 0px;
}
<div class='triangle'></div>

 

Ngoài ra bạn cũng có thể tạo ra nhiều hình khác bằng cách kết hợp khéo léo các thuộc tính trên.
 

25. Thay thế chữ bằng ảnh

Trong một số trường hợp, bạn muốn sử dụng ảnh để làm cho đoạn chữ trở nên đẹp hơn, nhưng vẫn muốn giữ text để làm SEO, thì có thể sử dụng text-indent:
h1 {
    text-indent:-9999px;
    background:url("h1-image.jpg") no-repeat;
    width:200px;
    height:50px;
}

26. Xóa thanh cuộn dọc của textarea trong IE

textarea{
    overflow:auto;
}

 

27. Cắt ngắn text cho vừa với chiều rộng

HTML:
<p class='ellipsis'>Nội dung này quá dài nên sẽ bị cắt ngắn ^^<p>

 

CSS
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
}

 

  1. 50 thủ thuật CSS không thể bỏ qua - phần 1
  2. 50 thủ thuật CSS không thể bỏ qua - phần 2
 

Related Post


50 Thủ thuật CSS không thể bỏ qua – Part 2
Sunday, March 30, 2014
Tiếp theo bài trước, hôm nay chúng ta sẽ nghiên cứu thêm một số thủ thuật css nhỏ nữa. Nó đơn giản nhưng lại dễ quên nếu không hay dùng, vì vậy mình tổng hợp lại để một ngày nào quên thì lôi ra đọc...
50 Thủ thuật CSS không thể bỏ qua – Part 1
Friday, March 28, 2014
Dưới đây là 50 thủ thuật CSS hữu dụng mà các nhà thiết kế web không thể bỏ qua. Một số thủ thuật có thể mới mẻ, số khác lại đã quen thuộc với bạn. Tuy nhiên rất mong các bạn tìm thấy những điều bổ ích qua bài viết này.
Search

Đăng ký nhận bài mới


Category

Blog Archive