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
Post a Comment