Rainbow Harmony
How do I make an rainbow harmony?
(RainbowTextWeekend)The original code is to the credit of Lionel T [http://codepen.io/elrumordelaluz/], which I appreciate very much the work. See here the pen concerned [http://codepen.io/elrumordelaluz/pen/2cbc45a2380389f2db74983d40601338] . What is a rainbow harmony? How do you make a rainbow harmony? This script and codes were developed by Bailh on 12 July 2022, Tuesday.
Rainbow Harmony Previews
Rainbow Harmony - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rainbow Harmony</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100);
body { overflow: hidden; height: 100vh; width: 100vw; background-image: url("http://themes-pixeden.com/playground/text/tenue/assets/img/texture.jpg");
}
.tenue-shadow { font-family: 'Josefin Sans', sans-serif; font-weight: 100; text-shadow: -0.00585em -0.00273em 0.1px #a499ab, -0.00878em -0.00546em 0.3px #a69aad, -0.01463em -0.00818em 0.5px #a79cae, -0.01755em -0.01091em 0.7px #a89daf, -0.0234em -0.01364em 0.9px #aa9fb0, -0.02633em -0.01637em 1.1px #aba0b1, -0.03218em -0.0191em 1.3px #aca1b3, -0.0351em -0.02182em 1.5px #aea3b4, -0.04096em -0.02455em 1.7px #afa4b5, -0.04388em -0.02728em 1.9px #b0a6b6, -0.04973em -0.03001em 2.1px #b1a7b7, -0.05266em -0.03274em 2.3px #b2a8b8, -0.05851em -0.03546em 2.5px #b4aab9, -0.06143em -0.03819em 2.7px #b5abbb, -0.06728em -0.04092em 2.9px #b6adbc, -0.07021em -0.04365em 3.1px #b7aebd, -0.07606em -0.04638em 3.3px #b8afbe, -0.07899em -0.0491em 3.5px #bab1bf, -0.08484em -0.05183em 3.7px #bbb2c0, -0.08776em -0.05456em 3.9px #bcb3c1, -0.09361em -0.05729em 4.1px #bdb4c2, -0.09654em -0.06002em 4.3px #beb6c3, -0.10239em -0.06274em 4.5px #bfb7c4, -0.10531em -0.06547em 4.7px #c0b8c5, -0.11117em -0.0682em 4.9px #c1b9c6, -0.11409em -0.07093em 5.1px #c2bbc7, -0.11994em -0.07366em 5.3px #c4bcc8, -0.12287em -0.07638em 5.5px #c5bdc9, -0.12872em -0.07911em 5.7px #c6beca, -0.13164em -0.08184em 5.9px #c7bfcb, -0.13749em -0.08457em 6.1px #c8c1cc, -0.14042em -0.0873em 6.3px #c9c2cd, -0.14627em -0.09002em 6.5px #cac3ce, -0.1492em -0.09275em 6.7px #cbc4cf, -0.15505em -0.09548em 6.9px #ccc5d0, -0.15797em -0.09821em 7.1px #cdc6d1, -0.16382em -0.10094em 7.3px #cec7d1, -0.16675em -0.10366em 7.5px #cfc8d2, -0.1726em -0.10639em 7.7px #d0c9d3, -0.17552em -0.10912em 7.9px #d1cbd4, -0.18138em -0.11185em 8.1px #d2ccd5, -0.1843em -0.11458em 8.3px #d3cdd6, -0.19015em -0.1173em 8.5px #d3ced7, -0.19308em -0.12003em 8.7px #d4cfd8, -0.19893em -0.12276em 8.9px #d5d0d8, -0.20185em -0.12549em 9.1px #d6d1d9, -0.2077em -0.12822em 9.3px #d7d2da, -0.21063em -0.13094em 9.5px #d8d3db, -0.21648em -0.13367em 9.7px #d9d4dc, -0.21941em -0.1364em 9.9px #dad5dd, -0.22526em -0.13913em 10.1px #dbd6dd, -0.22818em -0.14186em 10.3px #dcd7de, -0.23403em -0.14458em 10.5px #dcd8df, -0.23696em -0.14731em 10.7px #ddd9e0, -0.24281em -0.15004em 10.9px #dedae1, -0.24573em -0.15277em 11.1px #dfdbe1, -0.25159em -0.1555em 11.3px #e0dce2, -0.25451em -0.15822em 11.5px #e1dde3, -0.26036em -0.16095em 11.7px #e1dee4, -0.26329em -0.16368em 11.9px #e2dee4, -0.26914em -0.16641em 12.1px #e3dfe5, -0.27206em -0.16914em 12.3px #e4e0e6, -0.27791em -0.17186em 12.5px #e5e1e7, -0.28084em -0.17459em 12.7px #e5e2e7, -0.28669em -0.17732em 12.9px #e6e3e8, -0.28962em -0.18005em 13.1px #e7e4e9, -0.29547em -0.18278em 13.3px #e8e5ea, -0.29839em -0.1855em 13.5px #e9e6ea, -0.30424em -0.18823em 13.7px #e9e6eb, -0.30717em -0.19096em 13.9px #eae7ec, -0.31302em -0.19369em 14.1px #ebe8ec, -0.31594em -0.19642em 14.3px #ece9ed, -0.3218em -0.19914em 14.5px #eceaee, -0.32472em -0.20187em 14.7px #edebee, -0.33057em -0.2046em 14.9px #eeebef, -0.3335em -0.20733em 15.1px #eeecf0, -0.33935em -0.21006em 15.3px #efedf0, -0.34227em -0.21278em 15.5px #f0eef1, -0.34812em -0.21551em 15.7px #f1eff2, -0.35105em -0.21824em 15.9px #f1f0f2, -0.3569em -0.22097em 16.1px #f2f0f3, -0.35983em -0.2237em 16.3px #f3f1f4, -0.36568em -0.22642em 16.5px #f3f2f4, -0.3686em -0.22915em 16.7px #f4f3f5, -0.37445em -0.23188em 16.9px #f5f3f6, -0.37738em -0.23461em 17.1px #f5f4f6, -0.38323em -0.23734em 17.3px #f6f5f7, -0.38615em -0.24006em 17.5px #f7f6f7, -0.39201em -0.24279em 17.7px #f7f6f8, -0.39493em -0.24552em 17.9px #f8f7f9, -0.40078em -0.24825em 18.3px #f9f8f9, -0.40371em -0.25098em 18.7px #f9f9fa, -0.40956em -0.2537em 19.1px #faf9fa, -0.41248em -0.25643em 19.5px #fbfafb, -0.41833em -0.25916em 19.9px #fbfbfc, -0.42126em -0.26189em 20.3px #fcfcfc, -0.42711em -0.26462em 20.7px #fdfcfd, -0.43004em -0.26734em 21.7px #fdfdfd, -0.43589em -0.27007em 22.7px #fefefe, -0.43881em -0.2728em 23.7px #fefefe, -0.44466em -0.27553em 24.7px white; /* You could add: */ mix-blend-mode: multiply;
}
.tenue-shadow #one { color: #ff003c;
}
.tenue-shadow #two { color: #ee00ff;
}
.tenue-shadow #three { color: #5500ff;
}
.tenue-shadow #four { color: #00d9ff;
}
.tenue-shadow #five { color: #00ff88;
}
.tenue-shadow #six { color: #ddff00;
}
.tenue-shadow #seven { color: #ff8800;
}
.tenue-extras { font-size: 19vh; letter-spacing: .34em; line-height: 3.5; margin-bottom: .5em; padding-left: .34em; margin-top: 0; overflow: hidden; padding-top: 1em; position: relative; text-align: center; text-transform: none; word-wrap: break-word;
}
.tenue-overlay { background-blend-mode: difference, color; background-image: linear-gradient(45deg, rgba(255, 0, 0, 0) 0%, #ff2424 13%, rgba(255, 36, 255, 0.84) 15%, #c87f5b 25%, rgba(211, 101, 80, 0.73) 33%, #5bc8c8 48%, rgba(91, 200, 200, 0.9) 49%, #c87f5b 57%, #c8c85b 63%, #b6c85b 67%, #d26251 74%, rgba(37, 254, 59, 0.8) 84%, #c7c55c 86%, rgba(37, 254, 59, 0.7) 100%); background-repeat: no-repeat; background-size: cover; height: 400%; left: 0; mix-blend-mode: difference; opacity: .3; position: absolute; top: 0; width: 200%; animation: ring 5s cubic-bezier(0.74, 0.31, 0.37, 0.8) infinite alternate;
}
@keyframes ring { 50% { transform: scale(3); } 100% { transform: translate(-50%, -50%) rotateZ(360deg); }
}
.u-dn { display: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1 class="tenue-shadow tenue-extras "><span id="one">H</span><sub><span id="two">A</span></sub><span id="three">R</span><sub><span id="four">M</span></sub><span id="five">O</span><sub><span id="six">N</span></sub><span id="seven">Y</span><sub>
</h1>
<div class="tenue-overlay"></div> <script src="js/index.js"></script>
</body>
</html>
Rainbow Harmony - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100);
body { overflow: hidden; height: 100vh; width: 100vw; background-image: url("http://themes-pixeden.com/playground/text/tenue/assets/img/texture.jpg");
}
.tenue-shadow { font-family: 'Josefin Sans', sans-serif; font-weight: 100; text-shadow: -0.00585em -0.00273em 0.1px #a499ab, -0.00878em -0.00546em 0.3px #a69aad, -0.01463em -0.00818em 0.5px #a79cae, -0.01755em -0.01091em 0.7px #a89daf, -0.0234em -0.01364em 0.9px #aa9fb0, -0.02633em -0.01637em 1.1px #aba0b1, -0.03218em -0.0191em 1.3px #aca1b3, -0.0351em -0.02182em 1.5px #aea3b4, -0.04096em -0.02455em 1.7px #afa4b5, -0.04388em -0.02728em 1.9px #b0a6b6, -0.04973em -0.03001em 2.1px #b1a7b7, -0.05266em -0.03274em 2.3px #b2a8b8, -0.05851em -0.03546em 2.5px #b4aab9, -0.06143em -0.03819em 2.7px #b5abbb, -0.06728em -0.04092em 2.9px #b6adbc, -0.07021em -0.04365em 3.1px #b7aebd, -0.07606em -0.04638em 3.3px #b8afbe, -0.07899em -0.0491em 3.5px #bab1bf, -0.08484em -0.05183em 3.7px #bbb2c0, -0.08776em -0.05456em 3.9px #bcb3c1, -0.09361em -0.05729em 4.1px #bdb4c2, -0.09654em -0.06002em 4.3px #beb6c3, -0.10239em -0.06274em 4.5px #bfb7c4, -0.10531em -0.06547em 4.7px #c0b8c5, -0.11117em -0.0682em 4.9px #c1b9c6, -0.11409em -0.07093em 5.1px #c2bbc7, -0.11994em -0.07366em 5.3px #c4bcc8, -0.12287em -0.07638em 5.5px #c5bdc9, -0.12872em -0.07911em 5.7px #c6beca, -0.13164em -0.08184em 5.9px #c7bfcb, -0.13749em -0.08457em 6.1px #c8c1cc, -0.14042em -0.0873em 6.3px #c9c2cd, -0.14627em -0.09002em 6.5px #cac3ce, -0.1492em -0.09275em 6.7px #cbc4cf, -0.15505em -0.09548em 6.9px #ccc5d0, -0.15797em -0.09821em 7.1px #cdc6d1, -0.16382em -0.10094em 7.3px #cec7d1, -0.16675em -0.10366em 7.5px #cfc8d2, -0.1726em -0.10639em 7.7px #d0c9d3, -0.17552em -0.10912em 7.9px #d1cbd4, -0.18138em -0.11185em 8.1px #d2ccd5, -0.1843em -0.11458em 8.3px #d3cdd6, -0.19015em -0.1173em 8.5px #d3ced7, -0.19308em -0.12003em 8.7px #d4cfd8, -0.19893em -0.12276em 8.9px #d5d0d8, -0.20185em -0.12549em 9.1px #d6d1d9, -0.2077em -0.12822em 9.3px #d7d2da, -0.21063em -0.13094em 9.5px #d8d3db, -0.21648em -0.13367em 9.7px #d9d4dc, -0.21941em -0.1364em 9.9px #dad5dd, -0.22526em -0.13913em 10.1px #dbd6dd, -0.22818em -0.14186em 10.3px #dcd7de, -0.23403em -0.14458em 10.5px #dcd8df, -0.23696em -0.14731em 10.7px #ddd9e0, -0.24281em -0.15004em 10.9px #dedae1, -0.24573em -0.15277em 11.1px #dfdbe1, -0.25159em -0.1555em 11.3px #e0dce2, -0.25451em -0.15822em 11.5px #e1dde3, -0.26036em -0.16095em 11.7px #e1dee4, -0.26329em -0.16368em 11.9px #e2dee4, -0.26914em -0.16641em 12.1px #e3dfe5, -0.27206em -0.16914em 12.3px #e4e0e6, -0.27791em -0.17186em 12.5px #e5e1e7, -0.28084em -0.17459em 12.7px #e5e2e7, -0.28669em -0.17732em 12.9px #e6e3e8, -0.28962em -0.18005em 13.1px #e7e4e9, -0.29547em -0.18278em 13.3px #e8e5ea, -0.29839em -0.1855em 13.5px #e9e6ea, -0.30424em -0.18823em 13.7px #e9e6eb, -0.30717em -0.19096em 13.9px #eae7ec, -0.31302em -0.19369em 14.1px #ebe8ec, -0.31594em -0.19642em 14.3px #ece9ed, -0.3218em -0.19914em 14.5px #eceaee, -0.32472em -0.20187em 14.7px #edebee, -0.33057em -0.2046em 14.9px #eeebef, -0.3335em -0.20733em 15.1px #eeecf0, -0.33935em -0.21006em 15.3px #efedf0, -0.34227em -0.21278em 15.5px #f0eef1, -0.34812em -0.21551em 15.7px #f1eff2, -0.35105em -0.21824em 15.9px #f1f0f2, -0.3569em -0.22097em 16.1px #f2f0f3, -0.35983em -0.2237em 16.3px #f3f1f4, -0.36568em -0.22642em 16.5px #f3f2f4, -0.3686em -0.22915em 16.7px #f4f3f5, -0.37445em -0.23188em 16.9px #f5f3f6, -0.37738em -0.23461em 17.1px #f5f4f6, -0.38323em -0.23734em 17.3px #f6f5f7, -0.38615em -0.24006em 17.5px #f7f6f7, -0.39201em -0.24279em 17.7px #f7f6f8, -0.39493em -0.24552em 17.9px #f8f7f9, -0.40078em -0.24825em 18.3px #f9f8f9, -0.40371em -0.25098em 18.7px #f9f9fa, -0.40956em -0.2537em 19.1px #faf9fa, -0.41248em -0.25643em 19.5px #fbfafb, -0.41833em -0.25916em 19.9px #fbfbfc, -0.42126em -0.26189em 20.3px #fcfcfc, -0.42711em -0.26462em 20.7px #fdfcfd, -0.43004em -0.26734em 21.7px #fdfdfd, -0.43589em -0.27007em 22.7px #fefefe, -0.43881em -0.2728em 23.7px #fefefe, -0.44466em -0.27553em 24.7px white; /* You could add: */ mix-blend-mode: multiply;
}
.tenue-shadow #one { color: #ff003c;
}
.tenue-shadow #two { color: #ee00ff;
}
.tenue-shadow #three { color: #5500ff;
}
.tenue-shadow #four { color: #00d9ff;
}
.tenue-shadow #five { color: #00ff88;
}
.tenue-shadow #six { color: #ddff00;
}
.tenue-shadow #seven { color: #ff8800;
}
.tenue-extras { font-size: 19vh; letter-spacing: .34em; line-height: 3.5; margin-bottom: .5em; padding-left: .34em; margin-top: 0; overflow: hidden; padding-top: 1em; position: relative; text-align: center; text-transform: none; word-wrap: break-word;
}
.tenue-overlay { background-blend-mode: difference, color; background-image: linear-gradient(45deg, rgba(255, 0, 0, 0) 0%, #ff2424 13%, rgba(255, 36, 255, 0.84) 15%, #c87f5b 25%, rgba(211, 101, 80, 0.73) 33%, #5bc8c8 48%, rgba(91, 200, 200, 0.9) 49%, #c87f5b 57%, #c8c85b 63%, #b6c85b 67%, #d26251 74%, rgba(37, 254, 59, 0.8) 84%, #c7c55c 86%, rgba(37, 254, 59, 0.7) 100%); background-repeat: no-repeat; background-size: cover; height: 400%; left: 0; mix-blend-mode: difference; opacity: .3; position: absolute; top: 0; width: 200%; animation: ring 5s cubic-bezier(0.74, 0.31, 0.37, 0.8) infinite alternate;
}
@keyframes ring { 50% { transform: scale(3); } 100% { transform: translate(-50%, -50%) rotateZ(360deg); }
}
.u-dn { display: none;
}
Rainbow Harmony - Script Codes JS Codes
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; var isFirefox = typeof InstallTrigger !== 'undefined'; var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; var isChrome = !!window.chrome && !isOpera; var isIE = /*@cc_on!@*/false || !!document.documentMode; if(isFirefox || isIE) { document.querySelector('.tenue-overlay').classList.add('u-dn'); }
| Developer | Bailh |
| Username | cathbailh |
| Uploaded | July 12, 2022 |
| Rating | 4.5 |
| Size | 7,996 Kb |
| Views | 46,552 |
Do you need developer help for Rainbow Harmony?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Bailh (cathbailh) Script Codes
| Name | Size |
| Hue Window | 9,558 Kb |
| Dijafragma | 3,206 Kb |
| Harlequin ball | 5,002 Kb |
| Magma | 5,202 Kb |
| Fanzine Radioactive Skull | 144,324 Kb |
| Lunares | 3,801 Kb |
| Sweet chaos in the space of tulle | 3,085 Kb |
| La roue tourne | 56,732 Kb |
| Random City | 5,412 Kb |
| Pistils | 5,248 Kb |
Create amazing video scripts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Mobile Sub Menu Concept | Berdejitendra | 2,790 Kb |
| HTML5 Video Autoplay | Zivcos | 1,352 Kb |
| Simple Carousel Pure CSS | Dangvanthanh | 4,080 Kb |
| Simple DevTools | Deegill | 2,511 Kb |
| JavaScript constructors | Simboonlong | 2,415 Kb |
| Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
| Konami Code Easter Egg | Teolitto | 3,051 Kb |
| Page Transitions in Backbone | Mikefowler | 3,691 Kb |
| Multi column experiment. | Spylefkaditis | 2,805 Kb |
| Fellowship of the Ring | Aussieyang | 2,639 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!