Je joue actuellement avec CSS3 et j'essaie d'obtenir un effet de texte comme celui-ci (l'ombre intérieure floue noire):

Mais je ne trouve pas de moyen de créer des ombres de texte à l' intérieur du texte. Je me demande si cela est toujours possible car l'élément box-shadow est capable de rendre l'ombre à l'intérieur comme ceci:

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

Des idées?

Voici un petit truc que j'ai découvert en utilisant la :beforeet :afterpseudo-éléments:

.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'attribut title doit être le même que le contenu. Démo: http://dabblet.com/gist/1609945

Vous devriez pouvoir le faire en utilisant text-shadow, ou 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;
    }

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

Le problème est de savoir comment couper l'ombre qui saigne sur les bords !!! J'ai essayé dans webkit en utilisant background-clip: text, mais webkit rend l'ombre au-dessus de l'arrière-plan pour que cela ne fonctionne pas.

Faire un masque de texte avec CSS?

Sans un calque de masque supérieur, il est impossible de créer une véritable ombre intérieure sur le texte.

Peut-être que quelqu'un devrait recommander que le W3C ajoute background-clip: reverse-text , qui couperait un masque à travers l'arrière-plan au lieu de couper l'arrière-plan pour s'adapter à l'intérieur du texte.

Soit cela, soit le rendu de l'ombre du texte comme partie de l'arrière-plan et le clip avec background-clip: text.

J'ai essayé de positionner absolument un élément de texte identique au-dessus, mais le problème est background-clip: le texte rogne l'arrière-plan pour s'adapter à l'intérieur du texte, mais nous avons besoin de l'inverse.

J'ai essayé d'utiliser le trait de texte: 20px blanc; à la fois sur cet élément et sur celui au-dessus, mais le trait de texte entre aussi bien en dedans qu'en dehors.

Méthodes alternatives

Comme il n'y a actuellement aucun moyen de créer un masque de texte inversé en CSS, vous pouvez vous tourner vers SVG ou Canvas et créer une image de remplacement de texte avec les trois calques pour obtenir votre effet.

Puisque SVG est un sous-ensemble de XML, le texte SVG serait toujours sélectionnable et interrogeable, et l'effet peut être produit avec moins de code que Canvas.

Ce serait plus difficile à réaliser avec Canvas car il n'a pas de dom avec des couches comme SVG.

Vous pouvez produire le SVG soit côté serveur, soit comme méthode de remplacement de texte javascript dans le navigateur.

Lectures complémentaires:

SVG contre toile:

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

Détourage et masquage avec texte SVG:

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

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

Il existe une autre façon d'obtenir une illusion d'ombre intérieure fantaisiste,
que je vais expliquer en trois étapes simples. Disons que nous avons ce code HTML:

<h1>Get this</h1>

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 cet arrière-plan à la forme du texte:

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

Étape 3

Maintenant, la magie: on va mettre un flouté text-shadow, qui sera devant l'arrière-plan , 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 .

Des inconvénients?

• Fonctionne uniquement dans Webkit ( background-clipimpossible text).
• Plusieurs ombres? Ne pense męme pas.
• Vous obtenez également une lueur extérieure.

Un exemple élégant sans avoir besoin d'un wrapper positionné ou d'un contenu duplicatif dans le balisage:

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

Convient également aux arrière-plans sombres:

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

AND ME LINK ET ME2 LINK

Vous pouvez en quelque sorte le faire. Malheureusement, il n'y a aucun moyen d'utiliser un encart sur l'ombre du texte, mais vous pouvez le simuler avec la couleur et la position. Réduisez le flou vers le bas et disposez 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 devrez être vraiment très prudent sur les couleurs que vous utilisez, sinon cela aura l'air mauvais. C'est essentiellement une illusion d'optique et ne fonctionnera donc pas dans tous les contextes. Il n'a pas non plus vraiment fière allure avec les tailles de police plus petites, alors soyez conscient de cela aussi.

Il n'y a pas besoin de plusieurs ombres ou de quelque chose d'extraordinaire comme ça, il vous suffit de décaler votre ombre sur l'axe y négatif.

Pour du texte sombre sur un fond clair:

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

Si vous avez un arrière-plan 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 parfait. Cela dépendra beaucoup de la couleur de la police et de l'arrière-plan que vous avez, et plus la police est lourde, mieux c'est.

Essayez ce petit bijou d'une variante:

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

Je considère généralement "il n'y a pas de réponse" comme un défi

J'ai vu plusieurs des solutions proposées, mais aucune n'était tout à fait ce que j'espérais.

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

(btw, texte et style basés sur l'OP d' un fil de dupe )

J'ai eu quelques cas où j'avais 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ée de 1 px de la gauche et de 2 px du haut, floue de 3 px.
• La seconde est une ombre noire qui est 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 de texte uniquement là où la première ombre est déplacée (1px de la gauche et 2px 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 souhaitée du texte peut être obtenue sans avoir à être à 100% d'opacité.
• Cela ne fonctionnera que si la couleur d'arrière-plan est unie (donc, cela ne fonctionnera pas pour l'exemple spécifique de l'interrogateur où le texte se trouve sur un arrière-plan texturé).

Voici un lien expliquant comment faire cela, cela devrait être ce que vous recherchez:

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

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

Il semble que tout le monde a une réponse à celle-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 de loin 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

En vous :before :afterappuyant sur la technique de web_designer, voici quelque chose qui se rapproche de votre look:

Tout d'abord, donnez à votre texte la couleur de l'ombre intérieure (noirâtre dans le cas de l'OP).

Maintenant, utilisez une classe: after psuedo pour créer une copie transparente du texte d'origine, placée directement au-dessus de celui-ci. Attribuez-lui une ombre de texte ordinaire sans décalage. Attribuez la couleur du texte d'origine à l'ombre et ajustez l'alpha si nécessaire.

http://dabblet.com/gist/2499892

Vous n'obtenez pas un contrôle complet sur la propagation, etc. de l'ombre comme vous le faites dans PS, mais pour des valeurs de flou plus petites, c'est tout à fait passable. L'ombre dépasse les limites du texte, donc si vous travaillez dans un environnement avec un arrière-plan à contraste élevé, ce sera évident. Pour les éléments à faible contraste, en particulier ceux avec la même teinte, ce n'est pas trop perceptible. Par exemple, j'ai pu créer de très beaux textes gravés sur des arrière-plans métalliques en utilisant cette technique.

Voici une excellente solution pour VRAI ombre de texte incrusté en utilisant 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 s'affichera pas bien).

.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 une ombre de texte incrustée. Voici le HTML

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

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 l'ombre de la 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 de zone: texte en ligne et ombre de zone

pour plus d'exemple vous pouvez aller à cette adresse: plus d'exemple de 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à

Pour du texte de taille normale sur des boutons de petite taille

J'ai trouvé que les autres idées de cette page perdaient leur efficacité lorsqu'elles étaient utilisées sur de petits boutons avec de petits caractères. Cette réponse étend la réponse de RobertPitt .

Voici le petit tweak:

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>

Remarque:

J'ai utilisé ce site pour affiner les nuances de couleurs.

Je l'utilise depuis ce site, aussi ça a l'air bien. Jetez un oeil à l'ombre intérieure