Blog

Backgrounds, Colors và Gradients, những thuộc tính

không thể thiếu để làm màu cho trang web.

Backgrounds

CSS3 có thêm một số thuộc tính mới, cho phép bạn điều khiển các phần tử của backgrounds tốt hơn.

  • background-image
  • background-size
  • background-origin
  • background-clip

Multiple Backgrounds

CSS3 cho phép bạn thêm nhiều hình ảnh nền cho một phần tử bằng thuộc tính back-ground-image.

Các hình ảnh khác nhau được phân cách bằng dấu phẩy, và những hình ảnh được xếp chồng lên nhau. HÌnh ảnh nào để trước thì sẽ hiển thị để người xem. Xem ví dụ:

<!DOCTYPE html>
<html>
<style> 
#vi_du_1 {
    background-image: url(otvina.png), url(background_1.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    width: 1280px; height: 600px;
}
#text{
  padding: 100px;
}
</style>
<body>
  <div id="vi_du_1">
    <p id="text">Hình ảnh nền ở sau và logo xếp chồng lên.</p>
  </div>
</body>
</html>

otvina_img

CSS3 Background Size

Thuộc tính background-size cho phép bạn xác định kích thước của hình nền. Code lại ví dụ dưới đây để xem chi tiết.

<!DOCTYPE html>
<html>
<style> 
#vi_du_2 {
    background-image: url(otvina.png), url(background_1.png);
    background-position: left top;
    background-size: 800px 480px;
    background-repeat: no-repeat;
    width: 1280px; height: 600px;
    border: 1px solid red
}
#text{
  padding: 100px;
}
</style>
<body>
  <div id="vi_du_2">
    <p id="text">OTVINA-Thiet ke Website chuyen nghiep</p>
  </div>
</body>
</html>
  •  background-size: auto;
  •  background-size: cover;
  •  background-size: contain;
  •  background-size: 800px 480px;

Tìm những cách khác nhau để xác định kích thước cho hình nền.

Khi có nhiều hình nền, ta phải xác định kích thước của chúng cho phù hợp với nội dung. Xem đoạn code sau:

background: url(otvina.png) left top no-repeat, url(otvina.png) right bottom no-repeat, url(background_1.png) left top repeat;

background-size: 50px, 130px, auto;

Rất đơn giản để xác định các thuộc tính cho hình ảnh. Bạn chỉ cần làm đúng, thêm phần sáng tạo thì sẽ có một trang web đẹp như ý.

Làm thế nào để có ảnh nền bao phủ toàn bộ trang và không cuộn?

background: url(background.png) no-repeat center fixed;

background-size: cover;

CSS3 Background Origin

background-origin xác định nơi hình nền được định vị.

Ví dụ: background-origin: content-box;

 

SS3 Background Clip

Xác định vùng của hình nền.

Ví dụ: background-clip: padding-box;

 

background image, size, origin, clip. Xác định nền cho trang web.
background-image url(image1.jpg), url(image2.jgg),… Xác định ảnh nền cho trang web, các ảnh có thể xếp chồng lên nhau.
background-size auto, cover, contain Xác định kích thước cho ảnh nền.
backgroundi-origin content-box, border-box. Xác định nơi hình nền được định vị.
background-clip content-box, padding-box.  Xác định vùng của hình nền.

CSS3 Colors

CSS3 hỗ trợ tên màu, mã thập lục phân(hexadecimal), và RGB. Nó như thế này

CSS3 hỗ trợ thêm:

  • RGBA colors(Red, Green, Blue, Alpha)
  • HSL colors
  • HSLA colors
  • opacity

Mấy cái trên nó là gì? Mình sẽ cho các bạn thấy dưới đây. Trong bài viết này và những bài viết khác nữa, mình có sử dụng một vài công cụ của w3school.com. Không làm mất thời gian của bạn nữa, mình vào bài luôn.

Bắt đầu với RGBA colors trước.

Chắc các bạn cũng biết RGB rồi chứ? Chữ cái đầu của tên 3 màu cơ bản Red, Green, và Blue. Thế còn RGBA nó là cái gì? Nó là Red, Green, Blue, và Alpha. Có vẻ Alpha chả có tí tẹo liên quan gì nhỉ.

Thế này nha. rgb(255,0,0) là màu đỏ, thì rgba(255,0,0,0.4) cũng là màu đỏ nhưng mức độ đậm giảm hơn. Như khi bạn nghe nhạc vậy, bạn cho âm lượng ở mức to nhất(tức là đang ở màu đỏ), rồi bạn giảm dần âm lượng xuống, thì cái rgba này nó cũng như vậy. Xem hình là hiểu ngay mà.

 

Screenshot from 2017-02-22 14-31-18

Thế còn HSL colors là gì?

Cái này cũng rất thú vị. Thêm một cách để chỉnh màu nữa. HSL(Hue, Saturation, Lightness), tức là màu sắc, độ bão hòa và độ đậm nhạt. Màu sắc từ 0 đến 360, còn độ bão hòa và đậm nhạt tính theo phần trăm.

<style>
  #p1 {background-color: hsl(0, 100%, 100%);}
  #p2 {background-color: hsl(0, 100%, 75%);}
  #p3 {background-color: hsl(0, 100%, 50%);}
  #p4 {background-color: hsl(0, 100%, 25%);}
</style>

Screenshot from 2017-02-22 14-55-16

HSLA?

Nó là HSL thêm Alpha. Đến đây các bạn cũng hiểu rồi chứ. Nhiệm vụ của cái Alpha tương tượng như RGBA. Một vài ví dụ.

#p1 {background-color: hsla(0, 100%, 50%, 1);}
#p2 {background-color: hsla(0, 100%, 50%, 0.7);}
#p3 {background-color: hsla(0, 100%, 50%, 0.5);}
#p4 {background-color: hsla(0, 100%, 50%, 0.3);}

Cuối cùng là Opacity.

Thằng này nó mạnh lắm, nó áp dụng lên toàn bộ phần tử, màu nền và cả văn bản đều được trong suốt hay làm đậm. Xem ví dụ cho rễ hiểu.

Screenshot from 2017-02-22 15-12-06

Chú ý: opacity là một thuộc tính riêng rẽ, nó không nằm cùng những thuộc tính định màu sắc, ngăn cách nhau bằng

dấu ” ; ” như hình.

CSS3 Gradients.

Gradients cho phép bạn hiển thị quá trình chuyển đổi suôn sẻ giữa hai hoặc nhiều màu sắc nhất định. Trước đây, bạn phải dùng hình ảnh để có hiệu ứng đẹp, điều này sẽ tăng thời gian tải trang và lượng băng thông. Nhưng với Gradients, những hiệu ứng do trình duyệt tạo ra sẽ cải thiện tốc độ load trang, tạo ra website có chất lượng cao.

  • Linear Gradients (goes down/up/left/right/diagonally)
  • Radial Gradients (defined by their center)

Linear Gradients

Linear Gradient – Top to Bottom (mặc định)

#p1 {
    margin-bottom:20px;
    background: red; height: 50px;
    background: linear-gradient(red, white);
  }

Một vài hiệu ứng khác, hãy viết lại đoạn code rồi chạy trên trình duyệt.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  #p1 {
    margin-bottom:20px;
    height: 150px;
    background: linear-gradient(red, white);
  }
  #p2 {
    margin-bottom:20px;
    height: 150px;
    background: linear-gradient(to right, red, white);
  }
  #p3 {
    margin-bottom:20px;
    height: 150px;
    background: linear-gradient(to left, red, white);
  }
  #p4 {
    margin-bottom:20px;
    height: 150px;
    background: linear-gradient(to bottom right, red, white);
  }#p5 {
    margin-bottom:20px;
    height: 150px;
    background: linear-gradient(to top right, red, white);
  }#p6 {
    margin-bottom:20px;
    height: 150px;
    background: linear-gradient(to bottom left, red, white);
  }
</style>
</head>
<body>
<div id="p1">Default</div>
<div id="p2">to right</div>
<div id="p3">to left</div>
<div id="p4">to bottom right</div>
<div id="p5">to top right</div>
<div id="p6">to bottom left</div>

</body>
</html>

Sử dụng nhiều hơn 2 màu.

#three_color{
    margin-bottom:20px;
    height: 150px;
    background: linear-gradient(red, white, black);
  }

Bạn có thể sử số lượng màu tùy ý, không giới hạn. Nhưng để trang web hiển thị tốt thì không nên dùng quá nhiều, 5 màu là nhiều rồi, không cần thêm nữa.

#four_color{
    margin-bottom:20px;
    height: 200px;
    background: linear-gradient(red, white, yellow, purple);
  }

Sử dụng hợp lý các từ khóa như: to right, to left, to top right, to top left, to bottom right, to bottom left.

#seven_color{
    margin-bottom:20px;
    height: 150px;
    background: linear-gradient(to right, red, white, yellow,hotpink, purple, blue, pink);
  }

Có rất nhiều cách để bạn thỏa mãn sự sáng tạo của mình, hãy tự làm vài hiệu ứng cho mình.

Repeating a linear-gradient.

#repeating{
    margin-bottom:20px;
    height: 200px;
    background: repeating-linear-gradient(red, white 10%, yellow 20%);
  }

Chú ý các thông số đi kèm màu sắc, sẽ rất dị nếu bạn thay đổi quá nhiều đó.

CSS3 Radial Gradients

Nó tạo ra những đường tròn hoặc đường elip đồng tâm. Kết hợp màu sắc hợp lý sẽ tạo ra những hình ảnh trông rất ảo.

Radial Gradient – Evenly Spaced Color Stops(mặc định)

#radial_1{
    margin-bottom:20px;
    height: 200px;width: 200px;
    background:radial-gradient(red, white, yellow);
  }

 Radial Gradient – Differently Spaced Color Stops

#radial_2{
    margin-bottom:20px;
    height: 200px;width: 200px;
    background:radial-gradient(red 5%, white 30%, yellow);
  }

Một vài thông số khác bổ sung cho gradient.

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

Xem chi tiết tại đây:

Repeating a radial-gradient.

#repeating_radial{
    margin-bottom:20px;
    height: 200px;width: 300px;
    background:repeating-radial-gradient(red, white 10%, yellow 15%);
  }

Phần này khá là nhiều code, bạn cố gắng viết lại code và chạy thử trên trình duyệt, thay đổi một vài thông số. Sáng tạo trong việc thiết  kế website là yếu tố cực kì quan trọng, vậy hãy luôn giữ nó bên mình.

Hẹn gặp lại ở bài sau.