- 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
background: linear-gradient(to right, #30CFD0 0%, #330867 100%); // màu gradient background-clip: text; // gán backgound gradient cho text( chìm text dưới background) color: transparent;
Link demo : https://codepen.io/ovuthiyen/pen/mdRaBWK
Dùng Canvas HTML5
<canvas id="myCanvas" width="300" height="300"></canvas> <script> 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 </script>
Link demo: https://codepen.io/ovuthiyen/pen/LYxMzKr
Dùng SVG
<svg viewBox="0 0 50 130"> <defs> <linearGradient id="rainbow" x1="0" x2="100%" y1="0" y2="100%" gradientUnits="userSpaceOnUse" > <stop stop-color="#30CFD0" offset="0%"/> // màu bắt đầu <stop stop-color="#330867" offset="100%"/> // màu kết thúc </linearGradient> </defs> <text fill="url(#rainbow)"> <tspan font-size="48" x="0" dy="60">Hello Yen</tspan> // font size và text cần hiện vị trí hiện </text>
</svg>
Link demo: https://codepen.io/ovuthiyen/pen/yLgGPvz
Cắt ảnh
- Cách này bạn chỉ cần cắt luôn text chứa ảnh đó là xong =))
Kết luận
- Tạm thời mình nghĩ dc 4 cách. 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