Ajax Loader
HTML
doctype html
1
doctype html
2
html lang="en"
3
  head
4
    title Neon light
5
    link href='http://fonts.googleapis.com/css?family=Londrina+Sketch' rel='stylesheet'
6
  body
7
    header.header
8
      nav
9
        ul.menu
10
          li
11
            a.neon href="#"
12
              span.broken C
13
              | SS3
14
          li
15
            a.neon href="#"
16
              | neo
17
              span.broken n
18
          li
19
            a.neon href="#"
20
              | s
21
              span.broken i
22
              | gns
23
 
 
CSS
body {
1
body {
2
  background-color: #000;
3
}
4
 
5
.menu {
6
  transform: rotate(-2deg) skew(5deg);
7
  display: inline-block;
8
  text-align: center;
9
  padding: 20px;
10
  margin: 30px;
11
  word-spacing: .8em;
12
  li {
13
    display: inline-block;
14
  }
15
}
16
  
17
.neon, .neon:hover .broken {
18
  color: transparent;
19
  font-size: 100px;
20
  font-family: Londrina Sketch;
21
  font-style: italic;
22
  text-decoration: none;
23
  letter-spacing: .06em;
24
  text-shadow:
25
    /* thin yellow glow */
26
    0 0 .02em hsla(80, 100%, 60%, 1),
27
    /* reflected thin yellow glow */
28
    .04em .02em .05em hsla(80, 100%, 70%, .8),
29
    /* red glow */
30
    .03em .03em .1em #f00,
31
    .03em .03em .1em #f00,
32
    -.03em .03em .1em #f00,
33
    -.03em -.03em .1em #f00,
34
    /* more red glow */
35
    .03em .03em .8em #f00,
36
    .03em -.03em .8em #f00,
37
    -.03em .03em .8em #f00,
38
    -.03em -.03em .8em #f00;
39
  .broken {
40
    text-shadow:
41
      /* thin orange glow */
42
      0 0 .02em hsla(30, 100%, 60%, .6),
43
      /* reflected thin orange glow */
44
      .04em .02em .05em hsla(30, 100%, 70%, .3),
45
      /* faint red glow */
46
      .03em .03em .1em hsla(0, 100%, 50%, .3),
47
      .03em .03em .1em hsla(0, 100%, 50%, .3),
48
      -.03em .03em .1em hsla(0, 100%, 50%, .3),
49
      -.03em -.03em .1em hsla(0, 100%, 50%, .3);
50
  }
51
}
 

Neon signs with css3

CSSDeck G+