Text shadow effects can transform ordinary text into eye-catching design elements. These effects add depth and dimension, making your content stand out.
In this article, we'll explore 10 stunning text shadow effect examples that you can easily implement in your projects. Get ready to elevate your typography game!
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers, elevate your text shadow effects with Subframe's drag-and-drop interface. Its intuitive, responsive canvas ensures pixel-perfect UI every time.
Loved by creatives, Subframe makes stunning design effortless. Start for free and transform your projects today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your UI design game? With Subframe, you can create stunning, pixel-perfect interfaces in minutes. Effortlessly design text shadow effects and more with our intuitive drag-and-drop editor.
Experience the efficiency and creativity Subframe offers. Start for free and begin crafting beautiful UIs right away!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Social Media Profile Headers</title> <style> :root { --primary-color: #ff3366; --secondary-color: #6633ff; --tertiary-color: #33ff99; --dark-color: #24283b; --light-color: #ffffff; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--dark-color); color: var(--light-color); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100vh; width: 100%; max-width: 700px; margin: 0 auto; overflow-x: hidden; padding: 20px; } .header { text-align: center; margin: 15px 0 30px; } .header h1 { font-size: 2.5rem; font-weight: 800; background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 20px rgba(255, 51, 102, 0.6); margin-bottom: 10px; letter-spacing: 1px; } .header p { color: #aab2cd; max-width: 600px; margin: 0 auto; font-size: 1rem; line-height: 1.6; } .profiles-container { width: 100%; display: flex; flex-direction: column; gap: 25px; } .profile-card { background: rgba(42, 46, 66, 0.7); border-radius: 15px; backdrop-filter: blur(10px); padding: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .profile-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); } .profile-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); pointer-events: none; opacity: 0; transition: opacity 0.5s ease; } .profile-card:hover::before { opacity: 1; } .username { font-size: 1.8rem; font-weight: 700; margin-bottom: 10px; position: relative; display: inline-block; cursor: pointer; transition: all 0.3s ease; } .gaming .username { color: var(--primary-color); text-shadow: 0 0 15px rgba(255, 51, 102, 0.8); } .creative .username { color: var(--secondary-color); text-shadow: 0 0 15px rgba(102, 51, 255, 0.8); } .business .username { color: var(--tertiary-color); text-shadow: 0 0 15px rgba(51, 255, 153, 0.8); } .username:hover { transform: scale(1.05); } .gaming .username:hover { text-shadow: 0 0 25px rgba(255, 51, 102, 1), 0 0 35px rgba(255, 51, 102, 0.6); letter-spacing: 1px; } .creative .username:hover { text-shadow: 0 0 25px rgba(102, 51, 255, 1), 0 0 35px rgba(102, 51, 255, 0.6); letter-spacing: 1px; } .business .username:hover { text-shadow: 0 0 25px rgba(51, 255, 153, 1), 0 0 35px rgba(51, 255, 153, 0.6); letter-spacing: 1px; } .headline { font-size: 1.1rem; margin-bottom: 15px; line-height: 1.4; transition: all 0.3s ease; opacity: 0.8; } .headline:hover { opacity: 1; } .profile-stats { display: flex; gap: 15px; font-size: 0.9rem; color: #aab2cd; } .stat { display: flex; align-items: center; gap: 5px; } .stat i { font-size: 1rem; } .customizer { margin-top: 30px; background: rgba(42, 46, 66, 0.8); border-radius: 15px; padding: 20px; width: 100%; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); } .customizer h3 { margin-bottom: 15px; font-size: 1.3rem; text-align: center; color: #e0e0ff; } .color-pickers { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 15px; } .color-picker { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; } .color-picker label { font-size: 0.85rem; color: #aab2cd; } .color-picker input[type="color"] { width: 40px; height: 40px; border: none; border-radius: 50%; background: none; cursor: pointer; overflow: hidden; } .shadow-controls { display: flex; justify-content: space-between; gap: 10px; } .shadow-control { display: flex; flex-direction: column; gap: 8px; flex: 1; } .shadow-control label { font-size: 0.85rem; color: #aab2cd; } .shadow-control input[type="range"] { width: 100%; appearance: none; height: 6px; border-radius: 5px; background: #3a3f5a; outline: none; } .shadow-control input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color); cursor: pointer; transition: all 0.2s ease; } .shadow-control input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); } .preview-section { margin-top: 20px; text-align: center; } .preview-text { display: inline-block; font-size: 2rem; font-weight: 700; margin: 20px 0; text-shadow: 0 0 15px rgba(255, 51, 102, 0.8); color: var(--primary-color); transition: all 0.3s ease; cursor: pointer; } .preview-text:hover { transform: scale(1.05); letter-spacing: 1px; } .apply-button { background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); color: white; border: none; border-radius: 8px; padding: 12px 25px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 15px; box-shadow: 0 6px 15px rgba(255, 51, 102, 0.3); } .apply-button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255, 51, 102, 0.4); } /* Sparkle effect */ .sparkle { position: absolute; width: 4px; height: 4px; background-color: white; border-radius: 50%; pointer-events: none; opacity: 0; z-index: 10; } /* Responsive styles */ @media (max-width: 600px) { .header h1 { font-size: 2rem; } .username { font-size: 1.5rem; } .color-pickers, .shadow-controls { flex-direction: column; gap: 15px; } .color-picker, .shadow-control { flex-direction: row; align-items: center; justify-content: space-between; } .color-picker label, .shadow-control label { flex: 1; text-align: left; } } </style> </head> <body> <div class="header"> <h1>GLOW PROFILE</h1> <p>Create eye-catching profile headers with dynamic text shadows that reflect your personal brand. Customize your online presence with stunning visual effects.</p> </div> <div class="profiles-container"> <div class="profile-card gaming"> <h2 class="username">NeonSniper</h2> <p class="headline">Professional FPS Streamer | 3x Tournament Champion | "The shadows are where I thrive"</p> <div class="profile-stats"> <div class="stat"><i>👥</i> 1.2M Followers</div> <div class="stat"><i>🎮</i> 342 Streams</div> <div class="stat"><i>🏆</i> 28 Victories</div> </div> </div> <div class="profile-card creative"> <h2 class="username">PixelDreamer</h2> <p class="headline">Digital Artist | Character Designer | "Creating worlds one pixel at a time"</p> <div class="profile-stats"> <div class="stat"><i>👥</i> 845K Followers</div> <div class="stat"><i>🎨</i> 217 Artworks</div> <div class="stat"><i>💖</i> 3.1M Likes</div> </div> </div> <div class="profile-card business"> <h2 class="username">FutureVentures</h2> <p class="headline">Tech Investment | Startup Mentor | "Building tomorrow's unicorns today"</p> <div class="profile-stats"> <div class="stat"><i>👥</i> 386K Followers</div> <div class="stat"><i>💼</i> 42 Investments</div> <div class="stat"><i>📈</i> 91% Success Rate</div> </div> </div> </div> <div class="customizer"> <h3>Customize Your Glow</h3> <div class="color-pickers"> <div class="color-picker"> <label>Text Color</label> <input type="color" id="textColor" value="#ff3366"> </div> <div class="color-picker"> <label>Shadow Color</label> <input type="color" id="shadowColor" value="#ff3366"> </div> </div> <div class="shadow-controls"> <div class="shadow-control"> <label>Blur Intensity</label> <input type="range" id="blurRange" min="0" max="50" value="15"> </div> <div class="shadow-control"> <label>Glow Spread</label> <input type="range" id="spreadRange" min="0" max="50" value="15"> </div> </div> <div class="preview-section"> <h4 class="preview-text" id="previewText">Your Username</h4> <button class="apply-button" id="applyButton">Apply to All Profiles</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Elements const textColorInput = document.getElementById('textColor'); const shadowColorInput = document.getElementById('shadowColor'); const blurRange = document.getElementById('blurRange'); const spreadRange = document.getElementById('spreadRange'); const previewText = document.getElementById('previewText'); const applyButton = document.getElementById('applyButton'); const usernames = document.querySelectorAll('.username'); // Update preview text function updatePreview() { const textColor = textColorInput.value; const shadowColor = shadowColorInput.value; const blurValue = blurRange.value; const spreadValue = spreadRange.value; previewText.style.color = textColor; previewText.style.textShadow = `0 0 ${blurValue}px ${shadowColor}, 0 0 ${spreadValue}px ${shadowColor}`; } // Apply to all profiles function applyToProfiles() { const textColor = textColorInput.value; const shadowColor = shadowColorInput.value; const blurValue = blurRange.value; const spreadValue = spreadRange.value; usernames.forEach(username => { username.style.color = textColor; username.style.textShadow = `0 0 ${blurValue}px ${shadowColor}, 0 0 ${spreadValue}px ${shadowColor}`; // Get the profile card and update hover effects const profileCard = username.closest('.profile-card'); if (profileCard) { // Create a style for hover effect const styleSheet = document.styleSheets[0]; const selector = `.${profileCard.classList[1]} .username:hover`; // Remove any previous style with this selector for (let i = 0; i < styleSheet.cssRules.length; i++) { if (styleSheet.cssRules[i].selectorText === selector) { styleSheet.deleteRule(i); break; } } // Add new style const rule = `${selector} { text-shadow: 0 0 ${blurValue * 1.5}px ${shadowColor}, 0 0 ${spreadValue * 1.5}px ${shadowColor}; letter-spacing: 1px; }`; styleSheet.insertRule(rule, styleSheet.cssRules.length); } }); // Show success animation createSparkles(applyButton); } // Create sparkle effect around an element function createSparkles(element) { for (let i = 0; i < 20; i++) { const sparkle = document.createElement('div'); sparkle.classList.add('sparkle'); document.body.appendChild(sparkle); const rect = element.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; const angle = Math.random() * Math.PI * 2; const distance = Math.random() * 100 + 50; const startX = centerX + Math.cos(angle) * 20; const startY = centerY + Math.sin(angle) * 20; const endX = centerX + Math.cos(angle) * distance; const endY = centerY + Math.sin(angle) * distance; sparkle.style.left = `${startX}px`; sparkle.style.top = `${startY}px`; // Random color based on current shadow color const shadowColor = shadowColorInput.value; sparkle.style.backgroundColor = shadowColor; sparkle.style.boxShadow = `0 0 5px ${shadowColor}`; // Animate the sparkle setTimeout(() => { sparkle.style.transition = 'all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)'; sparkle.style.opacity = '1'; sparkle.style.transform = 'scale(2)'; sparkle.style.left = `${endX}px`; sparkle.style.top = `${endY}px`; setTimeout(() => { sparkle.style.opacity = '0'; setTimeout(() => { document.body.removeChild(sparkle); }, 600); }, 300); }, Math.random() * 200); } } // Interactive username hover effect usernames.forEach(username => { username.addEventListener('mouseover', () => { createSparkles(username); }); }); // Event listeners textColorInput.addEventListener('input', updatePreview); shadowColorInput.addEventListener('input', updatePreview); blurRange.addEventListener('input', updatePreview); spreadRange.addEventListener('input', updatePreview); applyButton.addEventListener('click', applyToProfiles); // Initialize preview updatePreview(); }); </script> </body> </html>
<html> <head> <title>NextGen Tech | Future-Forward Innovations</title> <style> @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200;400;700&display=swap'); :root { --primary-color: #0ff7ff; --secondary-color: #6e17ff; --accent-color: #ff2cdf; --dark-bg: #060626; --light-bg: #0f0f3d; --text-color: #e6e6ff; --metallic: linear-gradient(145deg, #2a2a5a, #474787, #2a2a5a); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Space Grotesk', sans-serif; } body { background-color: var(--dark-bg); color: var(--text-color); height: 100vh; width: 100%; overflow-x: hidden; position: relative; scroll-behavior: smooth; } .container { max-width: 700px; height: 700px; margin: 0 auto; padding: 1rem; overflow-y: auto; position: relative; scrollbar-width: thin; scrollbar-color: var(--accent-color) var(--dark-bg); } .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-track { background: var(--dark-bg); } .container::-webkit-scrollbar-thumb { background-color: var(--accent-color); border-radius: 20px; } .grid-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(6, 6, 38, 0.97) 1px, transparent 1px), linear-gradient(90deg, rgba(6, 6, 38, 0.97) 1px, transparent 1px); background-size: 20px 20px; background-position: center center; z-index: -1; opacity: 0.3; } .nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid rgba(110, 23, 255, 0.3); position: sticky; top: 0; backdrop-filter: blur(10px); z-index: 100; background-color: rgba(6, 6, 38, 0.7); } .logo { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--primary-color); font-size: 1.5rem; letter-spacing: -1px; position: relative; } .logo::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--primary-color), transparent); } .nav-links { display: flex; gap: 1.5rem; } .nav-link { color: var(--text-color); text-decoration: none; font-size: 0.85rem; transition: all 0.3s ease; position: relative; opacity: 0.8; } .nav-link:hover { color: var(--primary-color); opacity: 1; } .nav-link::before { content: ""; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%) scaleX(0); width: 100%; height: 1px; background-color: var(--primary-color); transition: transform 0.3s ease; } .nav-link:hover::before { transform: translateX(-50%) scaleX(1); } .hero { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 2rem 0; position: relative; } .hero::before { content: ""; position: absolute; right: -120px; top: 50%; transform: translateY(-50%); width: 250px; height: 250px; background: radial-gradient(circle, rgba(110, 23, 255, 0.4) 0%, rgba(15, 247, 255, 0.1) 70%, transparent 100%); border-radius: 50%; filter: blur(60px); z-index: -1; animation: pulse 8s infinite alternate; } @keyframes pulse { 0% { opacity: 0.5; transform: translateY(-50%) scale(0.8); } 100% { opacity: 0.8; transform: translateY(-50%) scale(1.2); } } .neon-heading { font-size: 3.5rem; font-weight: 700; line-height: 1.1; margin-bottom: 1.5rem; background: linear-gradient(to right, var(--primary-color), var(--accent-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; text-shadow: 0 0 5px rgba(15, 247, 255, 0.7), 0 0 10px rgba(15, 247, 255, 0.5), 0 0 20px rgba(15, 247, 255, 0.3), 0 0 30px rgba(15, 247, 255, 0.1), 2px 2px 2px rgba(110, 23, 255, 0.5); transform-style: preserve-3d; perspective: 1000px; } .subheading { font-size: 1.1rem; font-weight: 400; max-width: 80%; margin-bottom: 2rem; line-height: 1.6; opacity: 0.9; } .cta-button { background: var(--metallic); color: var(--text-color); border: none; padding: 0.8rem 2rem; font-size: 1rem; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); z-index: 1; } .cta-button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: all 0.5s ease; z-index: -1; } .cta-button:hover::before { left: 100%; } .cta-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } .section-title { font-size: 2rem; font-weight: 600; margin: 3rem 0 1.5rem; color: var(--primary-color); position: relative; display: inline-block; text-shadow: 0 0 5px rgba(15, 247, 255, 0.5), 0 0 10px rgba(15, 247, 255, 0.3); } .section-title::after { content: ""; position: absolute; bottom: -10px; left: 0; width: 60%; height: 3px; background: linear-gradient(90deg, var(--primary-color), transparent); } .tech-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .tech-card { background: var(--light-bg); border-radius: 8px; padding: 1.5rem; transition: all 0.3s ease; position: relative; overflow: hidden; border: 1px solid rgba(110, 23, 255, 0.3); backdrop-filter: blur(5px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .tech-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(15, 247, 255, 0.15); border-color: rgba(110, 23, 255, 0.6); } .tech-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(110, 23, 255, 0.1), transparent); opacity: 0; transition: opacity 0.3s ease; z-index: -1; } .tech-card:hover::before { opacity: 1; } .tech-icon { font-size: 2rem; margin-bottom: 1rem; color: var(--accent-color); text-shadow: 0 0 10px rgba(255, 44, 223, 0.5); } .tech-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--primary-color); } .tech-desc { font-size: 0.9rem; line-height: 1.5; opacity: 0.8; } .metallic-section { margin: 4rem 0; padding: 2rem; border-radius: 10px; background: var(--metallic); position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(255, 255, 255, 0.1); } .metallic-section::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( 45deg, transparent, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0.05) 40%, transparent 60% ); transform: rotate(45deg); animation: shimmer 8s linear infinite; } @keyframes shimmer { 0% { transform: translateX(-100%) rotate(45deg); } 100% { transform: translateX(100%) rotate(45deg); } } .metallic-title { font-size: 1.8rem; margin-bottom: 1rem; color: var(--primary-color); text-shadow: 0 0 5px rgba(15, 247, 255, 0.7), 1px 1px 2px rgba(0, 0, 0, 0.5); position: relative; z-index: 1; } .metallic-content { font-size: 1rem; line-height: 1.6; position: relative; z-index: 1; } .tech-spec { display: flex; margin-top: 1rem; gap: 1rem; position: relative; z-index: 1; } .spec-item { display: flex; flex-direction: column; align-items: center; flex: 1; } .spec-value { font-size: 2rem; font-weight: 700; color: var(--accent-color); margin-bottom: 0.3rem; } .spec-label { font-size: 0.85rem; opacity: 0.8; text-align: center; } .footer { margin-top: 4rem; padding: 2rem 0; text-align: center; font-size: 0.85rem; opacity: 0.7; position: relative; } .footer::before { content: ""; position: absolute; top: 0; left: 10%; width: 80%; height: 1px; background: linear-gradient(to right, transparent, var(--primary-color), transparent); } .glitch-button { position: relative; display: inline-block; color: var(--text-color); background: transparent; border: 1px solid var(--primary-color); padding: 0.8rem 2rem; font-size: 1rem; border-radius: 4px; cursor: pointer; margin-top: 1.5rem; overflow: hidden; text-decoration: none; font-family: 'JetBrains Mono', monospace; } .glitch-button:hover { background-color: rgba(15, 247, 255, 0.1); } .glitch-button::before { content: "EXPLORE"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--dark-bg); color: var(--primary-color); display: flex; align-items: center; justify-content: center; transform: translateX(0); transition: transform 0.2s ease; } .glitch-button:hover::before { transform: translateX(-100%); } .glitch-button::after { content: "THE FUTURE"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--dark-bg); color: var(--accent-color); display: flex; align-items: center; justify-content: center; transform: translateX(100%); transition: transform 0.2s ease; } .glitch-button:hover::after { transform: translateX(0); } @media (max-width: 600px) { .neon-heading { font-size: 2.5rem; } .subheading { font-size: 1rem; max-width: 100%; } .tech-cards { grid-template-columns: 1fr; } .nav-links { gap: 1rem; } .nav-link { font-size: 0.75rem; } .hero::before { right: -50%; width: 200px; height: 200px; } } /* Animated cursor */ .cursor { pointer-events: none; position: fixed; width: 20px; height: 20px; border-radius: 50%; background-color: rgba(15, 247, 255, 0.2); transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s; z-index: 1000; mix-blend-mode: screen; } .cursor::after { content: ""; position: absolute; width: 6px; height: 6px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background-color: var(--primary-color); box-shadow: 0 0 10px var(--primary-color); } </style> </head> <body> <div class="grid-background"></div> <div class="cursor"></div> <div class="container"> <nav class="nav"> <div class="logo">QUANTUM:X</div> <div class="nav-links"> <a href="#" class="nav-link">HOME</a> <a href="#" class="nav-link">INNOVATIONS</a> <a href="#" class="nav-link">RESEARCH</a> <a href="#" class="nav-link">ABOUT</a> </div> </nav> <section class="hero"> <h1 class="neon-heading">Neural Tech<br>Beyond Limits</h1> <p class="subheading">Pioneering neurosynthetic interfaces that merge biological cognition with quantum computing algorithms. The future isn't just predicted—it's synthesized.</p> <button class="cta-button">INITIATE NEURAL SYNC</button> </section> <h2 class="section-title">Breakthrough Technologies</h2> <div class="tech-cards"> <div class="tech-card"> <div class="tech-icon">⟁</div> <h3 class="tech-title">Quantum Neural Nodes</h3> <p class="tech-desc">Zero-latency thought transmission utilizing entangled particle matrices, enabling immediate cognitive downloads across any distance.</p> </div> <div class="tech-card"> <div class="tech-icon">⎔</div> <h3 class="tech-title">Biomimetic Circuitry</h3> <p class="tech-desc">Self-healing circuits modeled after neuroplasticity, with 400% more efficiency than traditional silicon pathways.</p> </div> <div class="tech-card"> <div class="tech-icon">⌬</div> <h3 class="tech-title">Holographic Memory</h3> <p class="tech-desc">Crystalline storage matrices that encode data as light interference patterns, achieving 1 petabyte per cubic nanometer.</p> </div> </div> <div class="metallic-section"> <h2 class="metallic-title">NEXUS PROJECT: Breaking Reality Barriers</h2> <p class="metallic-content">Our flagship initiative merges consciousness with synthetic intelligence through a revolutionary graphene-based neural lace. Early clinical trials show users experiencing accelerated learning curves and unprecedented problem-solving capabilities.</p> <div class="tech-spec"> <div class="spec-item"> <span class="spec-value">7.2x</span> <span class="spec-label">Cognitive Enhancement</span> </div> <div class="spec-item"> <span class="spec-value">0.3ms</span> <span class="spec-label">Neural Latency</span> </div> <div class="spec-item"> <span class="spec-value">142TB</span> <span class="spec-label">Memory Capacity</span> </div> </div> <a href="#" class="glitch-button">EXPLORE</a> </div> <h2 class="section-title">Evolution Timeline</h2> <div class="tech-cards"> <div class="tech-card"> <div class="tech-icon">⏳</div> <h3 class="tech-title">2025: Neural Interface</h3> <p class="tech-desc">First commercial non-invasive brain-computer interface utilizing quantum resonance for direct thought control of digital environments.</p> </div> <div class="tech-card"> <div class="tech-icon">⌛</div> <h3 class="tech-title">2027: Synthetic Cognition</h3> <p class="tech-desc">Deployment of autonomous cognitive architecture capable of true creativity and ethical reasoning beyond simulated responses.</p> </div> <div class="tech-card"> <div class="tech-icon">∞</div> <h3 class="tech-title">2030: Collective Intelligence</h3> <p class="tech-desc">Launch of global consciousness network allowing opt-in shared experiences and collaborative problem-solving across humanity.</p> </div> </div> <footer class="footer"> QUANTUM:X LABS © 2023 | Redefining the boundaries between mind and machine </footer> </div> <script> // Parallax effect for neon heading const neonHeading = document.querySelector('.neon-heading'); document.addEventListener('mousemove', (e) => { const x = (window.innerWidth / 2 - e.clientX) / 50; const y = (window.innerHeight / 2 - e.clientY) / 50; neonHeading.style.transform = `translateZ(20px) rotateX(${y}deg) rotateY(${-x}deg)`; }); // Custom cursor const cursor = document.querySelector('.cursor'); document.addEventListener('mousemove', (e) => { cursor.style.left = `${e.clientX}px`; cursor.style.top = `${e.clientY}px`; }); document.addEventListener('mousedown', () => { cursor.style.width = '15px'; cursor.style.height = '15px'; }); document.addEventListener('mouseup', () => { cursor.style.width = '20px'; cursor.style.height = '20px'; }); // Intersection Observer for fade-in animations const observerOptions = { threshold: 0.25 }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Apply animation to cards and sections const cards = document.querySelectorAll('.tech-card'); const sections = document.querySelectorAll('.section-title, .metallic-section'); cards.forEach((card, index) => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; card.style.transition = `all 0.5s ease ${index * 0.1}s`; observer.observe(card); }); sections.forEach((section) => { section.style.opacity = '0'; section.style.transform = 'translateY(20px)'; section.style.transition = 'all 0.5s ease'; observer.observe(section); }); // Button interactions const ctaButton = document.querySelector('.cta-button'); ctaButton.addEventListener('click', function() { this.innerHTML = "SYNCHRONIZING..."; setTimeout(() => { this.innerHTML = "NEURAL LINK ACTIVE"; }, 2000); }); // Tech card hover effects document.querySelectorAll('.tech-card').forEach(card => { card.addEventListener('mouseenter', function() { const icon = this.querySelector('.tech-icon'); icon.style.transform = 'translateY(-5px) scale(1.2)'; icon.style.transition = 'transform 0.3s ease'; }); card.addEventListener('mouseleave', function() { const icon = this.querySelector('.tech-icon'); icon.style.transform = 'translateY(0) scale(1)'; }); }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 700px; background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f2 100%); padding: 20px; } .container { max-width: 660px; width: 100%; padding: 40px; border-radius: 20px; background-color: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); text-align: center; } h1 { font-size: 28px; margin-bottom: 15px; color: #333; font-weight: 700; } p { font-size: 16px; line-height: 1.6; color: #666; margin-bottom: 30px; } .buttons-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 40px; } .cta-button { position: relative; padding: 16px 24px; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; overflow: hidden; color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); outline: none; } .cta-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%); opacity: 0; transition: opacity 0.3s ease; } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); } .cta-button:hover::before { opacity: 1; } .cta-button:active { transform: translateY(-1px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .cta-button.primary { background: linear-gradient(45deg, #4776E6 0%, #8E54E9 100%); } .cta-button.secondary { background: linear-gradient(45deg, #FF416C 0%, #FF4B2B 100%); } .cta-button.tertiary { background: linear-gradient(45deg, #11998e 0%, #38ef7d 100%); } .cta-button.quaternary { background: linear-gradient(45deg, #F7971E 0%, #FFD200 100%); color: #333; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3); } .cta-button span { position: relative; z-index: 1; display: inline-block; transition: transform 0.3s ease; } .cta-button:hover span { transform: scale(1.05); } .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } .custom-section { margin-top: 40px; background: linear-gradient(to right, #f6f9fc, #ecf1f8); padding: 25px; border-radius: 15px; position: relative; overflow: hidden; } .custom-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, #4776E6, #8E54E9, #FF416C, #FF4B2B, #11998e, #38ef7d, #F7971E, #FFD200); animation: rainbowShift 8s linear infinite; } @keyframes rainbowShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .custom-buttons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; } .toggle-button { position: relative; padding: 12px 25px; border-radius: 30px; background-color: #fff; color: #333; border: 2px solid #e0e0e0; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); overflow: hidden; } .toggle-button:hover, .toggle-button.active { border-color: #4776E6; color: #4776E6; text-shadow: 0 2px 4px rgba(71, 118, 230, 0.3); } .toggle-button.active { background-color: rgba(71, 118, 230, 0.1); } @media (max-width: 600px) { .container { padding: 25px; } h1 { font-size: 24px; } .buttons-container { grid-template-columns: 1fr; } .custom-buttons { flex-direction: column; align-items: center; } .toggle-button { width: 100%; max-width: 250px; } } </style> </head> <body> <div class="container"> <h1>Interactive Call-to-Action Buttons</h1> <p>Experience the subtle power of text shadows that intensify on hover, providing clear visual feedback while maintaining a clean, professional layout. These buttons are designed to guide users through key conversion paths with elegant visual cues.</p> <div class="buttons-container"> <button class="cta-button primary"> <span>Start Free Trial</span> </button> <button class="cta-button secondary"> <span>View Pricing Plans</span> </button> <button class="cta-button tertiary"> <span>Schedule Demo</span> </button> <button class="cta-button quaternary"> <span>Explore Features</span> </button> </div> <div class="custom-section"> <h2 style="margin-bottom: 15px; font-size: 20px; color: #444;">Contextual Button States</h2> <p style="margin-bottom: 25px; font-size: 15px;">Toggle between different options to see how shadow effects can enhance state visualization.</p> <div class="custom-buttons"> <button class="toggle-button active" data-option="monthly">Monthly Billing</button> <button class="toggle-button" data-option="annual">Annual Billing</button> <button class="toggle-button" data-option="enterprise">Enterprise Plan</button> </div> </div> </div> <script> // Ripple effect for CTA buttons document.querySelectorAll('.cta-button').forEach(button => { button.addEventListener('click', function(e) { let x = e.clientX - e.target.getBoundingClientRect().left; let y = e.clientY - e.target.getBoundingClientRect().top; let ripple = document.createElement('span'); ripple.classList.add('ripple'); ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); // Toggle functionality for option buttons document.querySelectorAll('.toggle-button').forEach(button => { button.addEventListener('click', function() { // Remove active class from all buttons document.querySelectorAll('.toggle-button').forEach(btn => { btn.classList.remove('active'); }); // Add active class to clicked button this.classList.add('active'); // Get the selected option const option = this.getAttribute('data-option'); console.log(`Selected option: ${option}`); // Here you would typically update UI or perform actions based on the selected option // For demonstration purposes, we're just logging the selection }); }); // Add hover effect to make buttons more interactive document.querySelectorAll('.cta-button, .toggle-button').forEach(button => { button.addEventListener('mouseenter', function() { this.style.transition = 'all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)'; }); button.addEventListener('mouseleave', function() { this.style.transition = 'all 0.3s ease'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shadow Surge - Dynamic Gaming Experience</title> <style> :root { --primary: #ff3366; --secondary: #33ccff; --accent: #ffcc00; --dark: #221133; --light: #f8f8ff; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background: var(--dark); color: var(--light); width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; } .container { width: 100%; max-width: 700px; height: 700px; padding: 20px; position: relative; display: flex; flex-direction: column; justify-content: space-between; border-radius: 15px; background: linear-gradient(135deg, rgba(34, 17, 51, 0.9), rgba(34, 17, 51, 0.7)); backdrop-filter: blur(10px); overflow: hidden; } .header { text-align: center; margin-bottom: 20px; position: relative; z-index: 2; } .logo { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; background: linear-gradient(to right, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 15px rgba(255, 51, 102, 0.3); transform-origin: center; animation: pulse 2s infinite alternate; } .tagline { font-size: 1rem; color: var(--light); opacity: 0.8; margin-bottom: 1.5rem; } .game-preview { position: relative; width: 100%; height: 300px; background: rgba(0, 0, 0, 0.2); border-radius: 12px; overflow: hidden; margin-bottom: 20px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } .game-preview img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; } .game-preview:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); } .game-title { position: absolute; bottom: 20px; left: 20px; font-size: 1.8rem; font-weight: 700; color: white; z-index: 2; transition: all 0.3s ease; } .game-title.shadow-animate { text-shadow: 2px 2px 0 var(--primary), 4px 4px 0 var(--secondary), 6px 6px 0 var(--accent); animation: textShadowPulse 2s infinite alternate; } .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 20px; } .feature-card { background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 15px; transition: all 0.3s ease; position: relative; overflow: hidden; cursor: pointer; } .feature-card:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-3px); } .feature-card h3 { font-size: 1rem; margin-bottom: 8px; position: relative; z-index: 1; transition: text-shadow 0.3s ease; } .feature-card p { font-size: 0.8rem; opacity: 0.8; position: relative; z-index: 1; } .feature-card:hover h3 { text-shadow: 3px 3px 0 var(--primary); } .feature-icon { position: absolute; right: 10px; top: 10px; font-size: 1.5rem; opacity: 0.2; transition: all 0.3s ease; } .feature-card:hover .feature-icon { opacity: 0.4; transform: scale(1.2) rotate(10deg); } .download-btn { background: linear-gradient(45deg, var(--primary), var(--secondary)); color: white; border: none; border-radius: 30px; padding: 15px 30px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; width: 100%; margin-top: 10px; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 5px 15px rgba(255, 51, 102, 0.3); } .download-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 51, 102, 0.5); } .download-btn:active { transform: translateY(0); } .download-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: all 0.5s ease; } .download-btn:hover::before { left: 100%; } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .particle { position: absolute; border-radius: 50%; opacity: 0.5; animation: float 20s linear infinite; } .interaction-zone { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: flex; justify-content: center; align-items: center; } .touch-text { font-size: 2rem; font-weight: 800; text-align: center; color: transparent; opacity: 0; transition: all 0.3s ease; text-shadow: 2px 2px 0 var(--primary), 4px 4px 0 var(--secondary), 6px 6px 0 var(--accent); } .interaction-zone:hover .touch-text { opacity: 1; color: white; animation: touchPulse 1.5s infinite alternate; } .shadow-demo { margin-top: 10px; padding: 15px; text-align: center; background: rgba(0, 0, 0, 0.2); border-radius: 10px; } .demo-text { font-size: 1.2rem; font-weight: 600; margin-bottom: 15px; transition: all 0.3s ease; display: inline-block; color: white; } .shadow-slider { width: 100%; margin-bottom: 15px; appearance: none; height: 5px; background: rgba(255, 255, 255, 0.2); border-radius: 5px; cursor: pointer; } .shadow-slider::-webkit-slider-thumb { appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--primary); cursor: pointer; transition: all 0.3s ease; } .shadow-slider::-webkit-slider-thumb:hover { transform: scale(1.3); background: var(--secondary); } @keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.05); } } @keyframes textShadowPulse { 0% { text-shadow: 2px 2px 0 var(--primary), 4px 4px 0 var(--secondary), 6px 6px 0 var(--accent); } 100% { text-shadow: 3px 3px 0 var(--secondary), 6px 6px 0 var(--accent), 9px 9px 0 var(--primary); } } @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-1000%) rotate(360deg); } } @keyframes touchPulse { 0% { text-shadow: 2px 2px 0 var(--primary), 4px 4px 0 var(--secondary), 6px 6px 0 var(--accent); } 100% { text-shadow: 4px 4px 0 var(--secondary), 8px 8px 0 var(--accent), 12px 12px 0 var(--primary); } } /* Responsive adjustments */ @media (max-width: 600px) { .logo { font-size: 2rem; } .game-title { font-size: 1.5rem; } .features { grid-template-columns: 1fr; } .touch-text { font-size: 1.5rem; } } </style> </head> <body> <div class="container"> <div class="header"> <h1 class="logo">SHADOW SURGE</h1> <p class="tagline">Experience games with dynamic text shadows that respond to your every touch</p> </div> <div class="game-preview"> <div class="interaction-zone"> <div class="touch-text">TAP & FEEL THE SURGE</div> </div> <div class="game-title">NEON RACER</div> </div> <div class="features"> <div class="feature-card"> <div class="feature-icon">✦</div> <h3>Dynamic Shadows</h3> <p>Text shadows that shift and pulse with your in-game actions</p> </div> <div class="feature-card"> <div class="feature-icon">⟁</div> <h3>Touch Responsive</h3> <p>Visual effects that react to swipes, taps and holds</p> </div> <div class="feature-card"> <div class="feature-icon">⌘</div> <h3>Immersive Play</h3> <p>Enhanced gameplay with visual feedback that feels alive</p> </div> <div class="feature-card"> <div class="feature-icon">⎔</div> <h3>Energy Boost</h3> <p>Vibrant colors that shift during intense gameplay moments</p> </div> </div> <div class="shadow-demo"> <span class="demo-text" id="demoText">Try Shadow Effects</span> <input type="range" min="0" max="100" value="50" class="shadow-slider" id="shadowSlider"> </div> <button class="download-btn">Download Shadow Surge</button> <div class="particles" id="particles"></div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Create particles const particles = document.getElementById('particles'); const colors = ['#ff3366', '#33ccff', '#ffcc00']; for (let i = 0; i < 20; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random properties const size = Math.random() * 15 + 5; const color = colors[Math.floor(Math.random() * colors.length)]; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.background = color; particle.style.left = `${Math.random() * 100}%`; particle.style.top = `${Math.random() * 100}%`; particle.style.animationDuration = `${Math.random() * 20 + 10}s`; particle.style.animationDelay = `${Math.random() * 5}s`; particles.appendChild(particle); } // Game preview and title interaction const gamePreview = document.querySelector('.game-preview'); const gameTitle = document.querySelector('.game-title'); gamePreview.addEventListener('mousemove', (e) => { const rect = gamePreview.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const xOffset = (x / rect.width - 0.5) * 20; const yOffset = (y / rect.height - 0.5) * 10; gameTitle.style.textShadow = ` ${xOffset * 0.5}px ${yOffset * 0.5}px 0 rgba(255, 51, 102, 0.8), ${xOffset}px ${yOffset}px 0 rgba(51, 204, 255, 0.6), ${xOffset * 1.5}px ${yOffset * 1.5}px 0 rgba(255, 204, 0, 0.4) `; }); gamePreview.addEventListener('mouseenter', () => { gameTitle.classList.add('shadow-animate'); }); gamePreview.addEventListener('mouseleave', () => { gameTitle.classList.remove('shadow-animate'); gameTitle.style.textShadow = ''; }); // Feature cards interaction const featureCards = document.querySelectorAll('.feature-card'); featureCards.forEach(card => { card.addEventListener('mousemove', (e) => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const title = card.querySelector('h3'); const xOffset = (x / rect.width - 0.5) * 10; const yOffset = (y / rect.height - 0.5) * 5; title.style.textShadow = `${xOffset}px ${yOffset}px 0 rgba(255, 51, 102, 0.8)`; }); card.addEventListener('mouseleave', () => { const title = card.querySelector('h3'); title.style.textShadow = ''; }); }); // Shadow slider interaction const shadowSlider = document.getElementById('shadowSlider'); const demoText = document.getElementById('demoText'); shadowSlider.addEventListener('input', () => { const value = shadowSlider.value; const primaryColor = `rgba(255, 51, 102, ${value / 100})`; const secondaryColor = `rgba(51, 204, 255, ${value / 100})`; const accentColor = `rgba(255, 204, 0, ${value / 100})`; const offsetX = Math.floor(value / 10); const offsetY = Math.floor(value / 10); const blurRadius = Math.floor(value / 5); demoText.style.textShadow = ` ${offsetX}px ${offsetY}px ${blurRadius}px ${primaryColor}, ${-offsetX}px ${offsetY}px ${blurRadius}px ${secondaryColor}, ${offsetX}px ${-offsetY}px ${blurRadius}px ${accentColor} `; }); // Initial slider trigger shadowSlider.dispatchEvent(new Event('input')); // Download button interaction const downloadBtn = document.querySelector('.download-btn'); downloadBtn.addEventListener('click', (e) => { e.preventDefault(); const ripple = document.createElement('span'); const rect = downloadBtn.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; downloadBtn.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); // Show a message instead of an alert const oldText = downloadBtn.textContent; downloadBtn.textContent = "GAME DOWNLOADING..."; setTimeout(() => { downloadBtn.textContent = oldText; }, 2000); }); // Mobile touch support const interactionZone = document.querySelector('.interaction-zone'); const touchText = document.querySelector('.touch-text'); interactionZone.addEventListener('touchstart', () => { touchText.style.opacity = '1'; touchText.style.color = 'white'; touchText.style.animation = 'touchPulse 1.5s infinite alternate'; }); interactionZone.addEventListener('touchend', () => { setTimeout(() => { touchText.style.opacity = '0'; }, 1000); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>E-commerce Hero Banners</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 700px; background: #f7f7f7; overflow: hidden; } .hero-container { position: relative; width: 100%; max-width: 700px; height: 700px; overflow: hidden; } .hero-banner { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 2rem; opacity: 0; transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out; transform: translateX(100%); z-index: 1; } .hero-banner.active { opacity: 1; transform: translateX(0); z-index: 2; } .hero-banner.prev { transform: translateX(-100%); } .hero-text { position: relative; z-index: 2; } .banner-heading { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 1rem; position: relative; display: inline-block; overflow: hidden; transform: translateY(30px); opacity: 0; transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s, opacity 0.8s ease 0.2s; } .active .banner-heading { transform: translateY(0); opacity: 1; } .text-shadow { position: relative; } .text-shadow::before { content: attr(data-text); position: absolute; left: 0.1em; top: 0.1em; z-index: -1; filter: blur(5px); opacity: 0.7; transform-origin: left; transition: all 0.5s ease; } .banner-subtext { font-size: 1.2rem; margin-bottom: 2rem; max-width: 85%; transform: translateY(30px); opacity: 0; transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s, opacity 0.8s ease 0.4s; } .active .banner-subtext { transform: translateY(0); opacity: 1; } .action-btn { display: inline-block; padding: 0.8rem 2rem; border-radius: 30px; font-weight: 600; font-size: 1.1rem; text-decoration: none; border: none; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; transform: translateY(30px); opacity: 0; transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s, opacity 0.8s ease 0.6s, box-shadow 0.3s ease; } .active .action-btn { transform: translateY(0); opacity: 1; } .action-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); transition: all 0.5s ease; } .action-btn:hover::before { left: 100%; } .action-btn:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); transform: translateY(-3px); } .banner-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 2s ease; } .active .banner-image { transform: scale(1.05); } .navigation { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; z-index: 10; } .nav-dot { width: 12px; height: 12px; border-radius: 50%; margin: 0 8px; cursor: pointer; background-color: rgba(255, 255, 255, 0.5); transition: all 0.3s ease; } .nav-dot.active { width: 30px; border-radius: 10px; background-color: white; } /* Banner specific styles */ .banner-1 { background: linear-gradient(135deg, #FF6B6B, #FF8E53); color: white; } .banner-1 .text-shadow::before { color: #ff4a4a; } .banner-1 .action-btn { background-color: white; color: #FF6B6B; } .banner-2 { background: linear-gradient(135deg, #45B7D1, #2C82C9); color: white; } .banner-2 .text-shadow::before { color: #1e6ca5; } .banner-2 .action-btn { background-color: white; color: #2C82C9; } .banner-3 { background: linear-gradient(135deg, #A64EEE, #6843CF); color: white; } .banner-3 .text-shadow::before { color: #5035a1; } .banner-3 .action-btn { background-color: white; color: #6843CF; } .product-tag { position: absolute; top: 30px; right: 30px; background-color: rgba(255, 255, 255, 0.9); padding: 0.5rem 1rem; border-radius: 30px; font-weight: 600; transform: translateY(-50px); opacity: 0; transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s, opacity 0.8s ease 0.8s; } .banner-1 .product-tag { color: #FF6B6B; } .banner-2 .product-tag { color: #2C82C9; } .banner-3 .product-tag { color: #6843CF; } .active .product-tag { transform: translateY(0); opacity: 1; } /* Responsive styles */ @media (max-width: 768px) { .hero-container { height: 600px; } .banner-heading { font-size: 2.5rem; } .banner-subtext { font-size: 1rem; max-width: 100%; } } @media (max-width: 480px) { .hero-container { height: 500px; } .banner-heading { font-size: 2rem; } .hero-banner { padding: 1.5rem; } .product-tag { top: 20px; right: 20px; font-size: 0.8rem; } } </style> </head> <body> <div class="hero-container"> <div class="hero-banner banner-1 active"> <span class="product-tag">Summer Collection</span> <div class="hero-text"> <h1 class="banner-heading text-shadow" data-text="Summer Vibes, Cool Prices">Summer Vibes, Cool Prices</h1> <p class="banner-subtext">Beat the heat with our exclusive summer collection. 30% off on all swimwear, sandals, and beach accessories until July 31st.</p> <a href="#" class="action-btn">Shop Now</a> </div> <img src="https://images.unsplash.com/photo-1527005980469-e172416c200b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Summer Collection" class="banner-image"> </div> <div class="hero-banner banner-2"> <span class="product-tag">Tech Deals</span> <div class="hero-text"> <h1 class="banner-heading text-shadow" data-text="Upgrade Your Gadgets">Upgrade Your Gadgets</h1> <p class="banner-subtext">Premium laptops starting at $899. Trade in your old device and get an extra 15% off any new purchase this weekend only.</p> <a href="#" class="action-btn">Explore Deals</a> </div> <img src="https://images.unsplash.com/photo-1498049794561-7780e7231661?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Tech Deals" class="banner-image"> </div> <div class="hero-banner banner-3"> <span class="product-tag">Limited Edition</span> <div class="hero-text"> <h1 class="banner-heading text-shadow" data-text="Artisan Crafted Bags">Artisan Crafted Bags</h1> <p class="banner-subtext">Handmade leather bags from our exclusive artisan collection. Each piece uniquely crafted with sustainable materials. Free shipping on orders over $150.</p> <a href="#" class="action-btn">Shop Collection</a> </div> <img src="https://images.unsplash.com/photo-1534181220565-384cc3a37e2c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Artisan Bags" class="banner-image"> </div> <div class="navigation"> <div class="nav-dot active" data-index="0"></div> <div class="nav-dot" data-index="1"></div> <div class="nav-dot" data-index="2"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const banners = document.querySelectorAll('.hero-banner'); const dots = document.querySelectorAll('.nav-dot'); let currentIndex = 0; let intervalId; // Function to update active banner const updateBanner = (index) => { // Remove active class from all banners and add prev class banners.forEach((banner, i) => { banner.classList.remove('active'); if (i < index) { banner.classList.add('prev'); } else { banner.classList.remove('prev'); } }); // Add active class to current banner banners[index].classList.add('active'); // Update navigation dots dots.forEach((dot, i) => { dot.classList.toggle('active', i === index); }); currentIndex = index; }; // Initialize automatic slider const startAutoSlide = () => { intervalId = setInterval(() => { let nextIndex = (currentIndex + 1) % banners.length; updateBanner(nextIndex); }, 5000); }; // Add click event to navigation dots dots.forEach((dot, index) => { dot.addEventListener('click', () => { updateBanner(index); // Reset interval when manually changing slide clearInterval(intervalId); startAutoSlide(); }); }); // Add hover effects for text shadows document.querySelectorAll('.text-shadow').forEach(element => { element.addEventListener('mousemove', (e) => { const rect = element.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width; const y = (e.clientY - rect.top) / rect.height; element.style.setProperty('--shadow-x', `${(x - 0.5) * 10}px`); element.style.setProperty('--shadow-y', `${(y - 0.5) * 10}px`); const beforeElement = window.getComputedStyle(element, '::before'); if (beforeElement) { element.style.setProperty('--shadow-blur', '8px'); element.style.setProperty('--shadow-opacity', '0.9'); } }); element.addEventListener('mouseleave', () => { element.style.setProperty('--shadow-x', '0.1em'); element.style.setProperty('--shadow-y', '0.1em'); element.style.setProperty('--shadow-blur', '5px'); element.style.setProperty('--shadow-opacity', '0.7'); }); }); // Start auto slide startAutoSlide(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;500&display=swap'); :root { --primary-color: #f0e6dd; --accent-color: #d17c78; --text-color: #3d3d3d; --light-shadow: #f9e4d8; --dark-shadow: #c76d54; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--primary-color); font-family: 'Montserrat', sans-serif; color: var(--text-color); line-height: 1.6; padding: 20px; height: 700px; width: 700px; overflow: auto; max-width: 100%; margin: 0 auto; } .blog-container { max-width: 650px; margin: 0 auto; padding: 30px; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; } .blog-header { margin-bottom: 35px; position: relative; } h1, h2, h3 { font-family: 'Playfair Display', serif; margin-bottom: 0.7em; position: relative; transition: transform 0.3s ease; } h1 { font-size: 2.5rem; line-height: 1.2; margin-bottom: 0.5em; color: var(--text-color); font-weight: 700; transition: all 0.5s ease; } .artistic-title { position: relative; display: inline-block; cursor: pointer; } .shadow-effect { text-shadow: 2px 2px 0px var(--light-shadow), -1px -1px 0px var(--dark-shadow), 3px 3px 5px rgba(209, 124, 120, 0.35); transform-origin: center; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } h2 { font-size: 1.8rem; margin-top: 1.5em; color: var(--accent-color); } h3 { font-size: 1.3rem; color: var(--text-color); margin-top: 1.2em; } p { margin-bottom: 20px; font-size: 1rem; color: var(--text-color); line-height: 1.7; } .blog-content { margin-top: 30px; } .image-container { margin: 30px 0; position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .blog-image { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; transition: transform 0.7s ease; } .image-container:hover .blog-image { transform: scale(1.05); } .tag { display: inline-block; background-color: var(--light-shadow); color: var(--text-color); padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; margin-right: 10px; margin-bottom: 10px; transition: all 0.3s ease; } .tag:hover { background-color: var(--accent-color); color: white; transform: translateY(-3px); } .tags-container { margin-bottom: 25px; } .brush-stroke { position: absolute; width: 100%; height: 8px; background-color: var(--accent-color); bottom: -4px; left: 0; border-radius: 4px; transform: scaleX(0.7) rotate(-1deg); transform-origin: left; opacity: 0.7; transition: all 0.3s ease; } .artistic-title:hover .shadow-effect { text-shadow: 3px 3px 0px var(--light-shadow), -2px -2px 0px var(--dark-shadow), 4px 4px 7px rgba(209, 124, 120, 0.5); letter-spacing: 0.02em; } .artistic-title:hover .brush-stroke { transform: scaleX(1) rotate(0.5deg); opacity: 0.9; } .color-palette { display: flex; flex-wrap: wrap; margin: 20px 0; gap: 10px; } .color-swatch { width: 50px; height: 50px; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: all 0.3s ease; position: relative; } .color-swatch:hover { transform: scale(1.1) rotate(5deg); } .palette-heading { margin-top: 30px; position: relative; display: inline-block; } .color-swatch:nth-child(1) { background-color: #f9e4d8; } .color-swatch:nth-child(2) { background-color: #d17c78; } .color-swatch:nth-child(3) { background-color: #c76d54; } .color-swatch:nth-child(4) { background-color: #776979; } .color-swatch:nth-child(5) { background-color: #344648; } .tooltip { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); background-color: rgba(0,0,0,0.8); color: white; padding: 5px 10px; border-radius: 4px; font-size: 0.8rem; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; white-space: nowrap; } .color-swatch:hover .tooltip { opacity: 1; } .footer { margin-top: 40px; text-align: center; font-size: 0.9rem; color: var(--text-color); opacity: 0.8; } @media (max-width: 700px) { body { padding: 10px; } .blog-container { padding: 20px; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.2rem; } .color-swatch { width: 40px; height: 40px; } } /* Custom text selection */ ::selection { background-color: var(--light-shadow); color: var(--accent-color); } /* Decorative element */ .corner-decoration { position: absolute; right: 0; top: 0; width: 120px; height: 120px; background: linear-gradient(45deg, transparent 50%, rgba(209, 124, 120, 0.1) 50%); z-index: 0; } </style> </head> <body> <div class="blog-container"> <div class="corner-decoration"></div> <div class="blog-header"> <div class="tags-container"> <span class="tag">Typography</span> <span class="tag">Design</span> <span class="tag">Artistic Effects</span> </div> <h1 class="artistic-title"> <span class="shadow-effect">Painting with Shadows</span> <span class="brush-stroke"></span> </h1> <p>Exploring the art of crafting hand-painted text shadow effects for blogs that balance artistic expression with perfect readability.</p> </div> <div class="image-container"> <img class="blog-image" src="https://images.unsplash.com/photo-1460661419201-fd4cecdf8a8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Artistic typography with shadow effects"> </div> <div class="blog-content"> <h2 class="artistic-title"> <span class="shadow-effect">The Craft of Text Shadows</span> <span class="brush-stroke"></span> </h2> <p>Text shadows have evolved beyond the realm of simple offsets. When crafted with intention, they transform typography into a tactile, painterly experience that draws readers in. The key is to create depth while maintaining clarity — a balancing act that separates artistic typography from illegible experimentation.</p> <h3 class="artistic-title"> <span class="shadow-effect">Layering Shadow Effects</span> <span class="brush-stroke"></span> </h3> <p>The secret to creating a painterly shadow effect lies in layering. Rather than a single harsh shadow, combine multiple shadows with varying opacities, distances, and colors. This technique mimics the natural behavior of light and creates a more organic, handcrafted appearance.</p> <h3 class="artistic-title palette-heading"> <span class="shadow-effect">Choosing a Shadow Palette</span> <span class="brush-stroke"></span> </h3> <p>Selecting complementary colors for your shadows can elevate the effect from simple decoration to artistic expression. Consider colors that not only enhance your blog's aesthetic but also create emotional resonance with your content.</p> <div class="color-palette"> <div class="color-swatch"> <span class="tooltip">#f9e4d8</span> </div> <div class="color-swatch"> <span class="tooltip">#d17c78</span> </div> <div class="color-swatch"> <span class="tooltip">#c76d54</span> </div> <div class="color-swatch"> <span class="tooltip">#776979</span> </div> <div class="color-swatch"> <span class="tooltip">#344648</span> </div> </div> <h3 class="artistic-title"> <span class="shadow-effect">Finding Balance</span> <span class="brush-stroke"></span> </h3> <p>The most critical aspect of text shadow styling is maintaining readability. Artistic expression should enhance content, not obscure it. Test your shadows across different screen sizes and lighting conditions to ensure your creativity never comes at the cost of functionality.</p> </div> <div class="footer"> <p>Crafted with care for artistic blog enthusiasts © 2023</p> </div> </div> <script> // Interactive title animation document.querySelectorAll('.artistic-title').forEach(title => { title.addEventListener('mousemove', (e) => { const rect = title.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Calculate distance from center const centerX = rect.width / 2; const centerY = rect.height / 2; // Calculate angle and intensity based on mouse position const angleX = (y - centerY) / 10; const angleY = (centerX - x) / 10; const intensity = Math.min(Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2)) / 30, 5); const shadowElem = title.querySelector('.shadow-effect'); shadowElem.style.textShadow = ` ${angleY/5}px ${angleX/5}px 0px var(--light-shadow), ${-angleY/5}px ${-angleX/5}px 0px var(--dark-shadow), ${angleY/3}px ${angleX/3}px ${intensity}px rgba(209, 124, 120, 0.35) `; }); title.addEventListener('mouseleave', (e) => { const shadowElem = title.querySelector('.shadow-effect'); shadowElem.style.textShadow = ''; }); }); // Color swatch interaction document.querySelectorAll('.color-swatch').forEach(swatch => { swatch.addEventListener('click', function() { // Get the computed background color const bgColor = window.getComputedStyle(this).backgroundColor; // Create a temporary textarea to copy the color value const textArea = document.createElement('textarea'); textArea.value = this.querySelector('.tooltip').textContent; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); // Visual feedback this.style.transform = 'scale(1.2) rotate(-5deg)'; setTimeout(() => { this.style.transform = ''; }, 300); // Alert user (without using actual alert) const notification = document.createElement('div'); notification.textContent = 'Color code copied!'; notification.style.position = 'fixed'; notification.style.bottom = '20px'; notification.style.left = '50%'; notification.style.transform = 'translateX(-50%)'; notification.style.background = 'rgba(0,0,0,0.7)'; notification.style.color = 'white'; notification.style.padding = '10px 20px'; notification.style.borderRadius = '5px'; notification.style.zIndex = '1000'; document.body.appendChild(notification); setTimeout(() => { notification.style.opacity = '0'; notification.style.transition = 'opacity 0.5s ease'; setTimeout(() => { document.body.removeChild(notification); }, 500); }, 1500); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Minimal Elevation</title> <style> /* Base styles */ :root { --primary-color: #f5f5f5; --text-color: #333; --accent-color: #8c8c8c; --shadow-size: 1px; --shadow-blur: 1px; --shadow-color: rgba(0, 0, 0, 0.1); --transition-speed: 0.4s; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background-color: var(--primary-color); color: var(--text-color); line-height: 1.6; height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } .container { max-width: 100%; padding: 2rem; margin: 0 auto; height: 100%; display: flex; flex-direction: column; } /* Typography with subtle shadows */ h1, h2, h3, h4, h5, h6 { font-weight: 400; margin-bottom: 1rem; letter-spacing: -0.5px; } h1 { font-size: 2.5rem; text-shadow: var(--shadow-size) var(--shadow-size) var(--shadow-blur) var(--shadow-color); transition: all var(--transition-speed); } h2 { font-size: 1.8rem; text-shadow: calc(var(--shadow-size) * 0.8) calc(var(--shadow-size) * 0.8) var(--shadow-blur) var(--shadow-color); margin-top: 2rem; } h3 { font-size: 1.4rem; text-shadow: calc(var(--shadow-size) * 0.6) calc(var(--shadow-size) * 0.6) var(--shadow-blur) var(--shadow-color); } p { margin-bottom: 1.5rem; max-width: 650px; } /* Hover states and interaction */ .elevate-text { display: inline-block; transition: all var(--transition-speed); cursor: pointer; } .elevate-text:hover { text-shadow: calc(var(--shadow-size) * 2) calc(var(--shadow-size) * 2) calc(var(--shadow-blur) * 3) var(--shadow-color); transform: translateY(-1px); } /* Card component */ .card { background-color: white; border-radius: 4px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-size) var(--shadow-size) var(--shadow-blur) var(--shadow-color); transition: all var(--transition-speed); } .card:hover { box-shadow: calc(var(--shadow-size) * 2) calc(var(--shadow-size) * 2) calc(var(--shadow-blur) * 3) var(--shadow-color); transform: translateY(-2px); } /* Button */ .btn { display: inline-block; padding: 0.8rem 1.5rem; background-color: var(--text-color); color: var(--primary-color); border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; text-shadow: var(--shadow-size) var(--shadow-size) var(--shadow-blur) rgba(0, 0, 0, 0.3); transition: all var(--transition-speed); margin-top: 1rem; } .btn:hover { background-color: #222; box-shadow: calc(var(--shadow-size) * 2) calc(var(--shadow-size) * 2) calc(var(--shadow-blur) * 3) var(--shadow-color); transform: translateY(-1px); } /* Header */ .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .logo { font-weight: 500; text-shadow: var(--shadow-size) var(--shadow-size) var(--shadow-blur) var(--shadow-color); letter-spacing: -0.5px; } .nav a { margin-left: 1.5rem; text-decoration: none; color: var(--text-color); transition: all var(--transition-speed); text-shadow: var(--shadow-size) var(--shadow-size) var(--shadow-blur) var(--shadow-color); } .nav a:hover { color: var(--accent-color); text-shadow: calc(var(--shadow-size) * 1.5) calc(var(--shadow-size) * 1.5) calc(var(--shadow-blur) * 2) var(--shadow-color); } /* Showcase/Hero */ .showcase { padding: 2rem 0; flex: 1; display: flex; flex-direction: column; justify-content: center; } /* Theme toggle */ .theme-toggle { width: 40px; height: 40px; background-color: var(--text-color); color: var(--primary-color); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: all var(--transition-speed); box-shadow: var(--shadow-size) var(--shadow-size) var(--shadow-blur) var(--shadow-color); } .theme-toggle:hover { box-shadow: calc(var(--shadow-size) * 2) calc(var(--shadow-size) * 2) calc(var(--shadow-blur) * 3) var(--shadow-color); transform: translateY(-1px) rotate(15deg); } /* Shadow demo */ .shadow-demo { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; } .shadow-example { padding: 1.5rem; background-color: white; border-radius: 4px; flex: 1 1 200px; transition: all var(--transition-speed); cursor: pointer; } .shadow-s { box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); } .shadow-m { box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); } .shadow-l { box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); } .shadow-example:hover { transform: translateY(-4px); box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.12); } .shadow-text { margin-top: 1rem; text-align: center; font-size: 0.9rem; color: var(--accent-color); } /* Dark mode */ body.dark-mode { --primary-color: #222; --text-color: #f5f5f5; --accent-color: #aaa; --shadow-color: rgba(0, 0, 0, 0.3); } body.dark-mode .card, body.dark-mode .shadow-example { background-color: #333; } body.dark-mode .theme-toggle { background-color: var(--primary-color); color: var(--text-color); border: 1px solid var(--accent-color); } /* Loading animation */ @keyframes shadowPulse { 0% { text-shadow: var(--shadow-size) var(--shadow-size) var(--shadow-blur) var(--shadow-color); } 50% { text-shadow: calc(var(--shadow-size) * 3) calc(var(--shadow-size) * 3) calc(var(--shadow-blur) * 4) var(--shadow-color); } 100% { text-shadow: var(--shadow-size) var(--shadow-size) var(--shadow-blur) var(--shadow-color); } } .shadow-pulse { animation: shadowPulse 2s infinite ease-in-out; } /* Responsive */ @media (max-width: 700px) { .container { padding: 1.5rem; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } .header { flex-direction: column; align-items: flex-start; } .nav { margin-top: 1rem; } .nav a { margin-left: 0; margin-right: 1rem; } } </style> </head> <body> <div class="container"> <header class="header"> <div class="logo">Minimal Elevation</div> <nav class="nav"> <a href="#" class="elevate-text">Home</a> <a href="#" class="elevate-text">Examples</a> <a href="#" class="elevate-text">About</a> </nav> <button class="theme-toggle" id="themeToggle">◐</button> </header> <section class="showcase"> <h1 class="shadow-pulse">The Art of <span class="elevate-text">Subtle Elevation</span></h1> <p>Typography doesn't need to be bold to make an impact. With careful use of text shadows, we achieve depth and visual hierarchy while maintaining the clean aesthetic that minimalist design demands.</p> <div class="shadow-demo"> <div class="shadow-example shadow-s"> <h3 class="elevate-text">Whisper</h3> <p>A barely perceptible 1px offset creates a feather touch of dimension, ideal for body text and secondary elements.</p> <div class="shadow-text">1px offset, 1px blur</div> </div> <div class="shadow-example shadow-m"> <h3 class="elevate-text">Presence</h3> <p>The medium elevation gives enough presence to stand out without overwhelming, perfect for section headers.</p> <div class="shadow-text">2px offset, 2px blur</div> </div> <div class="shadow-example shadow-l"> <h3 class="elevate-text">Pronounce</h3> <p>For key elements that need emphasis, this more noticeable elevation draws attention while maintaining subtlety.</p> <div class="shadow-text">3px offset, 3px blur</div> </div> </div> <h2>Design Principles</h2> <p>Effective text shadows in minimalist design follow three key principles: <span class="elevate-text">consistent direction</span> (always the same offset direction), <span class="elevate-text">proportional size</span> (shadow scale matches text importance), and <span class="elevate-text">neutral coloration</span> (shadows should be felt, not seen).</p> <div class="card"> <h3>Implementation Tips</h3> <p>Keep shadows monochromatic – using varying opacities of black or white rather than colors. Match your shadow direction to imply a consistent light source. For minimal websites, stick to shadows no larger than 3px offset with a blur radius of 1-3px.</p> <button class="btn" id="randomizeBtn">Randomize Shadows</button> </div> </section> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Theme toggle functionality const themeToggle = document.getElementById('themeToggle'); const body = document.body; themeToggle.addEventListener('click', function() { body.classList.toggle('dark-mode'); themeToggle.textContent = body.classList.contains('dark-mode') ? '◑' : '◐'; }); // Make all headings with elevate-text class interactive const elevateElements = document.querySelectorAll('.elevate-text'); elevateElements.forEach(el => { el.addEventListener('click', function() { this.classList.add('shadow-pulse'); setTimeout(() => { this.classList.remove('shadow-pulse'); }, 2000); }); }); // Randomize button const randomizeBtn = document.getElementById('randomizeBtn'); randomizeBtn.addEventListener('click', function() { const root = document.documentElement; const shadowSize = Math.random() * 2 + 0.5; // 0.5 to 2.5px const shadowBlur = Math.random() * 3 + 0.5; // 0.5 to 3.5px const shadowOpacity = Math.random() * 0.15 + 0.05; // 0.05 to 0.2 opacity root.style.setProperty('--shadow-size', `${shadowSize.toFixed(1)}px`); root.style.setProperty('--shadow-blur', `${shadowBlur.toFixed(1)}px`); root.style.setProperty('--shadow-color', `rgba(0, 0, 0, ${shadowOpacity.toFixed(2)})`); // Add a visual cue that something changed const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6'); headings.forEach(heading => { heading.classList.add('shadow-pulse'); setTimeout(() => { heading.classList.remove('shadow-pulse'); }, 2000); }); }); // Interactive shadow examples const shadowExamples = document.querySelectorAll('.shadow-example'); shadowExamples.forEach(example => { example.addEventListener('click', function() { const headingElement = this.querySelector('h3'); const shadowText = this.querySelector('.shadow-text'); // Apply this shadow to the entire document let shadowClass = ''; if (this.classList.contains('shadow-s')) shadowClass = 's'; if (this.classList.contains('shadow-m')) shadowClass = 'm'; if (this.classList.contains('shadow-l')) shadowClass = 'l'; if (shadowClass === 's') { document.documentElement.style.setProperty('--shadow-size', '1px'); document.documentElement.style.setProperty('--shadow-blur', '1px'); } else if (shadowClass === 'm') { document.documentElement.style.setProperty('--shadow-size', '2px'); document.documentElement.style.setProperty('--shadow-blur', '2px'); } else if (shadowClass === 'l') { document.documentElement.style.setProperty('--shadow-size', '3px'); document.documentElement.style.setProperty('--shadow-blur', '3px'); } // Provide visual feedback headingElement.classList.add('shadow-pulse'); shadowText.textContent = 'Applied globally ✓'; setTimeout(() => { headingElement.classList.remove('shadow-pulse'); shadowText.textContent = `${shadowClass === 's' ? '1' : shadowClass === 'm' ? '2' : '3'}px offset, ${shadowClass === 's' ? '1' : shadowClass === 'm' ? '2' : '3'}px blur`; }, 2000); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Serene Reader - Enhanced E-book Experience</title> <style> :root { --primary-color: #3a5199; --secondary-color: #f0f4f8; --accent-color: #7d9ad7; --text-color: #2c3e50; --light-shadow: rgba(0, 0, 0, 0.05); --medium-shadow: rgba(0, 0, 0, 0.1); --dark-shadow: rgba(0, 0, 0, 0.15); --white-shadow: rgba(255, 255, 255, 0.4); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'San Francisco', 'Helvetica Neue', sans-serif; } body { background-color: #f9fafb; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; color: var(--text-color); overflow-x: hidden; max-width: 700px; margin: 0 auto; padding: 0 15px; } .app-container { width: 100%; max-width: 670px; height: 670px; background-color: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; overflow: hidden; position: relative; } .header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid #eaeaea; background: linear-gradient(to right, var(--primary-color), #526fbc); color: white; } .header h1 { font-size: 20px; font-weight: 600; } .controls { display: flex; gap: 15px; } .control-btn { background: none; border: none; color: white; cursor: pointer; font-size: 18px; opacity: 0.9; transition: all 0.2s ease; display: flex; align-items: center; } .control-btn:hover { opacity: 1; transform: translateY(-1px); } .e-reader { flex: 1; display: flex; overflow: hidden; position: relative; } .sidebar { width: 0; background-color: var(--secondary-color); transition: width 0.3s ease; overflow-y: auto; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05); padding: 0; overflow: hidden; } .sidebar.active { width: 220px; padding: 20px; } .settings-group { margin-bottom: 20px; } .settings-group h3 { font-size: 16px; margin-bottom: 10px; color: var(--primary-color); } .settings-option { margin-bottom: 15px; } .settings-option label { display: block; font-size: 14px; margin-bottom: 5px; } .settings-option select, .settings-option input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .background-options { display: flex; gap: 8px; margin-top: 8px; } .bg-option { width: 25px; height: 25px; border-radius: 50%; cursor: pointer; transition: transform 0.2s ease; border: 2px solid transparent; } .bg-option:hover { transform: scale(1.1); } .bg-option.active { border-color: var(--primary-color); } .bg-white { background-color: #ffffff; box-shadow: 0 0 0 1px #ddd; } .bg-sepia { background-color: #f8f1e3; } .bg-night { background-color: #292a2d; } .bg-pattern { background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="%23f9f9f9"/><path d="M0 0L100 100M100 0L0 100" stroke="%23ebebeb" stroke-width="1"/></svg>'); background-size: 10px 10px; } .content-area { flex: 1; padding: 30px; overflow-y: auto; position: relative; transition: background 0.3s ease; background-color: #ffffff; } .content-area.sepia { background-color: #f8f1e3; } .content-area.night { background-color: #292a2d; color: #e0e0e0; } .content-area.pattern { background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="%23f9f9f9"/><path d="M0 0L100 100M100 0L0 100" stroke="%23ebebeb" stroke-width="1"/></svg>'); background-size: 10px 10px; } .chapter-title { font-size: 24px; font-weight: 600; margin-bottom: 20px; transition: text-shadow 0.3s ease; } .chapter-title.white { text-shadow: 0 1px 1px var(--light-shadow); } .chapter-title.sepia { text-shadow: 0 1px 1px rgba(139, 69, 19, 0.1); } .chapter-title.night { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .chapter-title.pattern { text-shadow: 0 1px 2px var(--medium-shadow); } .paragraph { font-size: 16px; line-height: 1.8; margin-bottom: 20px; transition: all 0.3s ease; } /* Text shadow variations */ .shadow-none { text-shadow: none; } .shadow-soft { text-shadow: 0 0.2px 0.3px var(--light-shadow); } .shadow-medium { text-shadow: 0 0.3px 0.5px var(--medium-shadow); } .shadow-crisp { text-shadow: 0 0.5px 0.7px var(--dark-shadow); } .shadow-light-glow { text-shadow: 0 0 1px var(--white-shadow); } /* Dark mode text shadow variations */ .content-area.night .shadow-soft { text-shadow: 0 0.3px 0.5px rgba(0, 0, 0, 0.5); } .content-area.night .shadow-medium { text-shadow: 0 0.5px 0.8px rgba(0, 0, 0, 0.5); } .content-area.night .shadow-crisp { text-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.5); } .content-area.night .shadow-light-glow { text-shadow: 0 0 2px rgba(255, 255, 255, 0.2); } .footer { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-top: 1px solid #eaeaea; background-color: white; } .page-progress { font-size: 14px; color: #666; } .page-nav { display: flex; gap: 20px; } .page-btn { background: var(--primary-color); color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.2s ease; } .page-btn:hover { background: #4a62a3; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .page-btn:disabled { background: #b8c2d9; cursor: not-allowed; transform: none; box-shadow: none; } /* Reading indicators */ .reading-line { position: absolute; left: 0; right: 0; height: 2px; background-color: rgba(58, 81, 153, 0.1); pointer-events: none; display: none; } .reading-line.active { display: block; } /* Loading animation */ .loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.9); display: flex; justify-content: center; align-items: center; z-index: 10; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .loading-overlay.active { opacity: 1; pointer-events: all; } .loading-spinner { width: 40px; height: 40px; border: 3px solid var(--secondary-color); border-top: 3px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Tooltip styles */ .tooltip { position: absolute; background-color: var(--primary-color); color: white; padding: 5px 10px; border-radius: 4px; font-size: 12px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 20; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); white-space: nowrap; } .tooltip.visible { opacity: 1; } .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--primary-color) transparent transparent transparent; } /* Page turn animation */ .page-turn { position: absolute; top: 0; right: 0; bottom: 0; width: 0; background-color: rgba(0, 0, 0, 0.05); z-index: 5; pointer-events: none; transition: width 0.3s ease-out; } .page-turn.active { width: 100%; animation: pageTurn 0.5s ease-out forwards; } @keyframes pageTurn { 0% { width: 0; } 100% { width: 100%; } } /* Responsive styles */ @media (max-width: 600px) { .app-container { height: 600px; } .header h1 { font-size: 18px; } .content-area { padding: 20px; } .sidebar.active { width: 180px; } .chapter-title { font-size: 20px; } .paragraph { font-size: 15px; line-height: 1.6; } } @media (max-width: 400px) { .app-container { height: 550px; } .header h1 { font-size: 16px; } .content-area { padding: 15px; } .paragraph { font-size: 14px; line-height: 1.5; } .footer { padding: 10px 15px; } } </style> </head> <body> <div class="app-container"> <div class="header"> <h1>Serene Reader</h1> <div class="controls"> <button class="control-btn toggle-settings" title="Display settings"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg> </button> <button class="control-btn toggle-fullscreen" title="Fullscreen"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg> </button> </div> </div> <div class="e-reader"> <div class="sidebar"> <div class="settings-group"> <h3>Text Shadow</h3> <div class="settings-option"> <label for="shadow-level">Shadow Intensity</label> <select id="shadow-level"> <option value="shadow-none">None</option> <option value="shadow-soft" selected>Soft</option> <option value="shadow-medium">Medium</option> <option value="shadow-crisp">Crisp</option> <option value="shadow-light-glow">Light Glow</option> </select> </div> </div> <div class="settings-group"> <h3>Background</h3> <div class="settings-option"> <label>Select Theme</label> <div class="background-options"> <div class="bg-option bg-white active" data-bg="white"></div> <div class="bg-option bg-sepia" data-bg="sepia"></div> <div class="bg-option bg-night" data-bg="night"></div> <div class="bg-option bg-pattern" data-bg="pattern"></div> </div> </div> </div> <div class="settings-group"> <h3>Text</h3> <div class="settings-option"> <label for="font-size">Font Size</label> <select id="font-size"> <option value="14px">Small</option> <option value="16px" selected>Medium</option> <option value="18px">Large</option> <option value="20px">X-Large</option> </select> </div> <div class="settings-option"> <label for="line-height">Line Spacing</label> <select id="line-height"> <option value="1.5">Tight</option> <option value="1.8" selected>Normal</option> <option value="2.1">Relaxed</option> <option value="2.4">Spacious</option> </select> </div> </div> <div class="settings-group"> <h3>Reading Aids</h3> <div class="settings-option"> <label> <input type="checkbox" id="reading-line"> Show Reading Line </label> </div> </div> </div> <div class="content-area"> <h2 class="chapter-title shadow-soft">The Art of Digital Typography</h2> <p class="paragraph shadow-soft">The essence of digital reading lies in the delicate dance between text and background. In this intricate performance, the reader's eye becomes both audience and critic. Each line, each curve, each shadow of a letter must be rendered with precise intention.</p> <p class="paragraph shadow-soft">Text shadows, when applied judiciously, transform the reading experience from mundane to sublime. Like the gentle brush of sunlight across a page, a subtle shadow provides dimension without calling attention to itself. The key is restraint – whispers rather than shouts.</p> <p class="paragraph shadow-soft">Consider how our eyes move across digital text. Unlike physical pages, screens emit light rather than reflect it. This fundamental difference means that contrast becomes more complex. A shadow of 0.3 pixels, barely perceptible in isolation, can dramatically improve readability on varied backgrounds.</p> <p class="paragraph shadow-soft">The science behind this effect is fascinating. Our visual cortex processes text through shape recognition, with shadows enhancing the definition of letterforms. When a reader moves through digital content, properly shadowed text reduces eye strain by creating micro-contrast boundaries that guide visual flow.</p> <p class="paragraph shadow-soft">Backgrounds present particular challenges. A plain white canvas offers clarity but can cause eye fatigue during extended reading sessions. Sepia tones warm the experience but may diminish contrast. Night modes reverse the paradigm entirely, requiring shadows that soften rather than sharpen. Patterned backgrounds introduce visual noise that must be carefully counterbalanced.</p> <p class="paragraph shadow-soft">Modern e-readers must accommodate these variations seamlessly. The shadow that enhances legibility on a textured background might appear heavy-handed on solid white. The solution lies in adaptive systems that sense context and adjust accordingly, providing the reader with optimal clarity regardless of their chosen environment.</p> <p class="paragraph shadow-soft">We've developed a taxonomy of shadow effects, each serving different purposes. Soft shadows provide general enhancement with minimal visual impact – perfect for body text. Medium shadows improve legibility on lightly textured backgrounds. Crisp shadows create stronger definition for larger text elements. Light glow effects create a halo that works particularly well in dark mode environments.</p> <div class="reading-line"></div> <div class="page-turn"></div> </div> <div class="loading-overlay"> <div class="loading-spinner"></div> </div> <div class="tooltip">Shadow effect applied</div> </div> <div class="footer"> <div class="page-progress">Page 1 of 12</div> <div class="page-nav"> <button class="page-btn prev-page" disabled>Previous</button> <button class="page-btn next-page">Next</button> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Elements const settingsToggle = document.querySelector('.toggle-settings'); const sidebar = document.querySelector('.sidebar'); const contentArea = document.querySelector('.content-area'); const paragraphs = document.querySelectorAll('.paragraph'); const chapterTitle = document.querySelector('.chapter-title'); const shadowLevel = document.getElementById('shadow-level'); const fontSizeSelect = document.getElementById('font-size'); const lineHeightSelect = document.getElementById('line-height'); const readingLineToggle = document.getElementById('reading-line'); const readingLine = document.querySelector('.reading-line'); const bgOptions = document.querySelectorAll('.bg-option'); const fullscreenToggle = document.querySelector('.toggle-fullscreen'); const loadingOverlay = document.querySelector('.loading-overlay'); const tooltip = document.querySelector('.tooltip'); const nextPageBtn = document.querySelector('.next-page'); const prevPageBtn = document.querySelector('.prev-page'); const pageTurn = document.querySelector('.page-turn'); // Toggle sidebar settingsToggle.addEventListener('click', function() { sidebar.classList.toggle('active'); if (sidebar.classList.contains('active')) { showTooltip(settingsToggle, 'Settings panel opened'); } }); // Change shadow level shadowLevel.addEventListener('change', function() { const shadowClass = this.value; paragraphs.forEach(p => { p.className = 'paragraph ' + shadowClass; }); chapterTitle.className = 'chapter-title ' + shadowClass; showTooltip(shadowLevel, 'Shadow effect applied'); // Show loading animation simulateLoading(); }); // Change font size fontSizeSelect.addEventListener('change', function() { paragraphs.forEach(p => { p.style.fontSize = this.value; }); showTooltip(fontSizeSelect, 'Font size updated'); }); // Change line height lineHeightSelect.addEventListener('change', function() { paragraphs.forEach(p => { p.style.lineHeight = this.value; }); showTooltip(lineHeightSelect, 'Line spacing updated'); }); // Toggle reading line readingLineToggle.addEventListener('change', function() { readingLine.classList.toggle('active', this.checked); if (this.checked) { contentArea.addEventListener('mousemove', moveReadingLine); } else { contentArea.removeEventListener('mousemove', moveReadingLine); } showTooltip(readingLineToggle, this.checked ? 'Reading line enabled' : 'Reading line disabled'); }); function moveReadingLine(e) { const rect = contentArea.getBoundingClientRect(); const y = e.clientY - rect.top; readingLine.style.top = `${y}px`; } // Change background bgOptions.forEach(option => { option.addEventListener('click', function() { const bgType = this.getAttribute('data-bg'); // Update active state bgOptions.forEach(opt => opt.classList.remove('active')); this.classList.add('active'); // Update content area contentArea.className = 'content-area'; contentArea.classList.add(bgType); // Update title class for appropriate shadow chapterTitle.classList.add(bgType); showTooltip(option, `${bgType.charAt(0).toUpperCase() + bgType.slice(1)} theme applied`); // Show loading animation simulateLoading(); }); }); // Toggle fullscreen fullscreenToggle.addEventListener('click', function() { if (!document.fullscreenElement) { document.documentElement.requestFullscreen().catch(err => { console.log(`Error attempting to enable fullscreen: ${err.message}`); }); showTooltip(fullscreenToggle, 'Fullscreen mode enabled'); } else { if (document.exitFullscreen) { document.exitFullscreen(); showTooltip(fullscreenToggle, 'Fullscreen mode disabled'); } } }); // Simulate loading function simulateLoading() { loadingOverlay.classList.add('active'); setTimeout(() => { loadingOverlay.classList.remove('active'); }, 600); } // Show tooltip function showTooltip(element, message) { const rect = element.getBoundingClientRect(); tooltip.textContent = message; tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`; tooltip.style.top = `${rect.top - tooltip.offsetHeight - 10}px`; tooltip.classList.add('visible'); setTimeout(() => { tooltip.classList.remove('visible'); }, 2000); } // Page navigation let currentPage = 1; const totalPages = 12; nextPageBtn.addEventListener('click', function() { if (currentPage < totalPages) { simulatePageTurn(); currentPage++; updatePageCounter(); prevPageBtn.disabled = false; if (currentPage === totalPages) { nextPageBtn.disabled = true; } } }); prevPageBtn.addEventListener('click', function() { if (currentPage > 1) { simulatePageTurn(); currentPage--; updatePageCounter(); nextPageBtn.disabled = false; if (currentPage === 1) { prevPageBtn.disabled = true; } } }); function updatePageCounter() { document.querySelector('.page-progress').textContent = `Page ${currentPage} of ${totalPages}`; } function simulatePageTurn() { pageTurn.classList.add('active'); setTimeout(() => { pageTurn.classList.remove('active'); }, 500); } // Initialize simulateLoading(); }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Noto Sans', sans-serif; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f4f4f4; overflow-x: hidden; } .portal-container { width: 700px; height: 700px; display: flex; flex-direction: column; gap: 20px; padding: 20px; overflow-y: auto; position: relative; } .portal-header { text-align: center; margin-bottom: 10px; position: sticky; top: 0; background: linear-gradient(135deg, #0b132b, #1c2541); padding: 20px; border-radius: 10px; z-index: 10; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .portal-title { font-size: 32px; font-weight: 800; color: #fff; text-shadow: 2px 2px 0 #ff5e5b, 3px 3px 0 #ff5e5b, 4px 4px 0 rgba(0,0,0,0.3); transform: skew(-2deg); transition: all 0.3s ease; margin-bottom: 10px; } .portal-title:hover { transform: skew(0deg) scale(1.03); text-shadow: 3px 3px 0 #ff5e5b, 5px 5px 0 #ff5e5b, 7px 7px 0 rgba(0,0,0,0.3); } .portal-tagline { font-size: 14px; color: #d1d1d1; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); } .filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; justify-content: center; } .filter-btn { padding: 8px 15px; background: #3a506b; color: white; border: none; border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.2s; text-shadow: 1px 1px 2px rgba(0,0,0,0.4); } .filter-btn:hover, .filter-btn.active { background: #5bc0be; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .filter-btn.active { position: relative; } .filter-btn.active::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; background: #5bc0be; border-radius: 50%; } .news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .news-card { border-radius: 10px; overflow: hidden; position: relative; height: 250px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; } .news-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.2); } .news-card.featured { grid-column: span 2; height: 350px; } .news-image { width: 100%; height: 100%; object-fit: cover; transition: transform 1s; } .news-card:hover .news-image { transform: scale(1.05); } .news-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: white; } .news-category { background: #ff5e5b; color: white; padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; width: fit-content; margin-bottom: 10px; transform: translateY(0); animation: float 3s ease-in-out infinite; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .news-title { font-size: 20px; font-weight: 800; margin-bottom: 10px; line-height: 1.2; position: relative; text-shadow: 2px 2px 0 rgba(0,0,0,0.8), 3px 3px 5px rgba(0,0,0,0.5); transition: all 0.3s; } .news-card.featured .news-title { font-size: 28px; text-shadow: 3px 3px 0 rgba(0,0,0,0.8), 4px 4px 8px rgba(0,0,0,0.5); } .news-card:hover .news-title { text-shadow: 3px 3px 0 rgba(0,0,0,0.8), 5px 5px 10px rgba(0,0,0,0.5); } .news-excerpt { font-size: 14px; opacity: 0.8; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 1px 1px 3px rgba(0,0,0,0.7); } .news-meta { display: flex; justify-content: space-between; font-size: 12px; color: #aaa; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); } .news-author { display: flex; align-items: center; gap: 5px; } .author-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; } .news-time { position: relative; padding-left: 18px; } .news-time::before { content: '⏱'; position: absolute; left: 0; top: 0; } .breaking-news { position: sticky; top: 100px; background: linear-gradient(135deg, #ff5e5b, #d63447); padding: 15px; border-radius: 10px; margin-bottom: 20px; display: flex; align-items: center; overflow: hidden; z-index: 5; box-shadow: 0 5px 20px rgba(214, 52, 71, 0.3); } .breaking-label { background: #fff; color: #d63447; padding: 5px 10px; border-radius: 5px; font-weight: 700; font-size: 14px; margin-right: 15px; white-space: nowrap; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .breaking-news-ticker { white-space: nowrap; animation: ticker 25s linear infinite; font-weight: 600; color: white; text-shadow: 2px 2px 0 rgba(0,0,0,0.5), 3px 3px 5px rgba(0,0,0,0.3); } @keyframes ticker { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @media (max-width: 700px) { .news-grid { grid-template-columns: 1fr; } .news-card.featured { grid-column: span 1; } .portal-title { font-size: 28px; } } @media (max-width: 500px) { .news-card { height: 200px; } .news-card.featured { height: 250px; } .news-title { font-size: 18px; } .news-card.featured .news-title { font-size: 22px; } .portal-title { font-size: 24px; } } /* Custom interaction for text shadows */ .interactive-shadow { transition: text-shadow 0.3s; cursor: pointer; } .interactive-shadow:hover { text-shadow: 0 0 5px #5bc0be, 0 0 10px #5bc0be, 0 0 20px #5bc0be; } /* Theme toggle */ .theme-toggle { position: absolute; top: 20px; right: 20px; background: transparent; border: none; color: white; font-size: 20px; cursor: pointer; z-index: 15; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s; box-shadow: 0 0 10px rgba(0,0,0,0.2); background: rgba(255,255,255,0.1); } .theme-toggle:hover { transform: rotate(45deg); background: rgba(255,255,255,0.2); } /* Tooltip for headlines */ .news-title { position: relative; } .news-title::after { content: "Click to read"; position: absolute; bottom: -25px; left: 0; background: rgba(0,0,0,0.7); color: white; padding: 5px 10px; border-radius: 5px; font-size: 12px; opacity: 0; transform: translateY(10px); transition: all 0.3s; pointer-events: none; font-weight: normal; white-space: nowrap; } .news-title:hover::after { opacity: 1; transform: translateY(0); } /* Dark mode styles */ body.dark-mode { background-color: #121212; } body.dark-mode .portal-header { background: linear-gradient(135deg, #000, #121212); } body.dark-mode .filter-btn { background: #2d2d2d; } body.dark-mode .filter-btn:hover, body.dark-mode .filter-btn.active { background: #5bc0be; } </style> </head> <body> <div class="portal-container"> <button class="theme-toggle" id="themeToggle">🌓</button> <header class="portal-header"> <h1 class="portal-title">GLOBAL DISPATCH</h1> <p class="portal-tagline">World news with unprecedented clarity</p> <div class="filters"> <button class="filter-btn active" data-category="all">All News</button> <button class="filter-btn" data-category="world">World</button> <button class="filter-btn" data-category="tech">Technology</button> <button class="filter-btn" data-category="climate">Climate</button> <button class="filter-btn" data-category="politics">Politics</button> </div> </header> <div class="breaking-news"> <div class="breaking-label">BREAKING</div> <div class="breaking-news-ticker">UN Security Council calls emergency meeting amid rising tensions in Eastern Europe • Global tech stocks surge 7% following AI breakthrough announcement • Extreme weather events displace thousands in coastal regions</div> </div> <div class="news-grid"> <div class="news-card featured" data-category="world"> <img class="news-image" src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Global Summit"> <div class="news-overlay"> <span class="news-category">WORLD</span> <h2 class="news-title">Global Climate Summit Reaches Historic Emissions Agreement After Marathon Negotiations</h2> <p class="news-excerpt">196 nations commit to aggressive carbon reduction targets following intense 72-hour final session, with significant financial pledges from developed nations.</p> <div class="news-meta"> <div class="news-author"> <img class="author-avatar" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Chen"> <span>Sarah Chen</span> </div> <span class="news-time">2 hours ago</span> </div> </div> </div> <div class="news-card" data-category="tech"> <img class="news-image" src="https://images.unsplash.com/photo-1558655146-d09347e92766?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="AI Technology"> <div class="news-overlay"> <span class="news-category">TECHNOLOGY</span> <h2 class="news-title">Breakthrough Quantum Computing Research Shatters Encryption Standards</h2> <p class="news-excerpt">Security experts call for immediate update to global digital infrastructure as researchers demonstrate 256-bit encryption breach.</p> <div class="news-meta"> <div class="news-author"> <img class="author-avatar" src="https://randomuser.me/api/portraits/men/32.jpg" alt="James Wilson"> <span>James Wilson</span> </div> <span class="news-time">5 hours ago</span> </div> </div> </div> <div class="news-card" data-category="climate"> <img class="news-image" src="https://images.unsplash.com/photo-1584824284206-014dbd523045?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Glacier Melting"> <div class="news-overlay"> <span class="news-category">CLIMATE</span> <h2 class="news-title">Greenland Ice Sheet Melting At Unprecedented Rate, Scientists Warn</h2> <p class="news-excerpt">New satellite data reveals critical tipping point could be reached decades earlier than previous models predicted.</p> <div class="news-meta"> <div class="news-author"> <img class="author-avatar" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Emma Richards"> <span>Emma Richards</span> </div> <span class="news-time">Yesterday</span> </div> </div> </div> <div class="news-card" data-category="politics"> <img class="news-image" src="https://images.unsplash.com/photo-1529107386315-e1a2ed48a620?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Senate Building"> <div class="news-overlay"> <span class="news-category">POLITICS</span> <h2 class="news-title">Landmark Campaign Finance Reform Bill Passes With Bipartisan Support</h2> <p class="news-excerpt">Legislation imposes strict limits on corporate donations and implements transparency requirements for political advertising.</p> <div class="news-meta"> <div class="news-author"> <img class="author-avatar" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Michael Brown"> <span>Michael Brown</span> </div> <span class="news-time">1 day ago</span> </div> </div> </div> <div class="news-card" data-category="tech"> <img class="news-image" src="https://images.unsplash.com/photo-1581090464777-f3220bbe1b8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Robotics"> <div class="news-overlay"> <span class="news-category">TECHNOLOGY</span> <h2 class="news-title">Autonomous Medical Robots Successfully Complete First Unassisted Surgery</h2> <p class="news-excerpt">Revolutionary AI-driven surgical system performs appendectomy with greater precision than human surgeons in clinical trial.</p> <div class="news-meta"> <div class="news-author"> <img class="author-avatar" src="https://randomuser.me/api/portraits/women/23.jpg" alt="Sophia Lee"> <span>Sophia Lee</span> </div> <span class="news-time">3 days ago</span> </div> </div> </div> <div class="news-card" data-category="world"> <img class="news-image" src="https://images.unsplash.com/photo-1566998361738-8d658aa9dde8?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Peace Talks"> <div class="news-overlay"> <span class="news-category">WORLD</span> <h2 class="news-title">Historic Peace Deal Ends 30-Year Regional Conflict In Southeast Asia</h2> <p class="news-excerpt">Agreement includes reparations, resource-sharing framework, and demilitarized border zones monitored by UN peacekeeping forces.</p> <div class="news-meta"> <div class="news-author"> <img class="author-avatar" src="https://randomuser.me/api/portraits/men/75.jpg" alt="David Kim"> <span>David Kim</span> </div> <span class="news-time">4 days ago</span> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Filter functionality const filterButtons = document.querySelectorAll('.filter-btn'); const newsCards = document.querySelectorAll('.news-card'); filterButtons.forEach(button => { button.addEventListener('click', function() { // Remove active class from all buttons filterButtons.forEach(btn => { btn.classList.remove('active'); }); // Add active class to clicked button this.classList.add('active'); const category = this.dataset.category; // Filter news cards newsCards.forEach(card => { if (category === 'all' || card.dataset.category === category) { card.style.display = 'block'; } else { card.style.display = 'none'; } }); }); }); // Add text shadow exploration interaction on headlines const newsHeadlines = document.querySelectorAll('.news-title'); newsHeadlines.forEach(headline => { headline.classList.add('interactive-shadow'); headline.addEventListener('click', function() { const card = this.closest('.news-card'); // Animate the card card.style.transition = 'transform 0.5s, box-shadow 0.5s'; card.style.transform = 'scale(1.05) translateY(-10px)'; card.style.boxShadow = '0 20px 50px rgba(0,0,0,0.3)'; // Reset after animation setTimeout(() => { card.style.transform = ''; card.style.boxShadow = ''; }, 500); }); }); // Theme toggle functionality const themeToggle = document.getElementById('themeToggle'); const body = document.body; themeToggle.addEventListener('click', function() { body.classList.toggle('dark-mode'); // Change icon based on theme if (body.classList.contains('dark-mode')) { themeToggle.textContent = '☀️'; } else { themeToggle.textContent = '🌓'; } }); // Animated News ticker pause on hover const newsTicker = document.querySelector('.breaking-news-ticker'); newsTicker.addEventListener('mouseenter', function() { this.style.animationPlayState = 'paused'; }); newsTicker.addEventListener('mouseleave', function() { this.style.animationPlayState = 'running'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LearnShadow - Education Platform</title> <style> :root { --primary: #3a86ff; --secondary: #8338ec; --accent: #ff006e; --light: #fdfcf9; --dark: #1e1e24; --success: #06d6a0; --warning: #ffbe0b; --section-padding: 1.5rem; --border-radius: 12px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--light); color: var(--dark); max-width: 700px; height: 700px; margin: 0 auto; overflow-x: hidden; display: flex; flex-direction: column; overflow-y: auto; } header { background: linear-gradient(135deg, var(--primary), var(--secondary)); padding: 1.5rem; color: white; border-radius: 0 0 var(--border-radius) var(--border-radius); position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(rgba(255, 255, 255, 0.1), transparent 70%); transform: rotate(30deg); z-index: 1; } .logo { display: flex; align-items: center; margin-bottom: 0.8rem; position: relative; z-index: 2; } .logo-icon { background-color: white; color: var(--primary); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 800; font-size: 20px; margin-right: 10px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1); } .logo-text { font-size: 1.5rem; font-weight: 700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .tagline { font-size: 0.9rem; opacity: 0.9; margin-bottom: 1rem; position: relative; z-index: 2; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } nav { display: flex; justify-content: space-between; position: relative; z-index: 2; } .nav-button { background-color: rgba(255, 255, 255, 0.15); color: white; border: none; border-radius: 6px; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(5px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .nav-button:hover { background-color: rgba(255, 255, 255, 0.25); transform: translateY(-2px); } main { flex: 1; padding: var(--section-padding); display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto; } .module { background-color: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; } .module:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .module-header { padding: 1.2rem 1.5rem; background: linear-gradient(to right, rgba(58, 134, 255, 0.05), rgba(131, 56, 236, 0.05)); border-bottom: 1px solid rgba(0, 0, 0, 0.05); display: flex; justify-content: space-between; align-items: center; } .module-title { font-size: 1.1rem; font-weight: 700; color: var(--dark); text-shadow: 1px 1px 1px rgba(58, 134, 255, 0.1); position: relative; transition: all 0.3s ease; } .module:hover .module-title { text-shadow: 2px 2px 4px rgba(58, 134, 255, 0.2); } .progress { font-size: 0.8rem; padding: 0.25rem 0.5rem; background-color: rgba(6, 214, 160, 0.1); border-radius: 12px; color: var(--success); font-weight: 500; } .module-content { padding: 1.5rem; } .key-term { display: inline-block; font-weight: 600; color: var(--dark); text-shadow: 1px 1px 1px rgba(131, 56, 236, 0.2); position: relative; transition: all 0.3s ease; cursor: help; } .key-term:hover { color: var(--secondary); text-shadow: 2px 2px 3px rgba(131, 56, 236, 0.3); } .key-term::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: linear-gradient(to right, var(--primary), var(--secondary)); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .key-term:hover::after { transform: scaleX(1); } .important-section { margin-top: 1rem; padding: 1rem; background-color: rgba(58, 134, 255, 0.05); border-left: 3px solid var(--primary); border-radius: 0 6px 6px 0; } .important-title { font-weight: 600; margin-bottom: 0.5rem; color: var(--primary); text-shadow: 1px 1px 1px rgba(58, 134, 255, 0.2); } .tooltip { position: fixed; background: white; padding: 0.8rem 1rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); max-width: 250px; z-index: 100; font-size: 0.9rem; color: var(--dark); opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .tooltip.visible { opacity: 1; transform: translateY(0); } .module-navigation { display: flex; justify-content: space-between; margin-top: 1rem; border-top: 1px solid rgba(0, 0, 0, 0.05); padding-top: 1rem; } .module-nav-button { background-color: transparent; color: var(--primary); border: 1px solid var(--primary); border-radius: 6px; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .module-nav-button:hover { background-color: var(--primary); color: white; transform: translateY(-2px); box-shadow: 0 3px 10px rgba(58, 134, 255, 0.2); } .quiz-option { display: block; margin: 0.8rem 0; padding: 0.8rem 1rem; background-color: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .quiz-option:hover { background-color: rgba(58, 134, 255, 0.05); border-color: rgba(58, 134, 255, 0.3); } .quiz-option.selected { background-color: rgba(58, 134, 255, 0.1); border-color: var(--primary); } .quiz-option.correct { background-color: rgba(6, 214, 160, 0.1); border-color: var(--success); } .quiz-option.incorrect { background-color: rgba(255, 0, 110, 0.1); border-color: var(--accent); } .sparkle { position: absolute; pointer-events: none; background: radial-gradient(circle, white 10%, transparent 70%); border-radius: 50%; opacity: 0; z-index: 10; animation: sparkle 0.8s forwards; } @keyframes sparkle { 0% { transform: scale(0); opacity: 0.8; } 100% { transform: scale(1); opacity: 0; } } .accessibility-controls { margin-top: 1rem; padding: 1rem; background-color: rgba(0, 0, 0, 0.02); border-radius: var(--border-radius); display: flex; align-items: center; } .accessibility-label { font-size: 0.9rem; margin-right: 1rem; } .shadow-strength { -webkit-appearance: none; width: 150px; height: 6px; background: linear-gradient(to right, rgba(58, 134, 255, 0.2), rgba(58, 134, 255, 0.8)); border-radius: 3px; outline: none; } .shadow-strength::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .shadow-strength::-webkit-slider-thumb:hover { transform: scale(1.2); } @media (max-width: 600px) { :root { --section-padding: 1rem; } .module-header { padding: 1rem; } .module-content { padding: 1rem; } .accessibility-controls { flex-direction: column; align-items: flex-start; } .accessibility-label { margin-bottom: 0.5rem; } .shadow-strength { width: 100%; } } </style> </head> <body> <header> <div class="logo"> <div class="logo-icon">L+</div> <div class="logo-text">LearnShadow</div> </div> <p class="tagline">Where typography enhances comprehension and retention</p> <nav> <button class="nav-button">My Courses</button> <button class="nav-button">Study Tools</button> <button class="nav-button">Progress</button> </nav> </header> <main> <div class="module"> <div class="module-header"> <h2 class="module-title">Cognitive Psychology</h2> <span class="progress">2/5 completed</span> </div> <div class="module-content"> <p> This module explores how <span class="key-term" data-definition="The psychological processes involved in acquiring and understanding knowledge.">cognitive processes</span> influence our learning and memory. When we understand how our brains process information, we can develop more effective study strategies. </p> <div class="important-section"> <h3 class="important-title">Key Learning Principle</h3> <p> <span class="key-term" data-definition="The theory that connecting new information to existing knowledge increases retention.">Elaborative encoding</span> creates stronger neural connections, making information easier to retrieve later. Try relating new concepts to personal experiences. </p> </div> <p style="margin-top: 1rem;"> Research shows that <span class="key-term" data-definition="The practice of distributing study sessions over time rather than cramming.">spaced repetition</span> is more effective than massed practice (cramming). The <span class="key-term" data-definition="The gradual decline in our ability to retain information over time.">forgetting curve</span> can be countered through regular review intervals. </p> <div class="module-navigation"> <button class="module-nav-button prev-button">Previous</button> <button class="module-nav-button next-button">Next</button> </div> </div> </div> <div class="module"> <div class="module-header"> <h2 class="module-title">Concept Check</h2> <span class="progress">Interactive</span> </div> <div class="module-content"> <p>What does <span class="key-term" data-definition="Information we retain without conscious effort to memorize it.">incidental learning</span> refer to in cognitive psychology?</p> <div class="quiz-options"> <div class="quiz-option" data-correct="false"> Learning that takes place in a classroom setting </div> <div class="quiz-option" data-correct="true"> Learning that occurs without intention to learn </div> <div class="quiz-option" data-correct="false"> Learning that requires significant mental effort </div> <div class="quiz-option" data-correct="false"> Learning that happens only during childhood </div> </div> <div class="important-section" style="margin-top: 1.5rem;"> <h3 class="important-title">Study Technique</h3> <p> Try using <span class="key-term" data-definition="A study method where you test yourself on material rather than simply reviewing it.">active recall</span> instead of passive re-reading. Research shows it strengthens memory pathways and improves long-term retention by up to 150%. </p> </div> </div> </div> <div class="accessibility-controls"> <span class="accessibility-label">Text Shadow Intensity:</span> <input type="range" min="1" max="5" value="2" class="shadow-strength" id="shadowStrength"> </div> </main> <div class="tooltip" id="tooltip"></div> <script> document.addEventListener('DOMContentLoaded', function() { const keyTerms = document.querySelectorAll('.key-term'); const tooltip = document.getElementById('tooltip'); const shadowStrength = document.getElementById('shadowStrength'); const quizOptions = document.querySelectorAll('.quiz-option'); const moduleNavButtons = document.querySelectorAll('.module-nav-button'); // Initialize default shadow strength updateShadowStrength(2); // Shadow strength control shadowStrength.addEventListener('input', function() { updateShadowStrength(this.value); }); function updateShadowStrength(value) { const intensity = parseInt(value); const keyTerms = document.querySelectorAll('.key-term'); const importantTitles = document.querySelectorAll('.important-title'); const moduleTitles = document.querySelectorAll('.module-title'); // Update key terms shadow keyTerms.forEach(term => { term.style.textShadow = `${intensity/2}px ${intensity/2}px ${intensity}px rgba(131, 56, 236, ${0.1 + (intensity * 0.03)})`; }); // Update important section titles shadow importantTitles.forEach(title => { title.style.textShadow = `${intensity/2}px ${intensity/2}px ${intensity}px rgba(58, 134, 255, ${0.1 + (intensity * 0.03)})`; }); // Update module titles shadow moduleTitles.forEach(title => { title.style.textShadow = `${intensity/2}px ${intensity/2}px ${intensity}px rgba(58, 134, 255, ${0.05 + (intensity * 0.03)})`; }); } // Tooltip functionality for key terms keyTerms.forEach(term => { term.addEventListener('mouseenter', function(e) { const definition = this.getAttribute('data-definition'); tooltip.textContent = definition; tooltip.classList.add('visible'); // Position tooltip const rect = this.getBoundingClientRect(); const tooltipHeight = tooltip.offsetHeight; tooltip.style.left = `${rect.left}px`; // Position above or below depending on space if (rect.top > tooltipHeight + 20) { tooltip.style.top = `${rect.top - tooltipHeight - 10}px`; } else { tooltip.style.top = `${rect.bottom + 10}px`; } // Add sparkle effect addSparkleEffect(this); }); term.addEventListener('mouseleave', function() { tooltip.classList.remove('visible'); }); }); // Quiz functionality let answered = false; quizOptions.forEach(option => { option.addEventListener('click', function() { if (answered) return; // Mark the selected option quizOptions.forEach(opt => opt.classList.remove('selected')); this.classList.add('selected'); // Check if correct const isCorrect = this.getAttribute('data-correct') === 'true'; setTimeout(() => { if (isCorrect) { this.classList.add('correct'); addMultipleSparkles(this, 5); } else { this.classList.add('incorrect'); // Show the correct answer quizOptions.forEach(opt => { if (opt.getAttribute('data-correct') === 'true') { opt.classList.add('correct'); } }); } answered = true; }, 500); }); }); // Navigation buttons effects moduleNavButtons.forEach(button => { button.addEventListener('click', function(e) { addSparkleEffect(this); // Simulate navigation feedback without actual navigation this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 200); }); }); // Sparkle effect functions function addSparkleEffect(element) { const sparkle = document.createElement('div'); sparkle.classList.add('sparkle'); const rect = element.getBoundingClientRect(); const size = Math.max(rect.width, rect.height) * 1.5; sparkle.style.width = `${size}px`; sparkle.style.height = `${size}px`; sparkle.style.left = `${rect.left + rect.width/2 - size/2}px`; sparkle.style.top = `${rect.top + rect.height/2 - size/2}px`; document.body.appendChild(sparkle); // Remove sparkle after animation setTimeout(() => { sparkle.remove(); }, 1000); } function addMultipleSparkles(element, count) { for (let i = 0; i < count; i++) { setTimeout(() => { addSparkleEffect(element); }, i * 150); } } }); </script> </body> </html>
