Ombre de texte interne avec CSS

voici un petit truc que j'ai découvert en utilisant les :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

vous devriez pouvoir le faire en utilisant le texte-shadow, erm somethink comme ceci:

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

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

Voici mon mieux essayer:

    .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 Clipper l'ombre qui saigne autour des bords!!! J'ai essayé webkit en utilisant background-clip: text, mais webkit rend l'ombre au-dessus de l'arrière-plan pour qu'elle ne fonctionne pas.

Rendre un Texte Masque avec du CSS?

sans couche supérieure de masque il est impossible de faire une véritable ombre intérieure sur le texte.

peut-être 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 rendre le texte-ombre en tant que partie de l'arrière-plan et le clip avec l'arrière-plan-clip: texte.

j'ai essayé absolument de positionner un élément de texte identique au-dessus, mais le problème est arrière-plan-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 text-stroke: 20px blanc; à la fois sur cet élément et celui au-dessus de lui, mais le texte stroke va dedans aussi bien que dehors.

Méthodes Alternatives

Puisqu'il n'y a actuellement aucun moyen de faire un masque de texte inversé dans CSS, vous pouvez vous tourner vers SVG ou Canvas et faire une image de remplacement de texte avec les trois couches pour obtenir votre effet.

étant donné que SVG est un sous-ensemble de XML, SVG text serait toujours sélectionnable et consultable, 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 côté serveur, ou comme une méthode de remplacement de texte javascript dans le navigateur.

Lecture:

SVG rapport à la Toile:

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

découpage et masquage avec SVG Text:

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

tu peux faire ça. Malheureusement, il n'y a aucun moyen d'utiliser un encart sur texte-ombre, mais vous pouvez le simuler avec la couleur et la position. Prenez le flou droit vers le bas et placez l'ombre le long du 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 aura l'air off. C'est essentiellement une illusion d'optique, donc ça ne marchera pas dans tous les contextes. Il également n'a pas vraiment d' regardez bien les petites tailles de police, alors soyez conscient de cela aussi.

il n'y a pas besoin de plusieurs ombres ou quelque chose comme ça, vous avez juste à compenser votre ombre dans l'axe négatif de Y.

pour texte sombre sur fond clair:

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

si vous avez un fond sombre alors vous pouvez simplement inverser la couleur et la position en y:

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

Jouer avec les valeurs rgba, l'opacité et le flou pour obtenir l'effet juste à droite. Cela dépendra beaucoup de la couleur la police et le fond que vous avez, et plus la police est lourde, mieux c'est.

^{explication Plus précise de la CSS dans kendo451 la réponse de .}

il y a une autre façon d'obtenir une illusion d'ombre intérieure fantaisiste,
1519160920" ce que j'expliquerai en trois étapes simples. Disons que nous avons CE HTML:

<h1>Get this</h1>

et cette CSS:

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

Étape 1

commençons par rendre le texte transparent:

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

l'Étape 2

maintenant, nous recadrer ce fond à la forme du texte:

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

l'Étape 3

Maintenant, la magie: nous allons mettre un flou text-shadow , qui sera devant 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 avez une lueur extérieure aussi.

essayez ce petit bijou d'une variation:

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

j'ai l'habitude de prendre des "il n'y a pas de réponse" comme un défi

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

Voici mon meilleur hack à ce , où la couleur est transparente, l'arrière-plan et le texte du haut-ombre sont de la même couleur avec des opacités différentes, simulant le masque, et le deuxième text-shadow est plus sombre, plus saturées, la version de la couleur que vous voulez vraiment (très facile à faire avec HSLA).

(btw, texte et style basé sur un dupe thread'S OP )

j'ai eu quelques cas où j'ai eu besoin d'ombres intérieures sur le 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:

• la première est une ombre blanche (en supposant que le texte est sur un fond blanc) décalée de 1px à partir de la gauche et de 2px à partir du haut, floue 3px.
• La seconde est une ombre noire qui est visible à travers le 80% de texte d'opacité mais pas à travers la première ombre, ce qui signifie qu'il est visible à l'intérieur des lettres de texte seulement là où la première ombre est déplacée (1px à gauche et 2px à partir du haut). Pour changer le flou de cette ombre visible, modifiez le paramètre flou pour la première ombre de la couche.

mises en garde

• Cela ne fonctionnera que si la couleur du texte peut être réalisé sans avoir à être à 100% d'opacité.
• cela ne fonctionnera que si la couleur de fond est solide (donc, cela ne fonctionnera pas pour l'exemple spécifique de l'auteur de la question où le texte se trouve sur un fond texturé).

voici un lien qui explique comment faire cela, il devrait être ce que vous recherchez:

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

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

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

<h1>http://stackoverflow.com/</h1>

ET ME LINK

on dirait que ça marche: 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 à 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 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

sur la base de la technique :before :after par web_designer, voici quelque chose qui se rapproche de votre regard:

tout d'abord, faites de votre texte la couleur de l'ombre intérieure (noire dans le cas de L'OP).

maintenant, utilisez la classe :after psuedo pour créer une copie transparente du texte original, placée directement au-dessus. Assignez-lui une ombre de texte régulière sans offset. Attribuer la couleur du texte original à l'ombre, et ajustez alpha au besoin.

http://dabblet.com/gist/2499892

Vous n'avez pas avoir un contrôle complet sur la propagation, etc. de l'ombre comme vous le faites dans PS, mais pour des valeurs plus petites de flou il est passable. L'ombre dépasse les limites du texte, donc si vous travaillez dans un environnement avec un arrière-plan de contraste élevé, ce sera évident. Pour les articles à faible contraste, en particulier ceux avec la même teinte, ce n'est pas trop notable. Par exemple, j'ai été en mesure de faire très belle apparence texte gravé dans des fonds métalliques en utilisant cette technique.

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

.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 regardé quelques idées ici. L'idée principale est que la couleur du texte des mélanges avec deux ombres, et remarque que c'est utilisé sur un fond gris (sinon, le blanc n'apparaît 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 ombre de texte en médaillon. 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 box shadow:

-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 la boîte ombre: en ligne de texte et de zone d'ombre

pour plus d'exemple, vous pouvez aller à cette adresse : plus Exemple de code freeclup

il y a une façon 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 à partir de ce site, aussi il semble bon. Un coup d'œil à ombre Interne