Est-il possible d'obtenir un effet de texte découpé comme ceci en utilisant CSS/CSS3 seulement? ou l'image est la seule option pour obtenir cet effet.Est-il possible d'obtenir un effet de texte découpé comme ceci en utilisant CSS/CSS3 seulement?
Cela devrait fonctionner:
Voici un petit truc que j'ai découvert en utilisant les pseudo-éléments :before et :after:
+1 Vraiment beau et net –
Vous pouvez utiliser le style ombre de texte pour définir une ombre pour le coin supérieur gauche. Il semblera proche de ce que vous cherchez, mais autant que je sache, il n'y a aucun moyen de faire exactement ce que vous cherchez dans CSS/CSS3
text-shadow est votre ami. See this page pour beaucoup d'exemples ce que vous pouvez réaliser avec. L'exemple # 8 semble prometteur.
+1 Merci pour le lien –
Ce sera utile pour moi aussi un jour! Merci! +1 – jolt
Un excellent lien - merci pour le partage. –
Qu'est-ce que vous avez vraiment besoin de cet effet particulier est inset:
text-shadow: inset #000 0 0 0.10em; /* THIS DOESN'T WORK */
Unfortunately: "<ombre> est le même que celui défini pour la propriété « box-shadow », sauf que le mot-clé « encart » est pas permis."
Une solution de très bas niveau pour cette folie monsieur est d'obtenir JavaScript (ou HTML sémantique) pour faire un texte transparent sur le centre du texte (qui sera difficile) et ensuite en appliquant l'ombre sur ce texte;) qui créera des ombres encastrées pseudo réalistes^_^ – ShrekOverflow
Oui, vous pouvez obtenir cet effet avec CSS et texte, mais c'est un peu fou. Fondamentalement, vous créez un tas de dégradés radiaux et linéaires css3 gris-zéro avec une opacité nulle et les positionner soigneusement sur votre texte. Mais vous feriez mieux de le faire dans Photoshop.
A slightly softer way d'utiliser les pseudo-éléments Web_Designer mentionnés:
.depth {
display: block;
padding: 50px;
color: black;
font: bold 7em Arial, sans-serif;
position: relative;
}
.depth:after {
text-shadow: rgba(255,255,255,0.2) 0px 0px 1.5px;
content: attr(title);
padding: 50px;
color: transparent;
position: absolute;
top: 1px;
left: 1px;
}
C'est un peu plus simple - pour obtenir le bord doux de Dans la dépression, vous utilisez l'ombre-texte du: pseudo après et le rendre transparent, plutôt que d'utiliser deux pseudos. À mon avis, il semble beaucoup plus propre aussi - il peut travailler à des tailles beaucoup plus grandes. Je n'ai aucune idée de la vitesse à laquelle il est, bien que vous utilisiez probablement de l'ombre de texte avec parcimonie de toute façon.
J'ai trouvé ce http://jsfiddle.net/NeqCC/
Il prend en charge un fond blanc et texte foncé
Tout le crédit va au créateur
HTML
<!--
CSS3 inset text-shadow trick
Written down by Jyri Tuulos
http://about.me/jyrituulos
Effect originally found at http://timharford.com/
All credits for originality go to Finalised Design (http://finalisedesign.com/)
Note that this trick only works for darker text on solid light background.
-->
<h1 class="inset-text">Inset text-shadow trick</h1>
CSS
body {
/* This has to be same as the text-shadows below */
background: #def;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 6em;
line-height: 1em;
}
.inset-text {
/* Shadows are visible under slightly transparent text color */
color: rgba(10,60,150, 0.8);
text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}
/* Don't show shadows when selecting text */
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }
Ne pas voter pour fermer comme un doublon, parce que je ne sais pas à quel point il ressemble à ce que vous voulez (et il n'y a pas de réponse définitive là non plus) mais c'est une question assez similaire: http://stackoverflow.com/questions/ 2889501/inner-text-shadow-with-css –
@David - Oui, les deux questions sont similaires, dois-je fermer ma question. ou puis-je fusionner ma question avec la question que vous avez liée à –
bien, si vous dites qu'ils sont similaires, je voterai pour une fin, et si les gens sont d'accord, tout cela sera pris en charge. pas besoin de prendre des mesures. –