![]() |
|
[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
|