Created
September 22, 2014 10:48
-
-
Save njif/cc6976d603d659b611ca to your computer and use it in GitHub Desktop.
This is a text blur demo with CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>I ♥ BLUR</title> | |
| <style> | |
| html { height: 100%; } | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin: 0; | |
| width: 100%; | |
| height: 100%; | |
| text-align: center; | |
| font-family: "Lucida Grande", Lucida, Verdana, sans-serif; | |
| background-color: hsl(210,50%,20%); | |
| background: url(bg.png), linear-gradient(90deg, hsl(210,40%,12%), hsl(210,40%,20%), hsl(210,40%,12%)); | |
| } | |
| .txt[contenteditable] { | |
| outline: none; | |
| } | |
| /* Box ------------------------------------------------------ */ | |
| #box { | |
| padding: 50px; | |
| font-size: 5em; | |
| font-weight: bold; | |
| } | |
| /* txt ------------------------------------------------------ */ | |
| .txt { | |
| color: hsla(0,0%,0%,0); | |
| text-shadow: #fff 0 0 60px; | |
| transition: text-shadow 2s cubic-bezier(0, 1, 0, 1); | |
| } | |
| @-moz-document url-prefix() { .txt { text-shadow: #fff 0 0 20px; } } /* FF fix */ | |
| #box:hover .txt { | |
| text-shadow: #fff 0 0 5px; | |
| transition: text-shadow 1s cubic-bezier(0, 0.75, 0, 1); | |
| } | |
| /* ♥ ------------------------------------------------------ */ | |
| .♥ { | |
| margin: 0 10px; | |
| color: hsla(0,0%,0%,0); | |
| text-shadow: red 0 0 5px; | |
| transition: text-shadow 1s cubic-bezier(0, 1, 0, 1); | |
| } | |
| #box:hover .♥ { | |
| text-shadow: red 0 0 100px; | |
| transition: text-shadow 2s cubic-bezier(0, 0.75, 0, 1); | |
| } | |
| @-moz-document url-prefix() { #box:hover .♥ { text-shadow: red 0 0 20px; } } /* FF fix */ | |
| </style> | |
| </head> | |
| <body> | |
| <a href="http://simurai.com/lab/2010/06/10/i-love-blur/"></a> | |
| <a href="http://codepen.io/simurai/pen/hewvo/"></a> | |
| <p>This is a text blur demo with CSS. So far I just knew how to make text look blurry by adding a lot of text-shadows. But it’s more a glow, because the text still stays in front. But what if you wanna turn text into smoke? Luckily you can set the color to transparent and then you only see the text-shadow alone.</p> | |
| <div id="box"> | |
| <span class="txt">I</span> | |
| <span class="♥">♥</span> | |
| <span class="txt" contenteditable spellcheck="false">BLUR</span> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment