Show Background gradient là gì?Background gradient là dạng Background gradient thường được dùng để thiết kế các nút nhấn ( Cách thể hiện màu sắc của background gradient rất đa dạng, nên người viết code sẽ sử dụng tool để điều chỉnh theo đúng ý đồ mình, các bạn có thể tham khảo tool tạo background gradient. Dưới đây, ta sẽ lần lượt viết một vài cấu trúc đơn giản, thường dùng của background gradient. Cấu trúc tuyến tính (linear) cơ bảntag {
background-image: linear-gradient(color1, color2);
} HTML viết: <!DOCTYPE HTML> <html> <head></head> <body> <div>Background gradient</div> </body> </html> BACGROUND GRADIENT: LINEAR-GRADIENT 2 GIÁ TRỊ div {
background-image: linear-gradient(#476CFF, #FFEF5C);
height: 200px;
width: 400px;
} Hiển thị trình duyệt: BACGROUND GRADIENT: LINEAR-GRADIENT 3 GIÁ TRỊ div {
background-image: linear-gradient(#476CFF, #FFEF5C, #666666);
height: 200px;
width: 400px;
} Hiển thị trình duyệt: BACGROUND GRADIENT: LINEAR-GRADIENT NHIỀU GIÁ TRỊ div {
background-image: linear-gradient(#FF0000, #FF913D, #FFFF00, #06CF1A, #66FAFF, #7A7AFF, #CC40FF);
height: 200px;
width: 400px;
} Hiển thị trình duyệt: Cấu trúc tuyến tính (linear) - phần trămtag {
background-image: linear-gradient(color1 percent1, color2 percent2);
} CSS viết div { background-image: linear-gradient(#476CFF 10%, #FFEF5C 50%); height: 200px; width: 400px; } Hiển thị trình duyệt: Cấu trúc tuyến tính (linear) theo hướngtag {
background-image: linear-gradient(hướng, color1, color2);
} Các giá trị hướng có thể có:
BACGROUND GRADIENT: LINEAR-GRADIENT TO TOP div {
background-image: linear-gradient(to top, #476CFF, #FFEF5C);
height: 200px;
width: 400px;
} Hiển thị trình duyệt: BACGROUND GRADIENT: LINEAR-GRADIENT TO BOTTOM div {
background-image: linear-gradient(to bottom, #476CFF, #FFEF5C);
height: 200px;
width: 400px;
} Hiển thị trình duyệt: BACGROUND GRADIENT: LINEAR-GRADIENT TO RIGHT div {
background-image: linear-gradient(to right, #476CFF, #FFEF5C);
height: 200px;
width: 400px;
} Hiển thị trình duyệt: BACGROUND GRADIENT: LINEAR-GRADIENT TO LEFT div {
background-image: linear-gradient(to left, #476CFF, #FFEF5C);
height: 200px;
width: 400px;
} Hiển thị trình duyệt: BACGROUND GRADIENT: LINEAR-GRADIENT TO RIGHT TOP div {
background-image: linear-gradient(to right top, #476CFF, #FFEF5C);
height: 200px;
width: 400px;
} Hiển thị trình duyệt: BACGROUND GRADIENT: LINEAR-GRADIENT TO RIGHT BOTTOM div {
background-image: linear-gradient(to right bottom, #476CFF, #FFEF5C);
height: 200px;
width: 400px;
} Hiển thị trình duyệt: BACGROUND GRADIENT: LINEAR-GRADIENT TO LEFT TOP div {
background-image: linear-gradient(to left top, #476CFF, #FFEF5C);
height: 200px;
width: 400px;
} Hiển thị trình duyệt: BACGROUND GRADIENT: LINEAR-GRADIENT TO LEFT BOTTOM div {
background-image: linear-gradient(to left bottom, #476CFF, #FFEF5C);
height: 200px;
width: 400px;
} Hiển thị trình duyệt: BACGROUND GRADIENT: LINEAR-GRADIENT - GÓC div {
background-image: linear-gradient(-130deg, #476CFF, #FFEF5C);
height: 200px;
width: 400px;
} Hiển thị trình duyệt: |