Sinisterly
[CSS] Neon Logo - Printable Version

+- Sinisterly (https://sinister.li)
+-- Forum: Coding (https://sinister.li/Forum-Coding)
+--- Forum: Coding (https://sinister.li/Forum-Coding--71)
+--- Thread: [CSS] Neon Logo (/Thread-CSS-Neon-Logo)



[CSS] Neon Logo - Midnight - 08-06-2015

Simple and sexy neon glowing logo made with css :noh: :noh: :noh: :noh:

[hide]

CSS:
Code:
.neon-text { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border: none; font: normal normal bold 72px/normal "Atomic Age", Helvetica, sans-serif; color: rgb(64, 126, 196); text-align: center; -o-text-overflow: clip; text-overflow: clip; text-shadow: 1px 1px 0 rgb(77,162,252) , -1px -1px 0 rgb(77,162,252) , 1px -1px 0 rgb(77,162,252) , -1px 1px 0 rgb(77,162,252) , 4px 4px 8px rgb(44,88,137) , -4px 4px 8px rgb(44,88,137) , 4px -4px 8px rgb(44,88,137) , -4px -4px 8px rgb(44,88,137) ; -webkit-transition: all 500ms cubic-bezier(0.42, 0, 0.58, 1); -moz-transition: all 500ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 500ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 500ms cubic-bezier(0.42, 0, 0.58, 1); } .neon-text:hover { text-shadow: 1px 1px 0 rgb(77,162,252) , -1px -1px 0 rgb(77,162,252) , 1px -1px 0 rgb(77,162,252) , -1px 1px 0 rgb(77,162,252) ; -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); }

HTML:
Code:
<div class="neon-text">Meow?</div> <link async href="http://fonts.googleapis.com/css?family=Atomic%20Age" rel="stylesheet" type="text/css"/>

PREVIEW: www.calmforums.ml
[/hide]


RE: [CSS] Neon Logo - Kotomi - 08-11-2015

Not very clean lol.

It works though good job Smile