3 Cute HTML Tricks for Your Theme
I've been using these cute effects on my own themes and pages recently, so I decided to share the codes with everyone! 🌸
They are super easy to add and make your blog look extra special. You can see how they look in the preview above! These are "plug and play"—just copy the code block and paste it into your theme's description or a custom page or anywhere you would like this to appear.
1 ) The Gradient Text A simple way to make your text pop with a pink & blue gradient.
<style> .whereinmnl-gradient-text { font-family: sans-serif; font-weight: 800; font-size: 30px; text-transform: uppercase; /* The Magic Gradient Logic */ background: linear-gradient(45deg, #00b4d8, #ffc8dd); -webkit-background-clip: text; /* Clips the background to the text shape */ -webkit-text-fill-color: transparent; /* Makes the text see-through */ display: inline-block; } </style> <span class="whereinmnl-gradient-text">Welcome Home</span>
2 ) The Glitch Effect Header A cool animated glitch effect. Remember to change the data-text="EO" part to match your text so the layers align!
<style> .whereinmnl-glitch { position: relative; font-size: 40px; /* Adjust size */ font-weight: bold; text-transform: uppercase; font-family: 'Courier New', monospace; color: #5f6c7b; letter-spacing: 3px; } /* The Blue Layer */ .whereinmnl-glitch::before { content: attr(data-text); position: absolute; left: -2px; text-shadow: 1px 0 #00b4d8; top: 0; color: #5f6c7b; background: #fff; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: glitch-anim-1 2s infinite linear alternate-reverse; } /* The Pink Layer */ .whereinmnl-glitch::after { content: attr(data-text); position: absolute; left: 2px; text-shadow: -1px 0 #ffc8dd; top: 0; color: #5f6c7b; background: #fff; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: glitch-anim-2 3s infinite linear alternate-reverse; } /* The Keyframes (Don't worry about understanding these, they just make it shake!) */ @keyframes glitch-anim-1 { 0% { clip: rect(20px, 9999px, 10px, 0); } 20% { clip: rect(60px, 9999px, 80px, 0); } 40% { clip: rect(30px, 9999px, 10px, 0); } 60% { clip: rect(80px, 9999px, 50px, 0); } 80% { clip: rect(10px, 9999px, 40px, 0); } 100% { clip: rect(50px, 9999px, 20px, 0); } } @keyframes glitch-anim-2 { 0% { clip: rect(80px, 9999px, 20px, 0); } 20% { clip: rect(10px, 9999px, 50px, 0); } 40% { clip: rect(50px, 9999px, 20px, 0); } 60% { clip: rect(20px, 9999px, 80px, 0); } 80% { clip: rect(70px, 9999px, 30px, 0); } 100% { clip: rect(10px, 9999px, 90px, 0); } } </style> <h1 class="whereinmnl-glitch" data-text="2NE1 IS BACK">2NE1 IS BACK</h1>
3 ) The Clickable FAQ (Accordion) Click to expand! Great for "About Me" or "Commission" pages. No Javascript needed.
<style> .whereinmnl-details { background: #fff; border: 1px solid #e3f2fd; border-radius: 10px; margin-bottom: 10px; overflow: hidden; font-family: sans-serif; } /* The Clickable Header */ .whereinmnl-details summary { background: #e3f2fd; /* Light Blue */ padding: 10px 15px; cursor: pointer; font-weight: bold; color: #5f6c7b; list-style: none; /* Hides default arrow */ position: relative; transition: 0.3s; } /* Hide default marker in Safari */ .whereinmnl-details summary::-webkit-details-marker { display: none; } /* Custom Plus Icon */ .whereinmnl-details summary::after { content: '+'; position: absolute; right: 15px; font-weight: bold; color: #00b4d8; } /* When Open */ .whereinmnl-details[open] summary { background: #ffc8dd; /* Turns Pink */ color: #fff; } .whereinmnl-details[open] summary::after { content: '-'; color: #fff; } /* The Content Inside */ .whereinmnl-details p { padding: 15px; margin: 0; font-size: 12px; line-height: 1.5; color: #555; } </style> <details class="whereinmnl-details"> <summary>Can I use this as a base code?</summary> <p>No, please do not use my themes as a base. You can edit them for personal use only!</p> </details> <details class="whereinmnl-details"> <summary>Do you take commissions?</summary> <p>Yes! My ask box is open for custom requests.</p> </details>
📝 A Little Note: These codes are for personal use only (to decorate your own blog). Please do not use them as a base for themes you intend to redistribute or sell. If you run into issues, double-check that you copied the whole block! Happy coding! 🌸
