posted on Dec, 9 2019 @ 12:10 AM
a reply to:
machineintelligence
Rather than coding it directly have you considered creating a background image using multiple layers in photoshop for your graphics?
In photoshop just create a new layer with the text font you like and then on that layer select blending options. Then you can play around with the
bevel and emboss function.
The only way i can think to manipulate the text in CSS would be to use the text-shadow property.
Basically you create 2 offset diagonal shadows, one white offset to the top left and one black offset to the bottom right.
Something like:
#embossed h1 [
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
color: #aaa9ad;
opacity: 0.9;
font: 80px 'Your Font';
]
Or for a 3d effect try this:
#three-d h1 [
color: #fff;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px
7px #001135;
font: 80px 'Your Font';
]
Obviously you will need to play around with the pixel height and shadow colours etc.
I found these online years ago and have them saved along with other styles so if you need more inspiration let me know.
edit on 9/12/19 by
Grenade because: (no reason given)