Bagaimana untuk Mencapai Bayangan Teks Dalaman dengan CSS?

Mencapai Bayangan Teks Dalaman dengan CSS

Mencipta kesan bayangan teks di dalam teks boleh menjadi tugas yang mencabar dalam CSS. Walaupun sifat bayang kotak membenarkan pemaparan bayang dalam elemen, keupayaan ini tidak meluas kepada teks.

Walau bagaimanapun, helah bijak menggunakan unsur pseudo :sebelum dan :selepas boleh memintas pengehadan ini. Dengan menetapkan atribut tajuk elemen teks kepada kandungan yang diingini dan menggunakan elemen pseudo ini, anda boleh mencipta ilusi bayangan teks dalam.

Untuk mencapai kesan ini, tentukan :sebelum dan :selepas elemen dengan kandungan yang diambil daripada atribut tajuk. Letakkannya sepenuhnya dalam elemen teks, diimbangi sedikit daripada teks asal untuk mencipta kesan bayang-bayang. Gayakannya dengan warna hitam lutsinar dan kelegapan, seperti rgba(255, 255, 255, .1), untuk menggabungkannya secara halus dengan latar belakang.

Berikut ialah contoh coretan kod yang menunjukkan teknik ini:

<code class="css">.depth {
  position: relative;
  padding: 50px;
  font: bold 7em Arial, sans-serif;
  color: black;
}

.depth:before,
.depth:after {
  content: attr(title);
  padding: 50px;
  color: rgba(255, 255, 255, .1);
  position: absolute;
}

.depth:before {
  top: 1px;
  left: 1px
}

.depth:after {
  top: 2px;
  left: 2px
}</code>

<code class="html"><h1 class="depth" title="Lorem ipsum">Lorem ipsum</h1></code>

Teknik ini membolehkan anda mencapai kesan bayangan teks dalaman, secara visual menyerupai contoh yang anda berikan, tanpa memerlukan Photoshop atau manipulasi imej yang meluas.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Bayangan Teks Dalaman dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!