Created
November 7, 2013 14:39
-
-
Save gorillamoe/7355636 to your computer and use it in GitHub Desktop.
Wanted to see how easily marquees could be constructed with CSS: - This demo uses -prefix-free to avoid vendor prefixes - It also requires manual setting of the end text-indent - Everything below the /* Make it pretty */ comment is non-essential - Brought to you by http://twitter.com/jonathansampson Found here: http://jsfiddle.net/jonathansampso…
This file contains 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> | |
| <head> | |
| <title>CSS 3 only no JavaScript needed Marquee Effects.</title> | |
| <style> | |
| /* Make it a marquee */ | |
| .marquee { | |
| width: 450px; | |
| margin: 0 auto; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| box-sizing: border-box; | |
| animation: marquee 50s linear infinite; | |
| } | |
| .marquee:hover { | |
| animation-play-state: paused | |
| } | |
| /* Make it move */ | |
| @keyframes marquee { | |
| 0% { text-indent: 27.5em } | |
| 100% { text-indent: -105em } | |
| } | |
| /* Make it pretty */ | |
| .microsoft { | |
| padding-left: 1.5em; | |
| position: relative; | |
| font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif; | |
| } | |
| /* ::before was :before before ::before was ::before - kthx */ | |
| .microsoft:before, .microsoft::before { | |
| z-index: 2; | |
| content: ''; | |
| position: absolute; | |
| top: -1em; left: -1em; | |
| width: .5em; height: .5em; | |
| box-shadow: 1.0em 1.25em 0 #F65314, | |
| 1.6em 1.25em 0 #7CBB00, | |
| 1.0em 1.85em 0 #00A1F1, | |
| 1.6em 1.85em 0 #FFBB00; | |
| } | |
| .microsoft:after, .microsoft::after { | |
| z-index: 1; | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; | |
| width: 2em; height: 2em; | |
| background-image: linear-gradient(90deg, white 70%, rgba(255,255,255,0)); | |
| } | |
| /* Style the links */ | |
| .microsoft a { | |
| color: #1570A6; | |
| transition: color .5s; | |
| text-decoration: none; | |
| } | |
| .microsoft a:hover { | |
| color: #F65314; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p class="microsoft marquee">Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment