Các thuộc tính mới nhất trong CSS3

Thảo luận trong 'Chuyện trò Computer' bắt đầu bởi thietkewebosvn, 24 Tháng mười 2014.

  1. thietkewebosvn

    thietkewebosvn Tiểu thương mới

    Tham gia ngày:
    10 Tháng mười 2014
    Bài viết:
    3
    Đã được thích:
    0
    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:
    [​IMG]
    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;
    -webkit-box-shadow: 10px 10px 10px blue;
    -moz-box-shadow: 10px 10px 10px blue;
    }
    Và đây nó sẽ là kết quả
    [​IMG]
    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
    [​IMG]
    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
    Các bạn xem thêm bài viết những thuộc tính mới nhất trong CSS3 tại ithietkeweb.net nhé
     
  2. cuongpm0217

    cuongpm0217 Tiểu thương mới

    Tham gia ngày:
    14 Tháng mười một 2014
    Bài viết:
    29
    Đã được thích:
    0
    Cái này từ 2011-2012 rồi -_- Thuộc tính mới phải tính đến @media để reponsive trong design bạn à :)
    Ghi tiêu đề thì ghi share cho người chưa biết chứ ghi mới nhất thì ..... ^^
     
  3. macbookcuvn

    macbookcuvn Tiểu thương mới

    Tham gia ngày:
    19 Tháng chín 2016
    Bài viết:
    10
    Đã được thích:
    0
    Up tin giúp đở nhau....................... Chúc shop buôn may bán đắt....................!!!!
     
  4. lamkana81

    lamkana81 Tiểu thương mới

    Tham gia ngày:
    26 Tháng một 2015
    Bài viết:
    37
    Đã được thích:
    0
    Bắt giữ xe vận chuyển trâu chết trương phình đi tiêu thụ

    Trong lúc tuần tra kiểm soát, Đội CSGT CA huyện Nghĩa Đàn (Nghệ An) đã phát hiện và bắt giữ vụ xe tải chuyên van tai Bac Nam một con trâu đã chết bốc mùi, có trọng lượng gần 290 kg.

    Chiều 9/11, Đội CSGT huyện Nghĩa Đàn cho PV Dân trí biết, vụ việc được Đội CSGT CA huyện thực hiện vào hồi 18h15', ngày 8/11, tại km 209, quốc lộ 15A.

    [​IMG]

    Theo đó, vào thời gian trên tổ tuần tra kiểm soát, Công an huyện Nghĩa Đàn tiến hành kiểm tra xe ô tô tải mang biển kiểm soát 37C - 162.76 do Lê Doãn Linh, trú tại khối Tân Thọ, thị trấn Nghĩa Đàn điều khiển.

    Qua kiểm tra, lực lượng CSGT CA huyện Nghĩa Đàn phát hiện trên xe có chở một con trâu nặng khoảng 290 kg đã chết không rõ nguyên nhân. Tại thời điểm kiểm tra Lê Doãn Linh không xuất trình được các giấy tờ liên quan đến con trâu trên.

    Sáng 9/11, công an huyện Nghĩa Đàn đã bàn giao con trâu nói trên cho trạm Chăn nuôi và Thú y huyện Nghĩa Đàn xử lý theo qui định của pháp luật.

    Mới đây vào khoảng 8h45', ngày 25/10, tại km 647, đường Hồ Chí Minh thuộc địa phận thị trấn Nghĩa Đàn, tổ tuần tra, kiểm soát đội CSGT, Công an huyện Nghĩa Đàn phát hiện xe ô tô tải mang biển kiểm soát 89C - 048.73 do lái xe Trần Huy Liệu (SN 1970, trú tại xã Nghĩa Mỹ, thị xã Thái Hòa) điều khiển chở 250 kg thịt lợn.

    Tại thời điểm kiểm tra, tài xế không xuất trình được giấy tờ chứng minh nguồn gốc, giấy chứng nhận kiểm dịch, phương tiện chở không đảm bảo VSATTP. Tổ tuần tra đã thu giữ số tang vật nói trên và bàn giao cho trạm Chăn nuôi, thú y huyện Nghĩa Đàn xử lý.

    Trước đó không lâu, vào khoảng 24h đêm 12/10, trong khi đang làm nhiệm vụ tuần tra trên tuyến đường liên xã thuộc xóm 12, xã Nghĩa Trung, lực lượng CSGT công an huyện Nghĩa Đàn đã tiến hành kiểm tra xe tải BKS 29Z-0584 do lái xe Bạch Văn Thế, trú tại xã Nghi Trung, huyện Nghi Lộc điều khiển đang trên đường vận chuyển 150 kg thịt trâu về Vinh để tiêu thụ.

    Qua kiểm tra, lái xe không xuất trình được giấy tờ chứng minh nguồn gốc, giấy chứng nhận kiểm dịch và vệ sinh an toàn thực phẩm. Lực lượng công an Nghĩa Đàn đã tiến hành tạm giữ phương tiện và bàn giao số lượng thịt trâu nói trên cho Trạm thú y Nghĩa Đàn xác minh và xử lý theo đúng quy định.

    Nguồn: Dantri.vn
     
  5. nontakjaba

    nontakjaba Tiểu thương tích cực

    Tham gia ngày:
    10 Tháng mười hai 2017
    Bài viết:
    256
    Đã được thích:
    9
    Cam on ban da chia se
     
  6. nguyenbaohai221

    nguyenbaohai221 Tiểu thương mới

    Tham gia ngày:
    27 Tháng hai 2018
    Bài viết:
    46
    Đã được thích:
    0

Chia sẻ trang này