Petua Pantas: Cara Menambah Kesan dan Corak Kecerunan ke Teks

Petua cepat ini menunjukkan penambahan mudah kesan kecerunan dan corak kepada teks laman web. Ini dicapai dengan membuat teks telus, menggunakan hiasan latar belakang menggunakan background-image, dan tepat memotong hiasan ini kepada watak -watak teks dengan background-clip.

teks telus dan background-clip

kesannya bermula dengan menetapkan warna teks kepada telus. Untuk tajuk

, ini akan menjadi: <h1></h1>

h1 {
  color: transparent;
}

Ini sahaja menjadikan teks tidak kelihatan. Langkah seterusnya yang penting ialah

, yang menyekat latar belakang kepada aksara teks, menghalangnya daripada mengisi kotak seluruh elemen: background-clip: text

h1 {
  color: transparent;
  background-clip: text;
}

Sekarang, kesan latar belakang akan dipotong dengan tepat ke teks.

Memohon kecerunan latar belakang

mari kita memohon kecerunan ke tajuk kita:

h1 {
  color: transparent;
  background-clip: text;
  background-image: linear-gradient(to right, #218bff, #c084fc, #db2777);
}

Ini mewujudkan kecerunan kiri-ke-kanan merentasi tajuk. Banyak variasi yang mungkin, mengubah warna, arah, dan mewujudkan kecerunan corak.

untuk corak berjalur:

h1 {
  color: transparent;
  background-clip: text;
  background-image: repeating-linear-gradient(-57deg, #218bff, #218bff 3px, #c084fc 3px, #c084fc 6px);
}

Corak dan gaya yang lebih kompleks dengan

juga boleh dicapai.

text-stroke

Menggunakan imej latar belakang

di luar kecerunan,

boleh menggunakan imej terus ke teks. Menggunakan imej corak berulang (seperti yang di bawah):

background-image

CSS akan menjadi:

Memastikan penskalaan imej yang betul dalam teks. Peningkatan selanjutnya dapat dicapai dengan

h1 {
  color: transparent;
  background-clip: text;
  background-image: url(pattern.jpg);
  background-size: contain;
}

.

background-size: contain filter: drop-shadow()

vs

shorthand background-image background Walaupun kedua -dua kerja, menggunakan shorthand memerlukan meletakkannya

sebelum

background untuk mengelakkan diset semula ke lalai. background-clip sokongan penyemak imbas dan kebolehcapaian background-clip

Walaupun disokong secara meluas, awalan vendor () mungkin diperlukan untuk pelayar yang lebih tua. Untuk kebolehcapaian, pertimbangkan untuk menggunakan untuk menyediakan gaya sandaran untuk penyemak imbas yang kurang

sokongan:

-webkit-background-clip @supports ingat bahawa penggunaan yang berlebihan kesan ini dapat menghalang kebolehbacaan. Gunakannya dengan berhati -hati dan bijaksana. background-clip

@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1 {
    /* styles here */
  }
}

Kesimpulan

Teknik -teknik ini menawarkan peningkatan teks yang halus dan berkesan. Gunakan mereka dengan bijak untuk menambah minat visual tanpa mengorbankan kebolehbacaan.

Atas ialah kandungan terperinci Petua Pantas: Cara Menambah Kesan dan Corak Kecerunan ke Teks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!