Saat ini saya bermain-main dengan CSS3 dan mencoba mendapatkan efek teks seperti ini (bayangan bagian dalam buram hitam):

Tetapi saya tidak dapat menemukan cara untuk membuat bayangan teks di dalam teks. Saya ingin tahu apakah masih mungkin karena elemen box-shadow mampu membuat bayangan di dalam seperti ini:

box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);

Ada ide?

Inilah sedikit trik yang saya temukan menggunakan elemen :beforedan :afterpseudo:

.depth {
    color: black;
    position: relative;
}
.depth:before, .depth:after {
    content: attr(title);
    color: rgba(255,255,255,.1);
    position: absolute;
}
.depth:before { top: 1px; left: 1px }
.depth:after  { top: 2px; left: 2px }

Atribut judul harus sama dengan konten. Demo: http://dabblet.com/gist/1609945

Anda harus bisa melakukannya dengan menggunakan text-shadow, kadang berpikir seperti ini:

.inner_text_shadow
{
    text-shadow: 1px 1px white, -1px -1px #444;
}

berikut contohnya: http://jsfiddle.net/ekDNq/

Inilah usaha terbaik saya:

    .inner_shadow {
    color:transparent;
    background-color:white;
    text-shadow: 0 0 20px rgba(198,28,39,0.8), 0 0 0 black;
    font-family:'ProclamateHeavy';  // Or whatever floats your boat
    font-size:150px;
    }

   
    <span class="inner_shadow">Inner Shadow</span>
   

Masalahnya adalah bagaimana memotong bayangan yang berdarah di sekitar tepi !!! Saya mencoba di webkit menggunakan background-clip: teks, tetapi webkit membuat bayangan di atas latar belakang sehingga tidak berfungsi.

Membuat Masker Teks dengan CSS?

Tanpa lapisan topeng atas tidak mungkin untuk melakukan bayangan batin yang sebenarnya pada teks.

Mungkin seseorang harus merekomendasikan agar W3C menambahkan background-clip: reverse-text , yang akan memotong topeng melalui latar belakang daripada memotong latar belakang agar sesuai dengan teks.

Baik itu atau render teks-bayangan sebagai bagian dari latar belakang dan klip dengan klip latar belakang: teks.

Saya benar-benar mencoba memposisikan elemen teks yang identik di atasnya, tetapi masalahnya adalah klip latar belakang: teks memotong latar belakang agar pas di dalam teks, tetapi kita membutuhkan kebalikannya.

Saya mencoba menggunakan text-stroke: 20px white; pada elemen ini dan yang di atasnya, tetapi guratan teks masuk juga keluar.

Metode Alternatif

Karena saat ini tidak ada cara untuk membuat topeng teks terbalik di CSS, Anda dapat beralih ke SVG atau Canvas dan membuat gambar pengganti teks dengan tiga lapisan untuk mendapatkan efek Anda.

Karena SVG adalah bagian dari XML, teks SVG masih dapat dipilih dan dicari, dan efeknya dapat dihasilkan dengan kode yang lebih sedikit daripada Canvas.

Akan lebih sulit untuk mencapai ini dengan Canvas karena tidak memiliki dom dengan lapisan seperti SVG.

Anda dapat membuat SVG di sisi server, atau sebagai metode pengganti teks javascript di browser.

Bacaan lebih lanjut:

SVG versus Canvas:

http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Clipping dan Masking dengan Teks SVG:

http://www.w3.org/TR/SVG/text.html#TextElement

^{Penjelasan lebih tepat tentang CSS dalam jawaban kendo451 .}

Ada cara lain untuk mendapatkan ilusi bayangan batin yang rumit,
yang akan saya jelaskan dalam tiga langkah sederhana. Katakanlah kita memiliki HTML ini:

<h1>Get this</h1>

dan CSS ini:

h1 {
  color: black;
  background-color: #cc8100;
}

Langkah 1

Mari kita mulai dengan membuat teks menjadi transparan:

h1 {
  color: transparent;
  background-color: #cc8100;
}

Langkah 2

Sekarang, kita memotong latar belakang itu menjadi bentuk teks:

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

LANGKAH 3

Sekarang, keajaibannya: kita akan menempatkan buram text-shadow, yang akan berada di depan latar belakang , sehingga memberi kesan bayangan batin!

h1 {
  color: transparent;
  background-color: #cc8100;
  background-clip: text;
  text-shadow: 0px 2px 5px #f9c800;
}

Lihat hasil akhirnya .

Kerugian?

• Hanya berfungsi di Webkit ( background-cliptidak boleh text).
• Banyak bayangan? Jangan pernah berpikir.
• Anda juga mendapatkan kilau luar.

Contoh elegan tanpa perlu pembungkus yang diposisikan atau konten duplikat di markup:

:root {
  background: #f2f2f2;
}
h1 {
  background-color: #565656;
  font: bold 48px 'Futura';
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.8);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

<center>
  <h1>Text With Inner Shadow</h1>
</center>

Terlihat bagus di latar belakang gelap juga:

:root {
  --gunmetal-gray: #2a3439;
  background: var(--gunmetal-gray);
}

h1[itemprop="headline"] {
  font-family: 'Futura';
  font-size: 48px;
  padding-bottom: 0.35rem;
  font-variant-caps: all-small-caps;
  background-color: var(--gunmetal-gray);
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.1);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  filter: brightness(3);
}

<center>
  <h1 itemprop="headline">Text With Inner Shadow</h1>
</center>

DAN SAYA LINK DAN ME2 LINK

Anda bisa melakukan ini. Sayangnya tidak ada cara untuk menggunakan inset pada text-shadow, tetapi Anda dapat memalsukannya dengan warna dan posisi. Ambil keburaman ke bawah dan atur bayangan di sepanjang kanan atas. Sesuatu seperti ini mungkin berhasil:

background-color:#D7CFBA;
color:#38373D;
font-weight:bold;
text-shadow:1px 1px 0 #FFFFFF;

... tetapi Anda harus benar-benar berhati-hati tentang warna mana yang Anda gunakan jika tidak maka warna itu akan terlihat tidak bagus. Ini pada dasarnya adalah ilusi optik sehingga tidak akan berfungsi di setiap konteks. Itu juga tidak benar-benar terlihat bagus pada ukuran font yang lebih kecil, jadi waspadalah juga.

Tidak perlu banyak bayangan atau sesuatu yang mewah seperti itu, Anda hanya perlu mengimbangi bayangan Anda dalam sumbu y negatif.

Untuk teks gelap dengan latar belakang terang:

text-shadow: 0px -1px 0px rgba(0, 0, 0, .75);

Jika Anda memiliki latar belakang gelap maka Anda cukup membalikkan warna dan posisi y:

text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);

Bermain-main dengan nilai rgba, opacity, dan blur untuk mendapatkan efek yang tepat. Ini akan sangat bergantung pada warna font dan latar belakang yang Anda miliki, dan semakin berat fontnya, semakin baik.

Coba permata kecil variasi ini:

text-shadow:0 1px 1px rgba(255, 255, 255, 0.5);

Saya biasanya menganggap "tidak ada jawaban" sebagai tantangan

Saya telah melihat banyak solusi yang diusulkan, tetapi tidak ada yang seperti yang saya harapkan.

Inilah peretasan terbaik saya dalam hal ini , di mana warnanya transparan, latar belakang dan bayangan teks atas adalah warna yang sama dengan berbagai opasitas, mensimulasikan topeng, dan bayangan teks kedua adalah versi warna yang lebih gelap dan lebih jenuh dari warna Anda. sebenarnya ingin (cukup mudah dilakukan dengan HSLA).

(btw, teks dan gaya berdasarkan OP utas dupe )

Saya memiliki beberapa contoh di mana saya membutuhkan bayangan batin pada teks, dan berikut ini berhasil dengan baik untuk saya:

.inner {
    color: rgba(252, 195, 67, 0.8);
    font-size: 48px;
    text-shadow: 1px 2px 3px #fff, 0 0 0 #000;
}

Ini mengatur opacity teks menjadi 80%, dan kemudian menciptakan dua bayangan:

• Yang pertama adalah bayangan putih (dengan asumsi teks pada latar belakang putih) offset 1px dari kiri dan 2px dari atas, 3px kabur.
• Yang kedua adalah bayangan hitam yang terlihat melalui teks opacity 80% tetapi tidak melalui bayangan pertama, yang berarti hanya terlihat di dalam huruf teks di mana bayangan pertama dipindahkan (1px dari kiri dan 2px dari atas). Untuk mengubah blur dari bayangan yang terlihat ini, modifikasi parameter blur untuk bayangan layer pertama.

Peringatan

• Ini hanya akan bekerja jika warna teks yang diinginkan dapat dicapai tanpa harus 100% opacity.
• Ini hanya akan bekerja jika warna latar belakang solid (jadi, ini tidak akan bekerja untuk contoh spesifik penanya di mana teks berada pada latar belakang bertekstur).

Berikut ini tautan yang berbicara tentang cara melakukan ini, seharusnya itu yang Anda cari:

http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/

Sepertinya ini berfungsi: http://tips4php.net/2010/08/nice-css-text-shadow-effects/

Dia menggunakan banyak bayangan untuk mencapai efek itu seperti yang dijelaskan di sini: http://www.w3.org/Style/Examples/007/text-shadow#multiple

Sepertinya semua orang punya jawaban untuk yang satu ini. Saya suka solusi dari @Web_Designer. Tetapi tidak perlu serumit itu dan Anda masih bisa mendapatkan bayangan dalam buram yang Anda cari.

http://dabblet.com/gist/3877605

.depth {
    display: block;
    padding: 50px;
    color: black;
    font: bold 7em Arial, sans-serif;
    position: relative;
 }

.depth:before {
    content: attr(title);
    color: transparent;
    position: absolute;
    text-shadow: 2px 2px 4px rgba(255,255,255,0.3);
}

Ini adalah contoh terbaik yang pernah saya lihat. http://lab.simurai.com/carveme/

Sumbernya ada di gitthub https://github.com/simurai/lab/tree/gh-pages/carveme

Membangun di atas :before :after teknik web_designer, berikut adalah sesuatu yang mendekati tampilan Anda:

Pertama, buat teks Anda dengan warna bayangan bagian dalam (hitam-ish untuk OP).

Sekarang, gunakan kelas psuedo: after untuk membuat duplikat transparan dari teks asli, ditempatkan langsung di atasnya. Tetapkan bayangan teks biasa untuk itu tanpa offset. Tetapkan warna teks asli ke bayangan, dan sesuaikan alfa sesuai kebutuhan.

http://dabblet.com/gist/2499892

Anda tidak mendapatkan kendali penuh atas penyebaran bayangan, dll. Seperti yang Anda lakukan di PS, tetapi untuk nilai blur yang lebih kecil itu cukup lumayan. Bayangan melewati batas teks, jadi jika Anda bekerja di lingkungan dengan latar depan kontras tinggi, itu akan terlihat jelas. Untuk item dengan kontras yang lebih rendah, terutama yang memiliki corak yang sama, tidak terlalu terlihat. Misalnya, saya bisa membuat teks terukir yang terlihat sangat bagus di latar belakang logam menggunakan teknik ini.

Berikut adalah solusi hebat untuk bayangan teks inset BENAR menggunakan properti CSS3 klip latar belakang:

.insetText {
    background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

Inilah yang saya dapatkan setelah melihat beberapa ide di sini. Ide utamanya adalah warna teks menyatu dengan kedua bayangan, dan perhatikan bahwa ini digunakan pada latar belakang abu-abu (jika tidak, warna putih tidak akan muncul dengan baik).

.inset {
    color: rgba(0,0,0, 0.6);
    text-shadow: 1px 1px 1px #fff, 0 0 1px rgba(0,0,0,0.6);
}

Coba contoh ini untuk bayangan teks sisipan. Berikut HTML-nya

<h1 class="inset-text-shadow">Inset text shadow trick</h1>

dan CSS

body {
    background: #f8f8f8;
}
h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 6em;
    line-height: 1em;
}
.inset-text-shadow {
    /* Shadows are visible under slightly transparent text color */
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

}

Demo on Jsfiddle

text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);

untuk bayangan kotak:

-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);

Anda dapat melihat teks online dan bayangan kotak: teks online dan bayangan kotak

untuk lebih banyak contoh Anda dapat pergi ke alamat ini: lebih banyak contoh kode freeclup

Ada cara yang jauh lebih sederhana untuk mencapai ini

.inner{color: red; text-shadow: 0 -1px 0 #666;} // #666 is the color of the inner shadow

Voila

Untuk teks berukuran normal pada tombol kecil

Saya menemukan ide lain di halaman ini kehilangan keefektifannya saat digunakan pada tombol kecil dengan tulisan teks kecil. Jawaban ini memperluas jawaban RobertPitt .

Berikut adalah perubahan kecil:

text-shadow: 1px 1px transparent, -1px -1px black;

$('button').click(function(){
  $('button').removeClass('btnActive');
  $(this).addClass('btnActive');
});

body{background:#666;}
.btnActive{
  border: 1px solid #aaa;
  border-top: 1px solid #333;
  border-left: 1px solid #333;
  color: #ecf0f8;
  background-color: #293d70;
  background-image: none;
  text-shadow: 1px 1px transparent, -1px -1px black;
  outline:none;
}

button{
  border: 1px solid #446;
  border-radius: 3px;
  color: white;
  background-color: #385499;
  background-image: linear-gradient(-180deg,##7d94cf,#1c294a 90%);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  xxtext-shadow: 1px 1px 2px navy;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btnActive">Option One</button>
<button>Option Two</button>

catatan:

Saya menggunakan situs ini untuk mempercantik nuansa warna.

Saya menggunakannya dari situs ini, juga terlihat bagus. Coba lihat itu Inner shadow