|
|
| Line 271: |
Line 271: |
| | } | | } |
| | | | |
| − | @-webkit-keyframes colorFade
| |
| − | {
| |
| − | 0%, 100% {
| |
| − | background-color: #981A36;
| |
| − | }
| |
| − |
| |
| − | 50% {
| |
| − | background-color: #0DFFB7;
| |
| − |
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | body {
| |
| − | text-rendering: optimizeLegibility;
| |
| − | }
| |
| − |
| |
| − | h2 {
| |
| − | font-family: 'source sans pro', 'helvetica neue', 'helvetica', arial, sans-serif;
| |
| − | font-size: 3em;
| |
| − | line-height: 1.1;
| |
| − | font-weight: 900; // Nice and thick to show off the color
| |
| − | text-align: center;
| |
| − |
| |
| − | -webkit-background-clip: text;
| |
| − | -webkit-text-fill-color: transparent;
| |
| − | color: #705993; // fallback color (static)
| |
| − | background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.5) 10%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 90%);
| |
| − |
| |
| − | // loop the background along each line of text
| |
| − | background-size: 110% 5em; // 1em because line-height is 1
| |
| − | background-repeat: repeat-y;
| |
| − |
| |
| − | -webkit-animation: colorFade 6s infinite;
| |
| − | }
| |
| | </style> | | </style> |
| | <!-- End of CSS --> | | <!-- End of CSS --> |
