Neon signs with css3
Text-shadows can do a lot of things :)
This is pretty realistic, but would be really ugly in most web design.
If you don't think it's annoying enough you can use a css3-animation to simulate a blinking sign. Yay!
doctype html
doctype html
html lang="en"
head
title Neon light
link href='http://fonts.googleapis.com/css?family=Londrina+Sketch' rel='stylesheet'
body
header.header
nav
ul.menu
li
a.neon href="#"
span.broken C
| SS3
li
a.neon href="#"
| neo
span.broken n
li
a.neon href="#"
| s
span.broken i
| gns
body {
body {
background-color: #000;
}
.menu {
transform: rotate(-2deg) skew(5deg);
display: inline-block;
text-align: center;
padding: 20px;
margin: 30px;
word-spacing: .8em;
li {
display: inline-block;
}
}
.neon, .neon:hover .broken {
color: transparent;
font-size: 100px;
font-family: Londrina Sketch;
font-style: italic;
text-decoration: none;
letter-spacing: .06em;
text-shadow:
/* thin yellow glow */
0 0 .02em hsla(80, 100%, 60%, 1),
/* reflected thin yellow glow */
.04em .02em .05em hsla(80, 100%, 70%, .8),
/* red glow */
.03em .03em .1em #f00,
.03em .03em .1em #f00,
-.03em .03em .1em #f00,
-.03em -.03em .1em #f00,
/* more red glow */
.03em .03em .8em #f00,
.03em -.03em .8em #f00,
-.03em .03em .8em #f00,
-.03em -.03em .8em #f00;
.broken {
text-shadow:
/* thin orange glow */
0 0 .02em hsla(30, 100%, 60%, .6),
/* reflected thin orange glow */
.04em .02em .05em hsla(30, 100%, 70%, .3),
/* faint red glow */
.03em .03em .1em hsla(0, 100%, 50%, .3),
.03em .03em .1em hsla(0, 100%, 50%, .3),
-.03em .03em .1em hsla(0, 100%, 50%, .3),
-.03em -.03em .1em hsla(0, 100%, 50%, .3);
}
}