Add Shadows To Header Text

Don Von Alpha Dom
by Don Von Alpha Dom · 2 posts
12 years ago in General
Posted 12 years ago · Author
This code adds shadows to the text in all of your headers. The default color is white. Replace ffffff with the hex value of the color you want your shadows to be. Here is a hex color calculator to help you out: https://www.imvumafias.org/generators/he ... lator.html

This was tested on Chrome, Firefox, and IE; it worked on all 3. It takes advantage of CSS3 and filters to form cross browser compatibility which otherwise would not be possible for text shadows. You can change the strength and direction numbers to change the size and shape of the shadows. Careful, if you make the shadows too big, then it will just highlight the text instead of adding shadows.

Code
<style>
.paneltitletext {
   /*Chrome  Fire Fox  Safari text-shadow: right down opacity color*/
   text-shadow: 0.1em 0.0em 0.0em #ffffff;
   /*IE filter: Shadow(Color=, Direction=, Strength=);*/
   filter: Shadow(Color=#ffffff, Direction=135, Strength=5);
}
</style>


I made this code myself from scratch and it took me a long time to make it work on all major browsers, so have fun. :D
Posted 5 years ago
Thank you so much for this script of codee. I am so excited that now i'll be able to use shadows with my text. Not only will this look extremely cool on my work that i make but i can also create very well desinged content when i get the hang of things more easily. Thank you for this code it will help me and my work out a lot and i believe other too.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in

Already have an account? Sign in here

SIGN IN NOW

Create an account

Sign up for a new account in our community. It's easy!

REGISTER A NEW ACCOUNT