2

Estou enfrentando um problema que acredito ser comum entre Designer e Dev/frontier/webdesigner ou por falta de comunicação na hora da criação ou por falta de conhecimento técnico do desenvolvedor para aplicar a técnica.

Estou produzindo o desenvolvimento de um Layout que está montado em um PSD que entre os elementos/camadas contidos no mesmo, há textos com efeitos (aqueles que podem ser habilitados e configurados no "Opções de Mesclagem"). Alguns dos efeitos podem ser replicados facilmente no CSS, preservando a qualidade na utilização dos elementos e seus respectivos efeitos, porem estou enfrentando problemas ao replicar o Efeito de "Chanfro e Entalhe" (ou nas versões em Inglês, "Bevel & Emboss") nos textos.

O efeito em questão que estou tendo dificuldade é o Chanfro/Bevel. Acredito que em poucas palavras, este efeito aplica uma sombra interna ao elemento na mesma cor, porem em um tom mais escuro ou claro acompanhando o posicionamento da "Luz Global".

Com esse efeito, o texto fica mais ou menos assim:

inserir a descrição da imagem aqui

Como aplicar em CSS?

Em box-shadow poderia utilizar o atributo inset, porem está já não pertence aos parâmetros de text-shadow.

A solução Paliativa está sendo utilizar imagens(png ou svg). Acredito que outra solução seria gerar uma outra fonte com essas características já pré-estabelecidas.

Obs¹: Por hora, nos próximos trabalhos, solicitei para o Designer tentar ao máximo não utilizar este efeito em textos;

Obs²: Para os designers de plantão, obviamente meu colega não aplicou este efeito tão amadoramente quanto apliquei no exemplo acima.

1 Resposta 1

3

A partir do conteúdo dessa resposta do SOen é possível fazer um efeito aproximado com a propriedade CSS background-clip: text.

Apesar de funcionar em alguns navegadores, esse valor da propriedade não está especificado na documentação, então você deve avaliar o seu uso.

h1 {
  font-family: Verdana, Arial, sans-serif;
  font-size: 50px;
  font-weight: bold;
  background-color: #00c;
  color: transparent;
  text-shadow: -1px -1px 6px rgba(255, 255, 255, 0.8);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}
<h1>Texto de Exemplo</h1>

1
  • Muito Obrigado, irei explorar melhor está funcionalidade. Commented 27/10/2015 às 15:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .