¿Es posible recortar el efecto de texto de esta manera usando CSS/CSS3 solamente? o la imagen es la única opción para obtener este efecto.¿Es posible recortar el efecto de texto de esta manera usando CSS/CSS3 solamente?
Esto debería funcionar:
Aquí hay un pequeño truco que descubrí utilizando los :before y :after pseudo-elementos:
+1 Realmente se ve bien y nítido –
Usted puede utilizar el estilo de sombra de texto para establecer una sombra de la esquina superior izquierda. Se verá cerca de lo que está buscando, pero hasta donde yo sé, no hay forma de hacer exactamente lo que está buscando en CSS/CSS3
text-shadow es su amigo. See this page para obtener muchos ejemplos de lo que puede lograr con él. El ejemplo # 8 parece prometedor.
+1 Gracias por el enlace –
¡Esto también será útil para mí algún día! ¡Gracias! +1 – jolt
Un excelente enlace, gracias por compartir. –
Lo que realmente necesita para ese efecto particular es inset:
text-shadow: inset #000 0 0 0.10em; /* THIS DOESN'T WORK */
Unfortunately: "<sombra> es el mismo que se definió para el 'box-shadow' bienes, excepto que la palabra clave 'inserción' no es permitido."
Una solución de muy bajo nivel para este loquero es obtener JavaScript (o HTML semántico) para hacer un texto transparente en el centro del texto (que será complicado) y luego aplicar la sombra en ese texto;) que creará sombras de recuadro pseudo realistas^_^ – ShrekOverflow
Sí, puede lograr este efecto con CSS y texto, pero es un poco loco. Básicamente, usted crea un grupo de gradientes radiales y lineales css3 gris cero con una opacidad cero y con cuidado colóquelos sobre su texto. Pero sería mejor que hicieras esto en photoshop.
Un slightly softer way de la utilización de los pseudo-elementos Web_Designer mencionan:
.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;
}
Es un poco más simple - para obtener el borde suave del th e depresión utiliza la sombra de texto del pseudo: after y lo hace transparente, en lugar de utilizar dos pseudos. En mi opinión, también se ve mucho más limpio: puede funcionar a un tamaño mucho mayor. No tengo idea de lo rápido que es, aunque de todos modos probablemente uses sombra de texto con moderación.
yo encontramos este http://jsfiddle.net/NeqCC/
Es compatible con fondo blanco y texto oscuro
Todo el crédito va al creador
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; }
No vota para cerrar como un duplicado, porque no sé qué tan cerca se parece a lo que quieres (y tampoco hay una respuesta definitiva) pero esta es una pregunta bastante similar: http://stackoverflow.com/questions/ 2889501/inner-text-shadow-with-css –
@David - Sí, ambas preguntas son similares, ¿debería cerrar mi pregunta? o puedo fusionar mi pregunta con la pregunta u –
bien, si dice que son similares, voy a votar para cerrar, y si la gente está de acuerdo, todo esto será solucionado. no es necesario que actúes. –