.neon-board { border-radius: .5em; box-shadow: -1px -1px #fdf, 1px -1px #fdf, 1px 1px #fdf, -1px 1px #fdf, 0 0 .1em #fdf, 0 0 .1em #fdf inset, 0 0 .5em #fdf, 0 0 .5em #fdf inset, 0 0 1em #fdf, 0 0 1em #fdf inset; margin: .5em; padding: .5em; } .neon { color: #fdf; font-family: "Grand Hotel", fantasy; font-style: italic; text-shadow: 0 0 .1em #fdf, 0 0 .5em #fdf, 0 0 1em #fdf; -moz-transition: text-shadow 1s; -ms-transition: text-shadow 1s; -o-transition: text-shadow 1s; -webkit-transition: text-shadow 1s; transition: text-shadow 1s; } .neon:hover { text-shadow: 0 0 .1em #fdf, 0 0 .1em #fdf, 0 0 .1em #fdf, 0 0 .5em #fdf, 0 0 1em #fdf; } .neon a { color: #f9f; } .neon.yellow { color: #ffe; text-shadow: 0 0 .1em #ffe, 0 0 .5em #ffe, 0 0 1em #ffe; } .neon.yellow:hover { color: #ffe; text-shadow: 0 0 .1em #ffe, 0 0 .1em #ffe, 0 0 .1em #ffe, 0 0 .5em #ffe, 0 0 1em #ffe; } .neon.blue { color: #eef; text-shadow: 0 0 .1em #eef, 0 0 .5em #eef, 0 0 1em #eef; } .neon.blue:hover { text-shadow: 0 0 .1em #eef, 0 0 .1em #eef, 0 0 .1em #eef, 0 0 .5em #eef, 0 0 1em #eef; } .neon.green { color: #cfc; text-shadow: 0 0 .1em #cfc, 0 0 .5em #cfc, 0 0 1em #cfc; } .neon.green:hover { text-shadow: 0 0 .1em #cfc, 0 0 .1em #cfc, 0 0 .1em #cfc, 0 0 .5em #cfc, 0 0 1em #cfc; } body.night { background-color: #000; font-size: 30px; } h1 { font-size: 2em; text-align: center; } p.icon { font-size: 5em; font-style: inherit; text-align: center; }
<!-- head --> <link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'> <!-- /head --> <div class="neon-board"> <h1 class="neon">Hello world!</h1> <h2 class="neon">Welcome to <a href="http://ginpen.com/">Ginpen.com</a>!</h2> <p class="neon yellow"> Humpty Dumpty sat on a wall.<br /> Humpty Dumpty had a great fall.<br /> All the king's horses and all the king's men<br /> couldn't put Humpty together again. </p> <p class="neon blue"> This is Ginpei, a JavaScripter. </p> <p class="neon green icon">〠</p> </div>