Efecto de tipografía CSS

Parece que no puedo obtener los valores/nombres de color correctos para poder obtener un efecto Letter Press en el texto

Para crear la apariencia de texto que ha sido estampado, elija un color de texto que sea más oscuro que el fondo y luego cree una sombra de texto de 1 px con un desenfoque de 1 px y compárelo hacia abajo 1 px. Haz que la sombra del texto sea un poco más clara que el fondo.

background-color: rgba(255, 255, 255, 0.8);
color: #222;
text-shadow: 1px 1px 1px #FFFFFF;

Hasta ahora solo me sale esto

ingrese la descripción de la imagen aquí

¿Cómo lo haría?

  1. Encontrar el color del texto que es más oscuro que el fondo. El color de fondo es rgba (255, 255, 255, 0.8) y el color del texto es #222.
  2. Encontrar el color de la sombra del texto que es más claro que el fondo. el color de fondo es rgba (255, 255, 255, 0.8) y el color de la sombra del texto es #FFFFFF;

Necesito cambiar el color del texto (actualmente #222) a un color de sombra de texto más oscuro (actualmente #FFFFFF) a un color más claro contra un color de fondo (actualmente rgba 255, 255, 255, 0.8). No puedo cambiar el color de fondo a ningún otro.

No tiene habilidades de diseño y tal vez alguien quiera saber qué valores de color cambiar del texto, así como la sombra del texto para tener un efecto de tipografía que sea más obvio.

Gracias

Reetiquetado (después de leer mal y responder cómo hacer una tipografía en photoshop)
@yisela - Genial. Eliminé su edición anterior ... ya que no se menciona Photoshop en ninguna parte ... y el CSS NO tiene ninguna relación con Photoshop o Illustrator.
@Jawad, sí, tienes razón ... Escribí mal antes ... moví la información a una respuesta.
yisela eliminó una respuesta que en realidad es acertada. La diferencia es que en lugar de usar Photoshop, puedes hacer dos sombras en CSS. Uno blanco, otro negro y luego establece la opacidad. La translucidez y el desenfoque de las sombras crean un efecto mucho más realista. Ejemplo:text-shadow: 1px 1px rgba(255,255,255,0.4), -1px -1px rgba(0,0,0,0.4);
Creo que usar una combinación de valores decimales (0-255) y hexadecimales (00-FF) probablemente confunda. Dado que se requieren valores de valores decimales en las expresiones rgba(), ¿por qué no usar también expresiones decimales rgb(), por ejemplo, rgb(255,255,255) en lugar de #ffffff?

Respuestas (2)

R255 G255 B255 es blanco y .8 indica 80 % de opacidad. Así que podrías cambiar el .8 a un .9 para que sea más claro y un .7 para que sea más oscuro.

Si necesita específicamente valores hexadecimales. Podría mirar una tabla de colores HTML simple como esta.

O puede abrir el selector de color en Photoshop, ingresar su hexadecimal existente y ajustar los controles deslizantes o el objetivo de color para encontrar el siguiente valor hexadecimal.

Gracias por ayudar, pero como mencioné en mi pregunta, no puedo cambiar el color del fondo (rgba (255, 255, 255) y eso también incluye la opacidad de 0.8. Solo necesito cambiar el color de fuente/texto y fuente/color de sombra de texto.
Bueno, para cambiar el color del texto del #222, podrías usar el #221 o el #220, que son ligeramente más claros. Luego podría pasar a #211 y #210, etc. Para la sombra de #fff, podría ir a #ffe para un blanco amarillento o #eff para un blanco azulado. Básicamente, los números hexadecimales de oscuro a claro son del 0 al 9, las letras hexadecimales de oscuro a claro son de la a a la f
También puede usar el mismo color de texto pero use un valor RGBA para eso, de esa manera es más oscuro, la textura brilla un poco y agrega "realismo" a la tipografía. entonces podrías usar: color: rgba(000,000,000,0.4);

También puede probar un "truco" de sombra insertado para mejorar el efecto de la tipografía. La sombra insertada mejorará mucho el pseudo 3D en comparación con solo verse como un borde.

Un gran ejemplo que le permite modificarlo está en jsFiddle. La única salvedad es que en este caso el fondo tiene que ser sólido, así que no hay texturas ;)

Efecto de tipografía CSS
RespuestasAquíPolítica de privacidad1y, 0v