demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Diner

CSS3 Neon Sign

css / typography

Estimated reading time: 2 minutes, 4 seconds

The text-shadow property can be used for many purposes in web page design: I’ve demonstrated stroked text, 3D effects, and more. It’s logical to take the multi-shadows aspect of text-shadow even further, into effects like neon glows.

While there are a few lessons of this kind available on the web, most of them use a thick font with a diffuse glow of solid colors. Here we want to simulate a real neon sign, so I will use a thin rounded display font (the appropriately named Neon 80’s by Essqué Productions) and a little more subtlety on the colors.

First I needed to convert the font into webfont formats (via FontSquirrel) and embed it onto the page:

@font-face {
    font-family: 'Neon80sRegular';
    src: url('/assets/fonts/neon-webfont.woff') format('woff'),
         url('/assets/fonts/neon-webfont.ttf') format('truetype'),
         url('/assets/fonts/neon-webfont.svg#Neon80sRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

(I have not included the older Microsoft-proprietary .eot format as IE currently doesn’t support text-shadow).

The HTML I’ll be using is a simple <h1> element with the word “Diner”. The black brick texture behind it is from Photos Public Domain, licensed under Creative Commons. The CSS:

h1 { 
background: #000; background-image: radial-gradient(center, ellipse farthest-corner, rgba(0,0,0,0), rgba(0,0,0,1)), 
url(/assets/images/black-brick-wall-texture.jpg);
width: 768px; text-align: center; font-family: Neon80sRegular, Arial Narrow, sans-serif; color: #fee; width: 768px; padding: 2rem; text-transform: uppercase; font-size: 6rem; letter-spacing: 2rem;
text-shadow: 0 0 30px rgba(255,0,84,0.6), 0 0 60px rgba(255,0,84,0.4), 0 0 100px rgba(255,0,84,0.2), 0 0 90px rgba(255,0,84,0.1); }

I’ve used an elliptical gradient in the background of the h1, using a similar idea to my advanced CSS3 photo vignette technique to darken the bricks around the text. (I’ve covered gradients in Webkit-based browsers and Firefox in the code above, with a catch-all at the end; if you were using this in real-life, full CSS3 vendor support should be present).

The part that creates the neon glow is the multi-layered text-shadow. Note that none of the applied shadows have any kind of offset (the first two values for each shadow are always left at 0), but they do increase in blurriness (the third value). All of the shadows are the same color, set using rgba, but they decrease in opacity as they grow, approximating the inverse square law that all light obeys and enabling the viewer to glimpse the bricks through the neon glow.

If you’re inspired to recreate this effect I’d encourage you take the idea and  experiment with your own values, rather than copying what you see here. It’s also possible to make the neon flicker by using CSS keyframe animation.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.