Verlaufstext für Ihre Website in Ethods

In diesem Artikel zeige ich Ihnen einige Möglichkeiten, Verlaufstext mit CSS (und einige ohne CSS) zu erhalten. Möglicherweise kennen Sie eine der Methoden bereits.

HTML für Methode – 1, 2 und 3

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

Methode - 1 (CSS)

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

Methode - 2 (CSS)

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

Methode - 3 (CSS-Clip-Pfad)

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;
}

Methode - 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>

Methode – 5 (HTML-Canvas)

<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>

Ich hoffe, Sie haben etwas Nützliches gefunden!

Das obige ist der detaillierte Inhalt vonVerlaufstext für Ihre Website in Ethods. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!