Bài 06: Học CSS3 - Gradient Background
Trong Photoshop bạn có thể tạo một hình ảnh với nhiều màu sắc và chúng trộn lẫn với nhau nhìn rất bắt mắt như hình dưới đây. Thì bạn hoàn ...
Trong Photoshop bạn có thể tạo một hình ảnh với nhiều màu sắc và chúng trộn lẫn với nhau nhìn rất bắt mắt như hình dưới đây.
Thì bạn hoàn toàn có thể làm điều này trong CSS3 bằng cách sử dụng thuộc tính background kêt hợp với giá trị Gradient.
Trong CSS3 hỗ trợ hai loại Gradient:
- Linear Gradients (Kéo theo các vị trí lên, xuống, trái, phải, đường chéo)
- Radial Gradients (Kéo tại vị trí do lập trình viên chọn và lan tỏa ra tứ phía theo một hình nào đó (ví dụ ellipse))
1. Linear Gradients trong CSS3
Cú pháp:
background : linear-gradient(direction, color1, color2, color3, color4, ...)
Trong đó direction gồm các giá trị:
- Giá trị đơn to top hoặc to left hoặc to right hoặc to bottom thì nó sẽ kéo theo cạnh đối diện
- Giá trị đôi (to top left) hoặc (to left right) nếu bạn muốn chỉ rõ kéo từ cạnh nào sang cạnh nào (tức là đường chéo)
Nếu ta không truyền direction thì theo mặc định nó sẽ có giá trị top (tức là top - bottom)
Tương tự chúng ta có code Hack CSS như sau:
background: -webkit-linear-gradient(direction, color1, color2, color3, color4, ...); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(direction, color1, color2, color3, color4, ...); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(direction, color1, color2, color3, color4, ...); /* For Firefox 3.6 to 15 */
Có một lưu ý là đối với code Hack CSS thì direction không có chữ to.
Ví dụ: XEM DEMO
div{
float : left;
awidth: 200px;
height: 100px;
margin: 10px;
}
#div1{
background : linear-gradient(red, yellow);
}
#div2{
background : linear-gradient(to left, red, yellow);
background : -moz-linear-gradient(left, red, yellow);
background : -webkit-linear-gradient(left, red, yellow);
background : -o-linear-gradient(left, red, yellow);
}
#div3{
background : linear-gradient(to right, red, yellow);
background : -moz-linear-gradient(right, red, yellow);
background : -webkit-linear-gradient(right, red, yellow);
background : -o-linear-gradient(right, red, yellow);
}
#div4{
background : linear-gradient(to bottom left, red, yellow);
background : -moz-linear-gradient(bottom left, red, yellow);
background : -webkit-linear-gradient(bottom left, red, yellow);
background : -o-linear-gradient(bottom left, red, yellow);
}Kết quả:
Sử dụng Angles:
Bạn có thêm sự lựa chọn đó là sử dụng góc thay vì xác định hướng (to left, to right ...) bằng cách sử dụng cú pháp sau:
background: linear-gradient(angle, color-stop1, color-stop2);
Trong đó Angle là góc xá định giữa đường ngang và đường Gradient đi ngược chiều của kim đồng hồ. Hay nói cách khác 0deg sẽ tạo bottom to top Gradient, 90deg sẽ tạo left to right Gradient.
Ví dụ: XEM DEMO
div{
float : left;
awidth: 200px;
height: 100px;
margin: 10px;
}
#div1{
background : linear-gradient(0deg, red, yellow);
background : -moz-linear-gradient(0deg, red, yellow);
background : -webkit-linear-gradient(0deg, red, yellow);
background : -o-linear-gradient(0deg, red, yellow);
}
#div2{
background : linear-gradient(90deg, red, yellow);
background : -moz-linear-gradient(90deg, red, yellow);
background : -webkit-linear-gradient(90deg, red, yellow);
background : -o-linear-gradient(90deg, red, yellow);
}
#div3{
background : linear-gradient(180deg, red, yellow);
background : -moz-linear-gradient(180deg, red, yellow);
background : -webkit-linear-gradient(180deg, red, yellow);
background : -o-linear-gradient(180deg, red, yellow);
}
#div4{
background : linear-gradient(360deg, red, yellow);
background : -moz-linear-gradient(360deg, red, yellow);
background : -webkit-linear-gradient(360deg, red, yellow);
background : -o-linear-gradient(360deg, red, yellow);
}Kết quả:
Sử dụng nhiều màu:
Nếu bạn muốn trộn nhiều màu với nhau thì chỉ việc bổ sung màu vào thuộc tính Gradient, nhưng bạn phải lưu ý rằng thứ tự màu phải được sắp xếp cho đúng nhé.
Ví dụ: XEM DEMO
div{
float : left;
awidth: 300px;
height: 200px;
margin: 10px;
background : linear-gradient(to bottom, red, yellow, pink, blue, green);
background : -moz-linear-gradient(bottom, red, yellow, pink, blue, green);
background : -webkit-linear-gradient(bottom, red, yellow, pink, blue, green);
background : -o-linear-gradient(bottom, red, yellow, pink, blue, green);
}Kết quả:
Sử dụng Transparency:
Ở bài tìm hiểu Color trong CSS3 chúng ta đã học cách sử dụng HSLA Color hoặc RGBA Color để tạo độ trong suốt, vậy thì chúng ta cũng có thể kết hợp nó trong Gradient để tạo độ trong suốt.
Ví dụ: XEM DEMO
div{
float : left;
awidth: 300px;
height: 200px;
margin: 10px;
background : linear-gradient(to bottom, rgba(255,0,0,0.5), blue);
background : -moz-linear-gradient(bottom, rgba(255,0,0,0.5), blue);
background : -webkit-linear-gradient(bottom, rgba(255,0,0,0.5), blue);
background : -o-linear-gradient(bottom, rgba(255,0,0,0.5), blue);
}Kết quả:
Lặp - repeating-linear-gradient:
Bạn thấy dù chiều cao và chiều rộng của đối tượng HTML bao nhiêu đi nữa thì nó vẫn phủ đầy, nhưng giả sử giờ mình muốn nó chỉ chiếm một khoảng nào đó và lặp tiếp tục lặp lại thì ta dùng thuộc tính repeating-linear-gradient.
Ví dụ: XEM DEMO
div{
float : left;
awidth: 300px;
height: 200px;
margin: 10px;
background : repeating-linear-gradient(to bottom, red 10%, blue 20%);
background : -moz-repeating-linear-gradient(bottom, red 10%, blue 20%);
background : -webkit-repeating-linear-gradient(bottom, red 10%, blue 20%);
background : -o-repeating-linear-gradient(bottom, red 10%, blue 20%);
}Kết quả:
2. Radial Gradients trong CSS3
Radial Gradient dùng để tạo hiệu ứng tại vị trí nào đó (do lập trình viên chọn) và lan tỏa ra tứ phía, và để có được hiệu ứng thì chắc chắn ban phải sử dụng ít nhất hai màu sắc khác nhau.
Cú pháp:
background: radial-gradient(shape size at position, start-color, ..., last-color);
Trong đó Shape mặc định là hình Ellipse, size là farthest-corner và position là center.
Code Hack CSS:
background: -moz-radial-gradient(shape, position, size, start-color, ..., last-color); background: -webkit-radial-gradient(shape, position, size, start-color, ..., last-color); background: -o-radial-gradient(shape, position, size, start-color, ..., last-color);
Lưu ý: Phải sử dụng đúng cấu trúc cú pháp trên
Phân chia khoảng màu đồng đều:
Theo mặc định thì các màu sẽ được chia một khoảng không gian bằng nhau.
Ví dụ: XEM DEMO
div{
float : left;
awidth: 300px;
height: 200px;
margin: 10px;
background : radial-gradient(red, blue, pink);
background : -moz-radial-gradient(red, blue, pink);
background : -webkit-radial-gradient(red, blue, pink);
background : -o-radial-gradient(red, blue, pink);
}Kết quả:
Tùy chọn khoảng màu:
Nếu bạn muốn thiết lập mỗi màu sắc chiếm một khoảng bao nhiêu đó thì thêm số phần trăm (%) đằng sau màu đó (khoảng cách tính từ vị trí trung tâm, nghĩa là màu sau phải lớn hơn màu trước).
Ví dụ: XEM DEMO
div{
float : left;
awidth: 300px;
height: 200px;
margin: 10px;
background : radial-gradient(red 10%, blue 60%, pink 90%);
background : -moz-radial-gradient(red 10%, blue 60%, pink 90%);
background : -webkit-radial-gradient(red 10%, blue 60%, pink 90%);
background : -o-radial-gradient(red 10%, blue 60%, pink 90%);
}Kết quả:
Tùy chọn Shape:
Mặc đình là ellipse nhưng bạn có thể thay thế bằng circle.
Ví dụ: XEM DEMO
div{
float : left;
awidth: 300px;
height: 200px;
margin: 10px;
background : radial-gradient(circle, red 10%, blue 90%);
background : -moz-radial-gradient(circle, red 10%, blue 90%);
background : -webkit-radial-gradient(circle, red 10%, blue 90%);
background : -o-radial-gradient(circle, red 10%, blue 90%);
}Kết quả:
Tùy chọn Size:
Chúng ta có bốn giá trị sau:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
Mặc định nếu không chọn size thì nó sẽ lấy farthest-side.
Ví dụ: XEM DEMO
div{
float : left;
awidth: 200px;
height: 200px;
margin: 10px;
color: #fff;
}
#div1{
background : radial-gradient(circle closest-side, red, blue);
background : -moz-radial-gradient(circle, closest-side, red, blue);
background : -webkit-radial-gradient(circle, closest-side, red, blue);
background : -o-radial-gradient(circle, closest-side, red, blue);
}
#div2{
background : radial-gradient(circle farthest-side, red, blue);
background : -moz-radial-gradient(circle, farthest-side, red, blue);
background : -webkit-radial-gradient(circle, farthest-side, red, blue);
background : -o-radial-gradient(circle, farthest-side, red, blue);
}
#div3{
background : radial-gradient(circle closest-corner, red, blue);
background : -moz-radial-gradient(circle, closest-corner, red, blue);
background : -webkit-radial-gradient(circle, closest-corner, red, blue);
background : -o-radial-gradient(circle, closest-corner, red, blue);
}
#div4{
background : radial-gradient(circle farthest-corner, red, blue);
background : -moz-radial-gradient(circle, farthest-corner, red, blue);
background : -webkit-radial-gradient(circle, farthest-corner, red, blue);
background : -o-radial-gradient(circle, farthest-corner, red, blue);
}Kết quả:
Tùy chọn Position:
Nếu bạn muốn vị trí trung tâm không nằm ở giữa nữa thì có thể chọn một vị trí bất kì bằng cách nhập khoảng cách so với lề trái và lề trên, đơn vị của nó có thể là % hoặc px.
Ví dụ: XEM DEMO
div{
float : left;
awidth: 300px;
height: 200px;
margin: 10px;
background : -moz-radial-gradient(circle, 100px 200px, farthest-side, red 10%, blue 90%);
background : -webkit-radial-gradient(circle, 100px 200px, farthest-side, red 10%, blue 90%);
background : -o-radial-gradient(circle, 100px 200px, farthest-side, red 10%, blue 90%);
background : radial-gradient(circle farthest-side at 100px 200px, red 10%, blue 90%);
}Kết quả:
Lặp - repeating-radial-gradient:
Tương tự như Linear Gradient bạn có thể repeat Radial Gradient bằng cách sử dụng thuộc tính repeating-radial-gradient.
Ví dụ: XEM DEMO
div{
float : left;
awidth: 200px;
height: 200px;
margin: 10px;
color: #fff;
background : repeating-radial-gradient(circle closest-side, red 10%, blue 20%);
background : -moz-repeating-radial-gradient(circle, closest-side, red 10%, blue 20%);
background : -webkit-repeating-radial-gradient(circle, closest-side, red 10%, blue 20%);
background : -o-repeating-radial-gradient(circle, closest-side, red 10%, blue 20%);
}Kết quả:
3. Lời kết
Gradient trong CSS3 quả nhiên lợi hại phải không các bạn, ban đầu mình cũng không thể tưởng tượng được CSS lại có thể làm được những tấm hình như vậy nhưng khi nghiên cứu mới thực sự tin.
Bài này rất đơn giản nên bạn phải vận dụng thêm các thuộc tính khác nữa mới có thể tạo những hiệu ứng độc và đẹp mắt
Nguồn: code24h.com
