Teks kecerunan untuk tapak web anda dalam etod

Dalam artikel ini, saya akan menunjukkan kepada anda beberapa cara untuk mendapatkan teks kecerunan menggunakan CSS (dan beberapa tanpa CSS). Anda mungkin sudah biasa dengan salah satu kaedahnya.

HTML untuk kaedah - 1, 2 dan 3

<h1>Sub to Axorax on YT!</h1>

Kaedah - 1 (CSS)

h1 {
  background: -webkit-linear-gradient(#e28bfc, #8bb8fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Kaedah - 2 (CSS)

h1 {
  background: linear-gradient(#e28bfc, #8bb8fc);
  background-clip: text;
  color: transparent;
}

Kaedah - 3 (laluan klip CSS)

h1 {
  position: relative;
  display: inline-block;
}

h1::before {
  content: "Sub to Axorax on YT!";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#e28bfc, #8bb8fc);
  -webkit-background-clip: text;
  color: transparent;
  clip-path: text;
}

Kaedah - 4 (SVG)

<svg width="100%" height="100%">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#e28bfc;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#8bb8fc;stop-opacity:1" />
    </linearGradient>
  </defs>
  <text x="10" y="50" font-size="72" fill="url(#gradient)">Gradient Text</text>
</svg>

Kaedah - 5 (kanvas HTML)

<canvas id="canvas" width="800" height="200"></canvas>

<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = '3rem sans-serif';
  const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
  gradient.addColorStop(0, '#e28bfc');
  gradient.addColorStop(1, '#8bb8fc');
  ctx.fillStyle = gradient;
  ctx.fillText('Sub to Axorax on YT!', 10, 100);
</script>

Semoga anda menemui sesuatu yang berguna!

Atas ialah kandungan terperinci Teks kecerunan untuk tapak web anda dalam etod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!