Điểm qua những điểm nổi bật của CSS3

Xin chào các bạn, hôm nay mình xin giới thiệu đến mọi người những điều mới trong CSS3, chắc bạn nào đã từng viết qua layout chắc đã biết qua các thuộc tính cơ bản trong CSS1CSS2 như Width Height hay các thuộc tính về hướng như Top Bottom Left Right,...
Do vậy, trong bài viết này mình chỉ giới thiệu thêm các tính năng khác được bổ sung thêm trong CSS3

Thuộc tính Mô Tả
animtion Xác định chuyển động của một thành phần
appearance Định dạng cho thành phần trông như giao diện chuẩn gần với người dùng.
backface-visibility Xác định bề mặt sau của thành phần khi thực hiện một chuyển động xoay.
background-clip Xác định vùng background được cắt bớt theo vùng được giới hạn.
background-origin Xác định giá trị tương đối của background giới hạn theo vùng giới hạn.
background gradient Tạo màu sắc cho background theo biên độ giảm dần đều.
multiple background Sử dụng để khai báo nhiều background khác nhau trong cùng một tag.
border-image Dùng để định dạng các border bằng hình ảnh.
border-radius Dùng để định dạng các dạng bo góc của border.
box-align Xác định vị trí cho thành phần thoe chiều dọc hoặc theo chiều thẳng đứng.
box-direction Xác định hướng cho thành phần.
box-flex Xác định sự ưu tiên linh hoạt theo các thành phần khác.
box-ordinal-group Cho biết thứ tự ưu tiên của các thành phần.
box-orient Xác định thành phần theo mép rìa của thành phần.
box-sizing Xác định lại chiều rộng và chiều cao của thành phần.
box-shadow Định dạng bóng cho thành phần.
column Dùng để chia nội dung thành phần thành nhiều cột khác nhau.
@font-face Định dạng các dạng font chữ khác nhau theo các dạng font riêng.
font-size-adjust Dùng để định dạng điều chỉnh cho font chữ, độ lớn của chữ được thể hiện bởi phép nhân.
@keyframes Dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation
nav Di chuyển qua lại giữa các thành phần điều hướng (navigate) bằng ác di chuyển các phím mũi tên
opacity Hiển thị cấp độ trong suốt cho thành phần.
perspective Cho ta thấy được chiều sâu của thành phần trong khai báo 3D.
perspective-origin Định nghĩa trục quay cho thành phần sử dụng perspective.
resize Định dạng cho vùng nội dung mà người dụng có thể thay đổi được kích thước.
text-justify Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự sao cho dàn đều thành phần.
text-overflow Xác định vùng text được cắt bớt.
text-shadow Xác định đổ bóng cho text.
transform Xác định một quá trình chuyển đổi khi có một hành động.
word-break Sẽ làm cho những hữ trong một từ không còn là một thể thống nhất, nghĩa là có thể xuống dòng bất cứ vị trí nào trong từ.
word-wrap Sẽ làm cho những từ dài xuống hàng mà không làm vỡ layout.

Và sau đây, chúng ta sẽ đi vào các thuộc tính liên quan đến background

Nhưng chúng ta đã biết một số thuộc tính background thường dùng như:

Thuộc tính Giá trị Ví dụ Mô Tả
background-attachment fixed
scroll
background-attachment: fixed Xác định thành phần nền được cố định hoặc cuộn so với trang.
Được sử dụng kèm với giá trị background-image
background-color mã màu
tên màu
giá trị rgb
background-color: #EEE
background-color: red;
background-color: rgb(255,0,0);
Xác định màu nền cho thành phần
background-image url(Đường dẫn hình) background-image: url(gif-image.gif) Xác định hình ảnh nền cho thành phần
background-position left
right
top
bottom
px
%
background-position: left top; Xác định vị trí hình ảnh nền cho thành phần.
Được sử dụng kèm với giá trị background-image.
background-repeat repeat-x
repeat-y
repeat
no-repeat
background-repeat: repeat-x; Xác định hình ảnh nền được lặp như thế nào.
background Sử dụng một hoặc nhiều giá trị của các thuộc tính trên background: url(gif-image.gif) repeat-x left top; Có giá trị riêng lẻ hoặc tổng hợp các thuộc tính trên

và chúng ta sẽ đến với một thuộc tính của **Background** khá thú vị trong CSS3 đó là **background-clip**:
**background-clip** có 3 giá trị là:
Giá trị Mô tả
border-box background bao bọc cả border và nội dung bên trong
padding-box background bao bọc nội dụng bên trong bắt đầu tính từ padding
content-box background chỉ bao bọc nội dung bên trong, không tính khoảng trống giữa nôi dung và border

Chúng ta có thể hiểu rõ hơn khi quan sát ví dụ sau:

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: border-box;
}

#example2 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: padding-box;
}

#example3 {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: content-box;
}
</style>
</head>
<body>

    <p>No background-clip (border-box is default):</p>
    <div id="example1">
        <h2>Lorem Ipsum Dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>

    <p>background-clip: padding-box:</p>
    <div id="example2">
        <h2>Lorem Ipsum Dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>

    <p>background-clip: content-box:</p>
    <div id="example3">
        <h2>Lorem Ipsum Dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>

</body>
</html>

Và đây là kết quả của chúng ta

screen.png

Tiếp sau thuộc tính background-clip, Chúng ta đến với một thuộc tính không kém phần thú vị Background-origin

Background-origin cũng có 3 giá trị:

Giá trị Mô tả
border-box background bao bọc bởi viền ngoài của border
padding-box background bao bọc bởi viền ngoài padding (hay chính là viền trong của border)
content-box background chỉ bao bọc bởi viền của nội dung bên trong

Chúng ta sẽ theo dõi sự khác nhau qua ví dụ sau:

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: border-box;
}

#example2 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: padding-box;
}

#example3 {
  border: 10px solid black;
  padding: 35px;
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}
</style>
</head>
<body>

  <p>No background-origin (padding-box is default):</p>
  <div id="example1">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>

  <p>background-origin: border-box:</p>
  <div id="example2">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>

  <p>background-origin: content-box:</p>
  <div id="example3">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>

</body>
</html>

Và đây là kết quả của chúng ta

screen (1).png

Và giờ là thuộc tính cuối cùng của background, background-gradient

Cú pháp của chúng ta là:

 background: linear-gradient(direction, color-stop1, color-stop2, ...);

Nếu chúng ta không điền direction thì sẽ được mặc định hướng là từ trên xuống dưới

Example:

 #grad1 {
  height: 200px;
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(red, yellow); /* Standard syntax (must be last) */
}

Hiển thị

screen (2).png

Hay chúng ta có thể để màu đổi từ trái sang phải

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, red , yellow); /* Standard syntax */
}

Hiển thị:

Screenshot from 2016-02-25 17-35-36.png

Kết Luận

Trên đây, mình đã giới thiệu sơ qua về những sự thay đổi của CSS3 và đi qua một lượt các thuộc tính trong CSS liên quan đến background để mọi người hiểu rõ và vận dụng linh hoạt hơn.
Và cuối cùng, xin cám ơn các bạn đã theo dõi bài viết này
Hẹn gặp lại trong bài viết tới.

Thank you for reading! Goodbye!


All Rights Reserved