- Nhìn thấy design như thế này
Các bạn sẽ làm gì: chắc có 1 số bạn sẽ làm như sau color: linear-gradient[to right, #30CFD0 0%, #330867 100%]; // ố ồ
Nhưng sau khi viết sau bạn thấy nó không nhận. Vậy phải làm sao giờ, google seach thui [lol]
Hôm nay mình sẽ hướng dẫn các bạn làm sao để có color text gradient
Dùng CSS
- Đầu tiên các bạn dùng background gradient những màu mà các bạn cần thêm
background: linear-gradient[to right, #30CFD0 0%, #330867 100%]; // màu background gradient
Sau đó làm chìm text dưới background
background-clip: text; // gán backgound gradient cho text[ chìm text dưới background]
Và làm text màu trong suốt:
color: transparent;
Đây là đoạn code hoàn thành, đơn giản phải không các bạn, chỉ với 3 dòng các bạn đã làm được text có nhiều màu theo ý mình rồi đó
background: linear-gradient[to right, #30CFD0 0%, #330867 100%];
background-clip: text;
color: transparent;
Link demo : //codepen.io/ovuthiyen/pen/mdRaBWK
Dùng Canvas HTML5
- Đầu tiên dựng canvas có width và height là 300px
- Sau đó trong script xây dựng canvas
var canvas = document.getElementById['myCanvas']; // khai báo biến canvas lấy thuộc tính id của canvas
ctx = canvas.getContext['2d']; // Xác định loại canvas . 2D các bác cứ hiểu như chiều X và Y
- Tiếp theo set font size và font family cho text mà ta cần dựng
ctx.font = "70px arial"; // set font size và font family cho text
- Đổ màu gradient cho text
gradient.addColorStop[0, "#30CFD0"];// đổ màu vị trí đầu
gradient.addColorStop[1, "#330867"]; // đổ màu vị trí kết thúc
- Và cuối cùng là vẽ text và set vị trị hiện cho nó trên trục X và Y
ctx.fillText["Hello Yen", 10, 50]; // text muốn hiện và vị trí hiện
- Và đây là đoạn code hoàn thành:
var canvas = document.getElementById["myCanvas"];
var ctx = canvas.getContext['2d'];
ctx.font = "70px arial"; // set font size và font family cho text
var gradient = ctx.createLinearGradient[0, 0, 100, 200];
gradient.addColorStop[0, "#30CFD0"];// đổ màu vị trí đầu
gradient.addColorStop[1, "#330867"]; // đổ màu vị trí kết thúc
ctx.fillStyle = gradient;
ctx.fillText["Hello Yen", 10, 50]; // text muốn hiện và vị trí hiện
Link demo: //codepen.io/ovuthiyen/pen/LYxMzKr
Dùng SVG
Dựng svg có width và height là 50px và 130px
Sau đó định nghĩa những thứ cần dùng trong defs[ các bác cứ hiểu chỗ này gần như là khai báo biến]
ở đây mình định nghĩa linergradient có màu ở vị trí đầu tiên là mã màu #30CFD0 và kết thúc là mã #330867
// màu bắt đầu
// màu kết thúc
- Tiếp theo là chúng ta fill cái biến vừa tạo ở defs vào text là chúng ta đã set dc màu gradient cho text đó
- Bước cuối là sét font size cho text và vị trí của text đó
Hello Yen // font size và text cần hiện vị trí hiện
Và đây là đoạn code hoàn thành
// màu bắt đầu
// màu kết thúc
Hello Yen // font size và text cần hiện vị trí hiện
Link demo: //codepen.io/ovuthiyen/pen/yLgGPvz
Cắt ảnh
- Cách này bạn chỉ cần trỏ chuột vào đoạn text cần lấy vào export cái text đó xong =]]
Kết luận
- Tạm thời mình nghĩ dc 4 cách để làm text có nhiều màu. Mọi người nghĩ dc thêm cách gì thì có thể share ở comment ạ. cảm ơn các bạn đã đọc bài viết