Today I needed to convert some WordPress text into a rainbow using CSS. Here’s the result:
After bumbling about a bit, I discovered Shireen Taj’s excellent css rainbow text code. After altering some of the colors and adding an outline to the top layer, my resulting code looked like this:
/*
CSS RAINBOW TEXT
NOTE: ".post-1678" is a specific post in WordPress I was targeting. You can replace ".post-1678 header h1" with whichever html element you are targeting.
*/
.post-1678 header h1{
text-align: center;
color: #fff;
font-size: 90px;
-webkit-text-stroke: 2px black;
text-shadow: 5px 5px 0px #D20004,
10px 10px 0px #FB4A25,
15px 15px 0px #FEF80C,
20px 20px 0px #18B202,
25px 25px 0px #0F86FE,
30px 30px 0px #00006F,
35px 35px 0px #fff,
40px 40px 0px #fff,
45px 45px 0px #fff;
}
@media only screen and (max-width: 710px) {
.post-1678 header h1{
font-size: 40px;
-webkit-text-stroke: 1px black;
text-shadow:
3px 3px 0px #D20004,
5px 5px 0px #FB4A25,
7px 7px 0px #FEF80C,
9px 9px 0px #18B202,
11px 11px 0px #0F86FE,
13px 13px 0px #00006F,
15px 15px 0px #fff,
17px 17px 0px #fff,
19px 19px 0px #fff;
}
}Here’s what it looks like on mobile view:
A link to Shireen’s code as well as many other cool css text effects can be found at https://freefrontend.com/css-text-effects/.
TTYL.
From Toby’s Blog
- Where uncertainty exists, don’t order specific.4 Idiot Case Studies with 2 simple age-old business lessons. The post Where uncertainty exists, don’t order specific. appeared first on Toby Cryns, WordPress Trainer in Minneapolis, MN.
- “Now THAT was a good meeting!”A single effective meeting can change the course of history for a company. Imagine if you could lead effective meetings EVERY DAY! You can, but it takes curiosity & practice. This article is a good place to start your journey to a more effective you. The post “Now THAT was a good meeting!” appeared first […]
- Never Respond to RFPs & Custom Proposal RequestsY'all who work at normal 9-5 jobs don't need to deal with the B.S. that is an RFP process (or rather you get paid to deal with it). But us freelancers gotta deal with a whole big bag of schtuff when it comes to custom proposals. Here's my quick-and-dirty RFP filtering process that I use […]
More posts from themightymo.com
My WordPress Maintenance Process
A few quick things: My WordPress Maintenance Process Demo, Part 1 Transcript: You’ll see immediately after logging in, you see the 11 updates needed as well as some messages. I’m just gonna quickly read. It looks like this. I don’t need to worry about. Are you enjoying Monster Insights? Not really <laugh>. What’s to enjoy…
How to style FacetWP checkbox hierarchy results using jQuery
I recently invested many hours trying to target and style a FacetWP taxonomy facet that uses hierarchy for display. It should be noted that you can use straight up CSS for some styling (and should use css wherever possible), but sometimes you need javascript to target parent elements and such. I thought I’d document the…
How to fix SpinupWP ballooning disk space issue
A site we host on Digital Ocean recently went down. It took me a lot of troubleshooting and digging before realizing that the issue was that our disk space was maxed out on Digital Ocean. The site in question needs ~20gb of space, so our 50gb server should be plenty. But alas, there it was…
From Toby’s Blog
- Where uncertainty exists, don’t order specific.4 Idiot Case Studies with 2 simple age-old business lessons. The post Where uncertainty exists, don’t order specific. appeared first on Toby Cryns, WordPress Trainer in Minneapolis, MN.
- “Now THAT was a good meeting!”A single effective meeting can change the course of history for a company. Imagine if you could lead effective meetings EVERY DAY! You can, but it takes curiosity & practice. This article is a good place to start your journey to a more effective you. The post “Now THAT was a good meeting!” appeared first […]
- Never Respond to RFPs & Custom Proposal RequestsY'all who work at normal 9-5 jobs don't need to deal with the B.S. that is an RFP process (or rather you get paid to deal with it). But us freelancers gotta deal with a whole big bag of schtuff when it comes to custom proposals. Here's my quick-and-dirty RFP filtering process that I use […]