css3 - CSS Embossed (Inset) Text -


i'm trying give headings nice embossed look. works great in chrome, firefox bows out. how can make effect work in both? here's fiddle:

https://jsfiddle.net/7p15s3nv/

and css:

h1 {   background-color: #565656;   color: transparent;   text-shadow: 0px 2px 3px rgba(255,255,255,0.5);   -webkit-background-clip: text;      -moz-background-clip: text;           background-clip: text; } 

thanks help.

maybe without background-clip, more 'classical' approach ?

h1:first-of-type {    background-color: #565656;    color: transparent;    text-shadow: 0px 2px 3px rgba(255,255,255,0.5);    -webkit-background-clip: text;       -moz-background-clip: text;            background-clip: text;  }  h1+h1 {     color: rgba(255,255,255,0.4);    text-shadow: 0 -2px  rgba(0,0,0,0.6);  }
<h1>hello there! webkit</h1>  <h1>hello there! ff ?</h1>

fiddle play https://jsfiddle.net/7p15s3nv/5/

to test side side in chrome , other browser such ie or ff


Comments

Popular posts from this blog

routing - AngularJS State management ->load multiple states in one page -

python - GRASS parser() error -

Swift game error message -