web-dev-qa-db-fra.com

Ombre de texte interne avec CSS

Je suis en train de jouer avec CSS3 et j'essaie de créer un effet de texte comme celui-ci (l'ombre intérieure floue noire):

Mais je ne peux pas trouver un moyen de créer des ombres de texte à l'intérieur le texte. Je me demande si c'est toujours possible car l'élément box-shadow est capable de restituer une ombre à l'intérieur comme ceci:

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

Des idées?

csstextshadow
103
ericteubert

Voici un petit truc que j'ai découvert en utilisant le :before et :after pseudo-é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 identique au contenu. Démo: http://dabblet.com/Gist/1609945

100
Web_Designer

Vous devriez être capable de le faire en utilisant l’ombre de texte, par exemple:

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

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

43
RobertPitt

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 afin qu'elle ne fonctionne pas.

Créer un masque de texte avec CSS?

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

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

Soit cela, soit rendre l'ombre du texte en tant que partie de l'arrière-plan et clippez-la 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 coupe l'arrière-plan pour l'adapter au texte, mais nous avons besoin de l'inverse.

J'ai essayé d'utiliser text-stroke: 20px white; à la fois sur cet élément et sur celui situé au-dessus, mais le trait de texte va aussi bien vers.

Méthodes alternatives

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

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

Il serait plus difficile d’atteindre cet objectif avec Canvas car il n’a pas de dom avec des calques comme le fait SVG.

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

Lectures supplémentaires:

SVG versus Canvas:

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

Coupure et masquage avec du texte SVG:

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

19
kendo451

Il n'y a pas besoin de plusieurs ombres ou de choses fantaisistes, il vous suffit de décaler votre ombre sur l'axe des y négatif.

Pour un 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 de rgba, l'opacité et le flou pour obtenir un 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 ce sera.

11
Dylan

Vous pouvez faire ce genre de chose. 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. Prenez le flou vers le bas et organisez 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 faire très attention aux couleurs que vous utilisez, sinon cela aura l'air off. C'est essentiellement une illusion d'optique, donc cela ne fonctionnera pas dans tous les contextes. De plus, il n’est pas très beau avec les tailles de police plus petites, soyez donc conscient de cela aussi.

10
hollsk

Explication plus précise de la CSS dans réponse de kendo451 .

Il existe un autre moyen 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;
}

It's a good slogan

Étape 1

Commençons par rendre le texte transparent:

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

It's a box

Étape 2

Maintenant, nous rognons cet arrière-plan à la forme du texte:

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

The background is the text!

Étape 3

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

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

We got it! Yay!

Voir le résultat final.

Inconvénients?

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

Un exemple élégant sans avoir besoin d'un wrapper positionné ou d'un contenu dupliqué 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>

Cela convient aussi bien sur les fonds 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>

ET ME LINK ET ME2 LINK

9
Zombyii

Essayez ce petit bijou d'une variante:

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

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

7
Mike

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

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

enter image description here

(btw, texte et style basés sur un OP du fil dupe )

6
esjay

J'ai eu quelques cas où j'ai eu besoin d'ombres internes sur le texte, et voici ce qui s'est bien passé 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 sur 80%, puis crée deux ombres:

  • La première est une ombre blanche (en supposant que le texte est sur un fond blanc) décalée de 1 pixel à gauche et de 2 pixels à partir du haut, 3 pixels floue.
  • 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 du texte uniquement là où 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 flou de la première ombre de 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 unie (donc, cela ne fonctionnera pas pour l'exemple spécifique du questionneur où le texte repose sur un arrière-plan texturé).
6
Nick Coons

Voici un lien expliquant comment faire cela, il devrait correspondre à ce que vous recherchez:

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

5
QuixoticForsooth

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

4
DanMan

Tout le monde semble avoir une réponse à cette question. 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);
}
4
nutcracker

Voici une excellente solution pour l'ombre de texte TRUE en utilisant la propriété CSS3 de clip-background:

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

S'appuyant sur le :before:after technique par 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 dans le cas du PO).

A présent, utilisez une classe: after après psuedo pour créer une copie transparente du texte original, placée directement au-dessus de celui-ci. Attribuez-lui une ombre de texte normale 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 dans PS, mais pour des valeurs de flou moins importantes, elle est tout à fait passable. L'ombre dépasse les limites du texte. Par conséquent, si vous travaillez dans un environnement avec un arrière-plan très contrasté, cela sera évident. Cela ne se remarque pas trop pour les éléments moins contrastés, en particulier ceux qui ont la même teinte. En utilisant cette technique, par exemple, j'ai pu créer du texte gravé très joli sur des fonds métalliques.

3
harkyman

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

3
Steve

Voici ce que je suis venu après avoir examiné certaines des idées ici. L'idée principale est que la couleur du texte se confond 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);
}
2
Nick White

Essayez cet exemple pour l'ombre de texte incrusté. 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

1
Prakash Upadhyay
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 l'ombre de texte et de boîte en ligne: ombre de texte et de boîte en ligne

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

0
MAG TOR

Il y a 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à

0
Warface