Voici un petit truc que j’ai découvert en utilisant les pseudo-éléments: :before et :after :

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

L’atsortingbut title doit être identique au contenu. Démo: http://dabblet.com/gist/1609945

Vous devriez être capable de le faire en utilisant l’ombre du texte, quelque chose comme ceci:

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

voici un exemple: http://jsfiddle.net/ekDNq/

Voici mon meilleur essai:

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

 Inner Shadow 

Vous pouvez en quelque sorte faire cela. Malheureusement, il n’y a aucun moyen d’utiliser un encart sur text-shadow, mais vous pouvez le faire avec la couleur et la position. Prenez le flou et arranger l’ombre en haut à droite. Quelque chose comme ça pourrait faire l’affaire:

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

… mais vous devez être vraiment, vraiment prudent sur les couleurs que vous utilisez sinon il va regarder. C’est essentiellement une illusion d’optique, donc cela ne fonctionnera pas dans tous les contextes. De plus, il n’a pas vraiment fière allure avec des tailles de police plus petites, alors soyez conscient de cela.

Il n’y a pas besoin de plusieurs ombres ou de quelque chose de ce genre, il vous suffit de décaler votre ombre dans l’axe y négatif.

Pour le texte sombre sur un fond clair:

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

Si vous avez un fond sombre, vous pouvez simplement inverser la couleur et la position y:

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

Jouez avec les valeurs rgba, l’opacité et le flou pour obtenir l’effet juste. Cela dépendra beaucoup de la couleur de la police et de l’arrière-plan que vous avez, et plus la police sera lourde, mieux ce sera.

^{Explication plus précise du CSS dans la réponse de kendo451 .}

Il y a une autre façon d’obtenir une illusion d’ombre intérieure de fantaisie,
ce que je vais expliquer en trois étapes simples. Disons que nous avons ce HTML:

 
Get this 

et ce CSS:

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

Étape 1

Commençons par rendre le texte transparent:

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

Étape 2

Maintenant, nous recadrons ce fond à la forme du texte:

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

Étape 3

Maintenant, la magie: nous allons mettre une text-shadow floue, qui sera devant le fond , donnant ainsi l’impression d’une ombre intérieure!

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

Voir le résultat final .

Inconvénients?

• Ne fonctionne que dans Webkit ( background-clip ne peut pas être du text ).
• Plusieurs ombres? Ne pense même pas.
• Vous obtenez aussi une lueur extérieure.

Essayez ce petit bijou de variation:

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

Je prends habituellement “il n’y a pas de réponse” comme défi

J’ai vu beaucoup de solutions proposées, mais aucune n’était vraiment ce que j’espérais.

Voici mon meilleur hack à ce sujet , où la couleur est transparente, l’arrière-plan et l’ombre de texte supérieure sont de la même couleur avec des opacités variables, simulant le masque, et la seconde ombre de texte est une version plus sombre vraiment envie (assez facile à faire avec HSLA).

(btw, texte et style basés sur l’OP d’ un thread dupe )

J’ai eu quelques cas où j’ai eu besoin d’ombres intérieures sur du texte, et ce qui suit a bien fonctionné pour moi:

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

Cela définit l’opacité du texte à 80%, puis crée deux ombres:

• Le premier est une ombre blanche (en supposant que le texte est sur un fond blanc) décalé de 1px à gauche et de 2px à partir du haut, flou à 3px.
• La seconde est une ombre noire visible à travers le texte d’opacité à 80% mais pas à travers la première ombre, ce qui signifie qu’elle est visible à l’intérieur des lettres uniquement lorsque la première ombre est déplacée (1px à gauche et 2px à partir du haut). Pour modifier le flou de cette ombre visible, modifiez le paramètre de flou de l’ombre du premier calque.

Mises en garde

• Cela ne fonctionnera que si la couleur désirée du texte peut être obtenue sans qu’il soit nécessaire d’avoir une opacité de 100%.
• Cela ne fonctionnera que si la couleur d’arrière-plan est solide (donc, cela ne fonctionnera pas dans l’exemple spécifique du questionneur où le texte se trouve sur un arrière-plan texturé).

Voici un lien expliquant comment procéder, ce devrait être ce que vous recherchez:

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

c’est un très bon exemple et facile:

 body { background: #F2F2F2 } h1 { font-size: 50px; font-weight: bold; background-color: #565656; color: transparent; text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.8); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; } 

 
http://stackoverflow.com/ 

Cela semble fonctionner: http://tips4php.net/2010/08/nice-css-text-shadow-effects/

Il utilise plusieurs ombres pour obtenir cet effet, comme expliqué ici: http://www.w3.org/Style/Examples/007/text-shadow#multiple

Semble que tout le monde a une réponse à celui-ci. J’aime la solution de @Web_Designer. Mais cela n’a pas besoin d’être aussi complexe que cela et vous pouvez toujours obtenir l’ombre intérieure floue que vous recherchez.

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

C’est facilement le meilleur exemple que j’ai vu. http://lab.simurai.com/carveme/

La source est sur gitthub https://github.com/simurai/lab/tree/gh-pages/carveme

S’appuyant sur la :before :after technique de web_designer, voici quelque chose qui se rapproche de votre look:

Tout d’abord, faites de votre texte la couleur de l’ombre interne (en noir dans le cas de l’OP).

Maintenant, utilisez une classe de pseudo: after pour créer un duplicata transparent du texte original, placé directement dessus. Atsortingbuez-lui une ombre de texte normale sans décalage. Atsortingbuez la couleur du texte d’origine à l’ombre et ajustez l’alpha selon vos besoins.

http://dabblet.com/gist/2499892

Vous n’avez pas le contrôle total sur la propagation, etc. de l’ombre, comme vous le faites dans PS, mais pour les valeurs de flou plus petites, c’est assez passable. L’ombre dépasse les limites du texte, donc si vous travaillez dans un environnement avec un arrière-plan de premier plan à contraste élevé, ce sera évident. Pour les objects moins contrastés, en particulier ceux avec la même teinte, ce n’est pas trop perceptible. Par exemple, cette technique m’a permis de créer un très beau texte gravé sur un fond métallique.

Voici une excellente solution pour l’ombre de texte en VRAI avec la propriété CSS3 background-clip:

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

Voici ce que j’ai trouvé après avoir examiné certaines des idées ici. L’idée principale est que la couleur du texte se mélange avec les deux ombres et notez que cela est utilisé sur un fond gris (sinon le blanc ne sera pas bien visible).

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

Essayez cet exemple pour l’ombre de texte en encart. Voici le HTML

 
Inset text shadow sortingck 

et le 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); 

pour ombre de boîte:

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

vous pouvez voir le texte en ligne et l’ombre d’une boîte: texte en ligne et ombre de boîte

pour plus d’exemple vous pouvez aller à cette adresse: plus exemple code freeclup

Il existe un moyen beaucoup plus simple d’y parvenir

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

Voilà

Je l’utilise depuis ce site, ça a aussi l’air bien. Regardez-le dans l’ombre intérieure