Ombre de texte interne avec CSS

Question

Je suis actuellement jouer avec CSS3 et essayer d’obtenir un effet de texte comme ceci (le noir ombre interne flou) :

Mais je ne peux pas trouver un moyen de créer texte ombres à l’intérieur du texte. Je me demande si c’est encore possible, car l’élément box-shadow est capable de rendre l’ombre à l’intérieur comme ceci :

Toutes les idées ?

Answer 1

Voici un petit truc que j’ai découvert à l’aide de la et les Pseudo-éléments :

http://dabblet.com/GIST/1609945

Answer 2

Vous devriez être capable de le faire en utilisant le text-shadow, erm somethink comme ceci :

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

Answer 3

Voici mon mieux essayer:

HTML

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

CSS

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

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

Rendre un Texte Masque avec du CSS?

Sans un masque de calque il est impossible de faire un vrai intérieure de l'ombre sur le texte.

Peut-être quelqu'un devrait recommander que le W3C ajouter background-clip: arrière-texte, qui permettrait de couper un masque à travers l'arrière-plan au lieu de couper le fond d'ajustement à l'intérieur du texte.

Soit ça, ou de rendre le texte de l'ombre comme une partie de l'arrière-plan et de l'attacher avec background-clip: le texte.

J'ai essayé absolument positionnement identique d'un élément de texte au-dessus d'elle, mais le problème est background-clip: texte des cultures, le fond d'ajustement à l'intérieur du texte, mais nous avons besoin de l'inverse de cela.

J'ai essayé d'utiliser le texte-avc: 20px blanc; à la fois sur cet élément et l'un au-dessus d'elle, mais l'avc de texte va dans ainsi que.

D'Autres Méthodes

Comme il n'existe actuellement aucun moyen de faire une inversion de texte masque en CSS, on pourrait se tourner vers SVG ou de la Toile et de faire un texte de remplacement de l'image avec les trois couches pour obtenir votre effet.

Depuis SVG est un sous-ensemble de XML, SVG texte serait encore sélectionnez-mesure et de la recherche, et l'effet peut être produit avec moins de code que de la Toile.

Il serait plus difficile à réaliser avec la Toile parce qu'il n'a pas un dom avec des couches comme SVG ne.

Vous pourriez produire le SVG soit côté serveur ou javascript texte-méthode de remplacement dans le navigateur.

Pour En Savoir Plus:

SVG rapport à la Toile:

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

Le découpage et le Masquage avec SVG Texte:

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

Answer 4

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

Il y a une autre façon d'obtenir une fancy-hacky ombre interne de l'illusion,
qui je vais vous expliquer en trois étapes simples. Dire que nous avons de ce code HTML:

<h1>Get this</h1>

et ce CSS:

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

Étape 1

Commençons par faire le texte transparent:

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

Étape 2

Maintenant, nous avons des cultures qui fond à la forme du texte:

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

Étape 3

Maintenant, la magie: nous allons mettre un flou text-shadow, qui sera en face de l'arrière-plan, donnant ainsi l'impression d'une ombre interne!

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 text).
• Plusieurs ombres? Ne pensez même pas.
• Vous obtenez une lueur externe.

Answer 5

Vous pouvez sorte de le faire. Malheureusement, il n'y a pas moyen d'utiliser un encart sur le texte de l'ombre, mais vous pouvez faux avec la couleur et la position. Prendre le flou à droite vers le bas et d'organiser l'ombre le long du coin supérieur droit. Quelque chose comme cela pourrait faire l'affaire:

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

... mais vous devez être très, très prudent sur les couleurs que vous utilisez autrement, il va chercher les off. Il s'agit essentiellement d'une illusion d'optique, afin de ne pas travailler dans chaque contexte. Il également ne pas vraiment chercher la grande à de plus petites tailles de police, donc être conscient de cela aussi.