Chamfer effect [Bevel] in PS texts in CSS

Question

Chamfer effect [Bevel] in PS texts in CSS

Navigation

#1 by (3 votes)

2

I am facing a problem that I believe to be common between Designer and Dev / frontier / webdesigner or lack of communication at creation time or lack of developer technical knowledge to apply the technique.

I am producing a Layout that is mounted on a PSD that between the elements / layers contained in it, there are texts with effects (those that can be enabled and configured in the " Merge Options "). Some of the effects can easily be replicated in CSS, preserving the quality of the elements and their effects, but I'm having problems replicating the "Bevel and Notch Effect" (or in the English, "Bevel & Emboss") in the texts.

The effect in question that I am having difficulty is the Bevel / Bevel. I believe that in a nutshell, this effect applies an inner shadow to the element in the same color, but in a darker or clear tone accompanying the positioning of the "Global Light".

With this effect, the text looks something like this:

How to apply in CSS?

The Palliative solution is using images (png or svg). I believe that another solution would be to generate another source with these characteristics already pre-established.

Obs1: For the time being, in the next works, I asked the Designer to try as much as possible to not use this effect in texts;

Obs2: For the designers on duty, obviously my colleague did not apply this effect as amateurishly as I did in the example above.

html css webdesign psd photoshop

asked by anonymous 26.10.2015 / 14:49

1 answer

Error when using bindParam: Only variables should be passed by reference Select selecting the attendant below the average of calls

score 3 · Accepted Answer

From the content of this SOen response you can approximate the CSS property background-clip: text .

Although it works in some browsers, this property value is not specified in the , then you should evaluate its usage.

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>