CSS3 Và những thuộc tính mới nhất trong CSS3

Trong một bài viết trước chúng tôi có đề cập tới vấn đề thiết kế web bằng Css3. Vậy CSS3 có những thuộc tính gì mới trong thiet ke website hiện nay. Bài này chúng ta cùng tìm hiểu về những thuộc tính mới nhất trong công nghệ thiết kế web với CSS3.

Những thuộc tính mới nhất trong CSS3

Border-radius
Border-image
CSS3 Gradient
Box-shadow
Vendor Prefix
Text-shadow
Column
Media Query
Transition
Vậy những thuộc tính mới đó làm việc và sử dụng như thế nào?

Cách sử dụng các thuộc tính mới của CSS3

Border-radius

Thuộc tính border-redius trong CSS3 được sử dụng để bo góc cho các border. Border-radius có 4 giá trị để bo góc bắt đầu từ góc thứ nhất tính theo chiều kim đồng hồ. Ví dụ đoạn code CSS3 sau sử dụng border-radius:
#box{
background:green;
height:250px;
width:300px;
border-radius: 10px 10px 5px 5px;
}

Và kết quả như sau:

Cách sử dụng border-radius bo góc

Bạn thử tăng độ bo của nó lên bằng 1 nửa width xem nó ra hình gì nhé.

Box-Shadow

Thuộc tính box-shadow giúp tạo hiệu ứng bóng đổ theo chiều ngang và dọc của website. Và bạn hãy quan sát đoạn code CSS3 dưới đây nhé

#box{
    background:green;
    height:250px;
    width:300px;
    line-height:200px;
    text-align:center;
    color:white;
    font-weight:bold;
    box-shadow:10px 10px 10px blue;
    –webkitbox-shadow: 10px 10px 10px blue;
    -moz-box-shadow: 10px 10px 10px blue;
    }

Và đây nó sẽ là kết quả

demo cach su dung box-shadow css3

Và đương nhiên để nó hiển thị tốt trên các trình duyệt bạn phải thêm prefix cho nó rồi. Lưu ý là box-shadow có thể sử dụng giá trị âm. Hãy kết hợp chúng và tạo hiệu ứng đổ bóng đẹp hơn nhé.

Gradient

Thuộc tính gradient được sử dụng nhiều trong các website. Nếu như trước đây bạn phải sử dụng tới photoshop để tạo ra những hình ảnh gradient thì nay CSS3 sẽ giúp bạn thực hiện công việc này một cách đơn giản và hiệu quả. Xem đoạn code dưới đây:

#gradient{
    background:#fff;
    height:250px;
    width:600px;
    background-image:-moz-repeating-linear-gradient(450deg,white,black,green,blue,red,yellow);
    background-image:-webkit-gradient(linear,0 0,0 100%,from(white),to(black));
    }

Hãy thử và trải nghiệm thêm với đoạn code sau

#gradient{
    background:#fff;
    height:250px;
    width:600px;
    background-image:-moz-repeating-linear-gradient(left,white 80%,blue,white);
    background-image:-webkit-gradient(linear,0 0,0 100%,from(white),to(black));
    }

Và đây là kết quả cho hai đoạn code trên

demo cach su dung gradient trong css3

Column

Đôi khi bạn thường gặp khó khăn trong việc phân chia đoạn văn thành nhiều cột khác nhau, sử dụng khá nhiều css và thẻ html. Với thuộc tính Column mới trong CSS3 sẽ giúp bạn chia một đoạn văn thành các cột theo ý muốn.

Quan sát đoạn code dưới đây và thử áp dụng nó nhé:

#gradient{
        width:600px;
        color:blue;
        column-count:3;
        -o-column-count:3;
        -ms-column-count:3;
        -moz-column-count:3;
        -webkit-column-count:3;
        /* Chia số cột thành 3 cột */
        
        -webkit-column-gap:20px;
        -moz-column-gap:20px;
        -ms-column-gap:20px;
        -o-column-gap:20px;
        colum-gap:20px;
        /* Chia độ rộng của các cột */
    }

Và đây là kết quả cho đoạn code trên

ket qua cach su dung column trong css3Media-query

Media-query là thuộc tính CSS3 được dùng giúp cho việc hiển thị nội dung website tốt nhất trên các thiết bị có độ phân giải màn hình khác nhau.

Cấu trúc sử dụng thuộc tính Media-query như sau:

<tag media=”giá trị”></tag>
Giá trị của thuộc tính media có thể bao gồm cả thiết bị:
Ví dụ
<a href=”#” media=”handheld and (max-device-width:2048px)”></tag>
<a href=”#” media=”print and (min-resolution:72dpi)”></tag>
Toán tử kết hợp có thể là: and, or, dấu phẩy “,”

Dưới đây là một ví dụ sử dụng media-query

body{
    width:960px;
    margin: 20px auto;
    }
    @media screen and (max-width:500px){
        .media_query{
        display:none;
        }
    }
    .media_query{
    background:green;
    width:100%;
    height:200px;
    }

Dưới đây là kết quả sử dụng đoạn code trên. Click vào ảnh để xem sự thay đổi khi ta thủ nhỏ độ phân giải màn hình
cach su dung media query trong css3

Transition

Các bạn có lẽ đẫ thấy nhiều webiste có hiệu ứng Transition nhưng chắc chưa biết nó sử dụng như thế nào. Thuộc tính transition xác định một quá trình chuyển đổi mỗi khi có hành động. Với thuộc tính transition này thì CSS3 có lẽ đã lấn sân sang javascript

Xem đoạn code sau:

ul li{
    list-style:none;
    width:200px;
    height:80px;
    line-height:80px;
    background:blue;
    margin-bottom:1px;
    text-indent:10px;
    transition: width 1s;
    -webkit-transition: width 1s;
    -o-transition: width 1s;
    }
    ul li:hover{
        width:305px;
        cursor:pointer;
    }

Và kết quả như sau:

demo cach su dung transition trong css3Hãy thử áp dụng một số thuộc tính mới nhất trong CSS3 mà OSVN đã giới thiệu với các bạn ở trên cho website của mình và trải nghiệm sự khác biệt nhé. Và còn một số thuộc tính mới khác mà cong ty thiet ke web chúng tôi chưa trình bày hết các bạn có thể tìm hiểu thêm để bổ sung kiến thức. Chúc các bạn thành công.

Comments

Bình luận