Report Blog Entry
This is the Rainbow Underline
This is the Rainbow Text
This is the Rainbow Pan
This is the Rainbow Flash
This is the Rainbow Flash Shadow
This is the Rainbow Blink
This is the Rainbow Blink Pan
How to use each property:
<p class="rainbowUnderline inline">This is the Rainbow Underline</p>
<p class="rainbow inline">This is the Rainbow Text</p>
<p class="rainbowPan inline">This is the Rainbow Pan</p>
<p class="rainbowFlash inline">This is the Rainbow Flash</p>
<p class="rainbowFlashShadow inline">This is the Rainbow Flash Shadow</p>
<p class="rainbowBlink inline">This is the Rainbow Blink</p>
<p class="rainbowBlinkPan inline">This is the Rainbow Blink Pan</p>
CSS:
.rainbowUnderline{text-decoration:none;background-position:0 1.10em;background-size:100% 100%;background-repeat:no-repeat;transition:background 0.5s;background-image:linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959)}.rainbow{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.rainbowPan{animation:myRainbowPan 1s infinite}.rainbowFlash{animation:myRainbow 2s linear infinite}.rainbowFlashShadow{color:inherit;animation:myRainbowShadow 2s linear infinite}.rainbowBlink{animation:myRainbowBlink 0.3s infinite}.rainbowBlinkPan{animation:myRainbowBlinkPan 2s infinite}@keyframes myRainbowPan{0%{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}25%{background:-webkit-linear-gradient(45deg, #29d0be, #6cb8ea, #ff5959, #e1f549);-webkit-background-clip:text;-webkit-text-fill-color:transparent}50%{background:-webkit-linear-gradient(45deg, #6cb8ea, #ff5959, #e1f549, #29d0be);-webkit-background-clip:text;-webkit-text-fill-color:transparent}75%{background:-webkit-linear-gradient(45deg, #ff5959, #e1f549, #29d0be, #6cb8ea);-webkit-background-clip:text;-webkit-text-fill-color:transparent}100%{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}}@keyframes myRainbow{0%{color:#e1f549}25%{color:#29d0be}50%{color:#6cb8ea}75%{color:#ff5959}100%{color:#e1f549}}@keyframes myRainbowShadow{0%{text-shadow:0 0 5px #e1f549}25%{text-shadow:0 0 5px #29d0be}50%{text-shadow:0 0 5px #6cb8ea}75%{text-shadow:0 0 5px #ff5959}100%{text-shadow:0 0 5px #e1f549}}@keyframes myRainbowBlink{0%{color:inherit}50%{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}}@keyframes myRainbowBlinkPan{0%{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}12.5%{background:transparent;-webkit-background-clip:none;-webkit-text-fill-color:inherit}25%{background:-webkit-linear-gradient(45deg, #29d0be, #6cb8ea, #ff5959, #e1f549);-webkit-background-clip:text;-webkit-text-fill-color:transparent}37.5%{background:transparent;-webkit-background-clip:none;-webkit-text-fill-color:inherit}50%{background:-webkit-linear-gradient(45deg, #6cb8ea, #ff5959, #e1f549, #29d0be);-webkit-background-clip:text;-webkit-text-fill-color:transparent}62.5%{background:transparent;-webkit-background-clip:none;-webkit-text-fill-color:inherit}75%{background:-webkit-linear-gradient(45deg, #ff5959, #e1f549, #29d0be, #6cb8ea);-webkit-background-clip:text;-webkit-text-fill-color:transparent}87.5%{background:transparent;-webkit-background-clip:none;-webkit-text-fill-color:inherit}100%{background:-webkit-linear-gradient(45deg, #e1f549, #29d0be, #6cb8ea, #ff5959);-webkit-background-clip:text;-webkit-text-fill-color:transparent}}.inline{display:inline}
Just add the CSS to the inside of a style tag and then you're good to go!
To use it you just add class="[class name here]" to any text tag with any of the following classes: rainbow, rainbowUnderline, rainbowPan, rainbowFlash, rainbowFlashShadow, rainbowBlink, rainbowBlinkPan.
Take a look at the examples to get an idea of how this should look for each property. Note that this CSS does include the .inline selector which simply sets your text to be placed inline with any other text. This is an optional property and not necessary, but does have its uses to get the full effect of certain rainbow classes.
P.S. If you are trying to use the rainbowUnderline effect but you do not see your underline then that means you'll need to adjust one small property. Find the .rainbowUnderline selector in the CSS. You'll see the property background-position: 0 1.15em. Change the second value to a number smaller than 1.15 until you're able to see it to a size of your liking. Remember, the smaller the number, the larger the line, just make sure you keep the "em" value type.
Comments
Displaying 0 of 0 comments ( View all | Add Comment )