Yes, I’m a Website Front-End Developer, Australian WordPress Specialist etc. What I certainly am not is a graphic designer. In fact, my graphic design skills suck. Ask me to do something with CSS and I’ll be happy but keep images away from me.
Of course the trend is towards using CSS in place of images wherever possible as this speeds up Page load times (images are seriously bad news for webpage load times which is bad for SEO). CSS3 combined with HTML5 offer all sorts of cool new opportunities with designing using script or code.
Creating cool text effects with CSS
When I spot an awesome effect using CSS or jQuery I try to duplicate the effect. The below is an effect by David Desandro and I thought I’d have a go to see whether this may be implemented into a WordPress Post.
Just for convenience I’ve used inline CSS for this demonstration but the CSS should really be in a dedicated CSS file such as style.css. Here is the HTML and CSS that create the effect below:
<div style="background-color:#72753f; display: block;font-style: normal;text-transform: uppercase; padding: 40px 30px 40px 30px; line-height: 0.8em;letter-spacing: 0.1em;font-weight: 800;font-size: 80px;color: #FFF;text-shadow: 0 0 150px #FFF, 0 0 60px #FFF, 0 0 10px #FFF;">WordPress & CSS text-shadow rocks!</div>