Created
October 23, 2012 18:30
-
-
Save xav76/3940593 to your computer and use it in GitHub Desktop.
A CodePen by Tim Pietrusky. Colorful stripes - A striped background based on linear-gradients. Inspired by the header background image of http://www.wearejh.com
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
| /** | |
| Striped background | |
| # What? # | |
| A striped background based on linear-gradients | |
| Inspired by the header background image of http://www.wearejh.com | |
| # 2012 by Tim Pietrusky | |
| # timpietrusky.com | |
| **/ |
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, | |
| body { | |
| height:100%; | |
| } | |
| body { | |
| margin:0; | |
| background: | |
| linear-gradient(top, #ff0 0%, #f00 100%), | |
| linear-gradient(top, #e20687 0%, #a21465 100%), | |
| linear-gradient(top, #d8479e 0%, #a1c4d1 100%), | |
| linear-gradient(top, #f9d307 0%, #8cc9d7 100%), | |
| linear-gradient(top, #0077aa 0%, #50a3d8 100%), | |
| linear-gradient(top, #a1c4d1 0%, #d8479e 100%), | |
| linear-gradient(left, | |
| #1e5799 4%, | |
| #1f9b7e 4%, | |
| #1f9b7e 8%, | |
| #fff 8%, | |
| #fff 10%, | |
| #5d24b7 10%, | |
| #5d24b7 11%, | |
| #be2e2e 11%, | |
| #be2e2e 13%, | |
| #fff 13%, | |
| #fff 15%, | |
| #d6942a 15%, | |
| #d6942a 17%, | |
| #b8d899 17%, | |
| #b8d899 21%, | |
| #fff 21%, | |
| #fff 27%, | |
| #8ace31 27%, | |
| #8ace31 34%, | |
| #fff 34%, | |
| #fff 36%, | |
| #f6b818 36%, | |
| #f6b818 40%, | |
| #e63737 40%, | |
| #e63737 44%, | |
| #fff 44%, | |
| #fff 52%, | |
| #f00 52%, | |
| #f00 54%, | |
| #fff 54%, | |
| #fff 60%, | |
| #e20687 60%, | |
| #e20687 64%, | |
| #fff 64%, | |
| #fff 70%, | |
| #8cd5f7 70%, | |
| #8cd5f7 72%, | |
| #fff 72%, | |
| #fff 73%, | |
| #ec6529 73%, | |
| #ec6529 74%, | |
| #fff 74%, | |
| #fff 75%, | |
| #d6942a 75%, | |
| #d6942a 76%, | |
| #fbe90f 76%, | |
| #fbe90f 81%, | |
| #fff 81%, | |
| #fff 85%, | |
| #1e5799 85%, | |
| #1e5799 88%, | |
| #8ace31 88%, | |
| #8ace31 89%, | |
| #fff 89%, | |
| #fff 92%, | |
| #ffe60a 92%, | |
| #ffe60a 94%, | |
| #f70909 94%, | |
| #f70909 96%, | |
| #8ace31 96%, | |
| #8ace31 99%, | |
| #fff 99%, | |
| #fff 99.5%, | |
| #d6942a 99.5% | |
| ); | |
| background-size: | |
| 2% 100%, | |
| 3% 100%, | |
| 5% 100%, | |
| 2% 100%, | |
| 1% 100%, | |
| 2% 100%, | |
| 100% 1em | |
| ; | |
| background-position: | |
| 12%, | |
| 23%, | |
| 48%, | |
| 55%, | |
| 59%, | |
| 64%, | |
| 0% | |
| ; | |
| background-repeat: | |
| no-repeat, | |
| no-repeat, | |
| no-repeat, | |
| no-repeat, | |
| no-repeat, | |
| no-repeat, | |
| repeat | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment