Created
April 10, 2012 15:06
-
-
Save jsanchezpando/2352022 to your computer and use it in GitHub Desktop.
font icons with text gradient.
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
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| } | |
| .icon { | |
| position:relative; | |
| display: inline-block; | |
| height: 1.2em; | |
| width: 1.2em; | |
| line-height: 1.2em; | |
| font-size: 3em; | |
| font-weight: bold; | |
| text-decoration: none; | |
| text-align: center; | |
| border-radius:1em; | |
| color: red; | |
| -webkit-mask-image: -webkit-radial-gradient(40% 40%, circle cover, rgba(0,0,0,.5), rgba(0,0,0,1)); | |
| text-shadow: 3px 2px 4px rgba(0,0,0,.6); | |
| } | |
| .icon::before { | |
| content:' '; | |
| position:absolute; | |
| display: inline-block; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| border-radius:100%; | |
| background-color: #A0E4FF; | |
| background-image: -webkit-radial-gradient(70% 70%, ellipse contain, #FFFFFF, #A0E4FF); | |
| border: 3px solid rgba(0,0,0,.6); | |
| box-shadow: inset 3px 2px 8px rgba(0,0,0,.6); | |
| z-index: -1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav> | |
| <a class="icon" href="#">A</a> | |
| <a class="icon" href="#">B</a> | |
| <a class="icon" href="#">+</a> | |
| <a class="icon" href="#">♪</a> | |
| <a class="icon" href="#">■</a> | |
| <a class="icon" href="#">►</a> | |
| <a class="icon" href="#">✖</a> | |
| <a class="icon" href="#">✔</a> | |
| </nav> | |
| <p>Pure CSS, no bitmap, no extra http request.</p> | |
| <p>This example support Webkit only.</p> | |
| <p>Sized by font-size property.</p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment