Html codes

193 views08:44

🌟 Elevate Your Website with Innovative CSS Animation and Transition Effects! 🌟

Dive into the world of CSS animations and transitions to add a touch of magic to your website. Explore mesmerizing techniques that will captivate your visitors and elevate their browsing experience.

1. Text Shadow Pulse Effect:

@keyframes pulse {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }
    50% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 1);
    }
}

.pulsing-text {
    animation: pulse 1.5s infinite;
}

2. Background Color Shift:

.button {
    background-color: #3498db;
    transition: background-color 0.4s ease;
}

.button:hover {
    background-color: #2ecc71;
}

3. 3D Flip Card:

<div class="card">
    <div class="front">Front</div>
    <div class="back">Back</div>
</div>

.card {
    width: 200px;
    height: 300px;
    perspective: 1000px;
}

.card div {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 1px solid #ccc;
}

4. Ripple Effect on Click:

.button {
    overflow: hidden;
    position: relative;
}

.button::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple 0.6s linear;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

5. Scrolling Progress Indicator:

<div class="progress-bar"></div>

.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 5px;
    background-color: #3498db;
    transition: width 0.1s ease;
}

6. Image Hover Zoom:

.image-hover {
    overflow: hidden;
}

.image-hover img {
    transition: transform 0.5s ease;
}

.image-hover:hover img {
    transform: scale(1.1);
}

7. Slide In Navigation:

<div class="nav">
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</div>

.nav {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.nav.active {
    transform: translateX(0);
}

Ready to enchant your website with these CSS codes? Explore these techniques and transform your digital experience!

🚀 #CSSAnimations #WebDesign #Innovation #html #web #new

---

@Html_codee

128 views14:45

Html codes

🎨 New HTML Code: Unlock the Power of HTML!
💻 Today’s Topic: Create a Stylish Card with Hover Effects!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Card</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #74ebd5, #9face6);
            font-family: Arial, sans-serif;
        }
        .card {
            background: #ffffff;
            width: 300px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        }
        .card img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 10px;
        }
        .card h3 {
            margin: 10px 0;
            font-size: 22px;
            color: #333;
        }
        .card p {
            font-size: 16px;
            color: #777;
        }
    </style>
</head>
<body>
    <div class="card">
        <img src="https://via.placeholder.com/100" alt="Avatar">
        <h3>3legsbird</h3>
        <p>Web Developer & Designer</p>
    </div>
</body>
</html>

🔥 Try this code and add your own styles to make it unique!

📌 Don’t forget to subscribe to @Html_codee for more creative HTML tutorials. Share this post with your friends and level up your coding skills!

#HTML #CSS #WebDevelopment

132 views13:42

Html codes

🚀 Exciting News! 🎉 I just created an awesome animated GIF with Python, showcasing a stunning nebula image! Here's a sneak peek into how it was done:

import numpy as np
import cv2
import imageio
from PIL import Image

# Load and resize the nebula image
image_path = "/path/to/your/nebula_image.png"
nebula_img = Image.open(image_path)
nebula_img = nebula_img.resize((512, 896))

# Convert image to a NumPy array
frame = np.array(nebula_img)

# Create animation frames with a cool pulsating effect 🌟
frames = []
num_frames = 30  # Crafting a 1-second animation at 30 FPS 

for i in range(num_frames):
    alpha = 1 + 0.1 * np.sin(2 * np.pi * i / num_frames)
    pulsating_frame = cv2.convertScaleAbs(frame, alpha=alpha, beta=0)
    frames.append(pulsating_frame)

# Save the animation as a looping GIF
output_path = "/path/to/your/nebula_animation.gif"
imageio.mimsave(output_path, frames, fps=30)

print(f"Check out the mesmerizing animation: {output_path}")

✨ Dive into the cosmic beauty and let me know what you think! 💫 #Python #Animation #GIF #CodingMagic #html #new 🌌

85 views13:08

Html codes

🧠 HTML Tip of the Day: Create a Responsive Image Gallery with Just HTML & CSS!

💡 You don’t always need JavaScript to build awesome layouts!

<div class="gallery"> <img src="https://picsum.photos/id/1015/400/300" alt="Gallery Image"> <img src="https://picsum.photos/id/1016/400/300" alt="Gallery Image"> <img src="https://picsum.photos/id/1019/400/300" alt="Gallery Image"> </div> <style> .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 10px; } .gallery img { width: 100%; height: auto; border-radius: 10px; } </style>

✅ Works on all devices
✅ No JavaScript needed
✅ Fast and mobile-friendly

🔁 Copy, paste, and try it now!

💬 Let me know if you want the same gallery with hover effects or lightbox!

#HTML #CSS #WebDev #Html_codee

79 views03:02

Html codes

✨ Today's Code Tip

Add a stunning 3D glowing button to your portfolio or website with this CSS snippet:

<button class="glow-btn">Click me</button>

<style>
.glow-btn {
  padding: 12px 24px;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  border: none;
  border-radius: 12px;
  box-shadow: 0 0 15px #6a11cb;
  transition: all 0.3s ease;
}
.glow-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px #2575fc, 0 0 40px #6a11cb;
}
</style>

This glowing button adds interactive and modern flair to your site.

More effects coming soon — stay tuned!

#html #css #frontend #code #development

65 views13:12

Html codes

🚀 Quick Tip: Animate with Ease!

Bring your web elements to life using simple CSS keyframe animations. Try this extended pulsing + shadow effect:

<div class="pulse-box">Hover me!</div>

<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #121212;
  margin: 0;
  font-family: Arial, sans-serif;
}

.pulse-box {
  display: inline-block;
  padding: 20px 40px;
  background: #00bcd4;
  color: white;
  font-size: 24px;
  font-weight: bold;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,188,212,0.4);
  animation: pulse 2s ease-in-out infinite;
  cursor: pointer;
  transition: transform 0.2s;
}

.pulse-box:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(0,188,212,0.6);
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(0,188,212,0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 35px rgba(0,188,212,0.7);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(0,188,212,0.4);
  }
}
</style>

💡 This animation works beautifully for buttons, notification cards, or interactive banners.

✨ Make your UI more dynamic and modern with just a few lines of CSS!

#css #animation #webdesign #html #frontend #uiux

62 views11:09

Html codes

🎯 Code Hack: Neon Text Effect

Give your website a retro-futuristic feel with this simple glowing neon text effect using only CSS:

<h1 class="neon-text">Neon Vibes</h1>

<style>
body {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.neon-text {
  font-size: 48px;
  color: #fff;
  text-shadow:
    0 0 5px #0ff,
    0 0 10px #0ff,
    0 0 20px #0ff,
    0 0 40px #0ff,
    0 0 80px #0ff;
  font-family: 'Courier New', monospace;
  animation: flicker 1.5s infinite alternate;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }
  20%, 24%, 55% {
    opacity: 0.4;
  }
}
</style>

🌟 Add a cyberpunk flair to headers, banners, or titles.

More daily UI tricks and CSS magic right here 👉 @Html_codee

#neon #css #html #frontend #design #webeffects

58 views04:01

Html codes

🌀 CSS Illusion: Hypnotic Spinner

Not your average loader — this CSS hypnotic animation is an eye-catcher you can use for loading states or just to impress your users!

<div class="hypno-loader"></div>

<style>
body {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.hypno-loader {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#0ff, #00f, #f0f, #0ff);
  animation: spin 2s linear infinite;
  mask-image: radial-gradient(circle, black 40%, transparent 41%);
  -webkit-mask-image: radial-gradient(circle, black 40%, transparent 41%);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

🎨 Use it in creative portfolios, game loading pages, or as Easter eggs in your site.

More weird, wild, and useful CSS hacks daily here → @Html_codee

#css #animation #creative #html #frontend #weirdcss

48 views13:56

Html codes

🎉 Fun Project: Dancing Emoji Party

Bring life to your web page with this fun, animated dancing emoji effect. Pure HTML + CSS + JS = joy!

<div id="party-zone"></div>

<style>
body {
  background: #111;
  margin: 0;
  overflow: hidden;
}

#party-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.emoji {
  position: absolute;
  font-size: 2rem;
  animation: float 5s linear infinite;
  user-select: none;
}

@keyframes float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-10vh) rotate(720deg);
    opacity: 0;
  }
}
</style>

<script>
const zone = document.getElementById("party-zone");
const emojis = ["🎉", "🔥", "✨", "💻", "🧠", "🎵", "🚀", "👾"];

function spawnEmoji() {
  const emoji = document.createElement("div");
  emoji.classList.add("emoji");
  emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
  emoji.style.left = Math.random() * 100 + "vw";
  emoji.style.fontSize = Math.random() * 2 + 1 + "rem";
  emoji.style.animationDuration = Math.random() * 3 + 3 + "s";
  zone.appendChild(emoji);

  setTimeout(() => emoji.remove(), 6000);
}

setInterval(spawnEmoji, 200);
</script>

🎊 Use this for celebrations, easter eggs, or just to surprise your visitors with some fun!

More creative web ideas at 👉 @Html_codee

#fun #javascript #frontend #animation #html #css #codeparty

43 views14:04

Html codes

🌐 How to Host Your Website for Free – Quick Guide

Not sure where to host your site? Choose based on what it's built with:

🔹 HTML + PHP
✅ Use: x10Hosting
– Supports PHP
– Easy file upload
– Add to Google Search
🌐 x10hosting.com

🔹 React / Next.js
✅ Use: Vercel
– Perfect for frontend frameworks
– Git-based auto deploy
– Free custom domain
🌐 vercel.com

🔹 Python (Flask/Django)
✅ Use: Render
– Great for backend apps
– Free tier available
🌐 render.com

📌 You can submit any of these to Google Search Console and get indexed.

#FreeHosting #x10Hosting #Vercel #Render #WebDev #NextJS #Python #PHP #HTML

Vercel

Vercel: Build and deploy the best web experiences with the AI Cloud

Vercel gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.

❤1

67 views10:55

About

Blog

Apps

Platform