Html codes

54 views02:15

SVG drawing animation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Drawing Animation</title>
  <style>
    /* SVG styling */
    .icon {
      width: 400px;
      height: 400px;
      color: #F06529; 
    }


    /* Path styling */
    .icon path {
      fill: none; /* Start with no fill for drawing effect */
      stroke: currentColor; /* Use currentColor for stroke */
      stroke-width: 1; /* Thin stroke for clarity */
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: var(--path-length);
      stroke-dashoffset: var(--path-length);
      animation: draw 2s ease-in-out forwards;
    }

    /* Drawing animation */
    @keyframes draw {
      0% {
        stroke-dashoffset: var(--path-length);
        fill: none;
      }
      80% {
        stroke-dashoffset: 0;
        fill: none;
      }
      100% {
        stroke-dashoffset: 0;
        fill: currentColor; /* Restore original fill */
      }
    }
  </style>
</head>
<body class="dark"> <!-- Add 'dark' class to test dark mode -->
  <svg class="icon w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24">
    <path d="m3 2 1.578 17.824L12 22l7.467-2.175L21 2H3Zm14.049 6.048H9.075l.172 2.016h7.697l-.626 6.565-4.246 1.381-4.281-1.455-.288-2.932h2.024l.16 1.411 2.4.815 2.346-.763.297-3.005H7.416l-.562-6.05h10.412l-.217 2.017Z"/>
  </svg>

  <script>
    // Get the path element
    const path = document.querySelector('.icon path');
    // Calculate the path's total length
    const pathLength = path.getTotalLength();
    // Set the path length as a CSS custom property
    path.style.setProperty('--path-length', pathLength);
  </script>
</body>
</html>

54 views14:44

Html codes

<picture> — Responsive image loading
<source> — Define media file formats
<dialog> — Create modal dialogs
<template> — Hidden HTML templates
<slot> — Insert custom content in Web Components
<main> — Marks the main content area
<mark> — Highlight text
<time> — Define a date or time
<meter> — Display scalar values (e.g. score)
<progress> — Show task progress (e.g. loading)
<output> — Display calculation results
<details> — Expandable/collapsible content
<summary> — Header for <details>
<figure> — Container for images or diagrams
<figcaption> — Caption for a <figure>

47 views11:13

Html codes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Avatar Animation</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #0f0f0f;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: 'Segoe UI', sans-serif;
    }

    .coder-avatar {
      position: relative;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 0 25px rgba(0, 255, 170, 0.5);
      cursor: pointer;
    }

    .coder-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      z-index: 2;
      position: relative;
      transition: transform 0.5s ease;
    }

    .coder-avatar:hover img {
      transform: scale(1.05);
    }

    .coder-avatar::before {
      content: '';
      position: absolute;
      top: -25%;
      left: -25%;
      width: 150%;
      height: 150%;
      background: conic-gradient(
        from 0deg,
        #00ffcc,
        #0066ff,
        #00ffcc
      );
      animation: spin 5s linear infinite;
      z-index: 0;
      border-radius: 50%;
      filter: blur(10px);
    }

    .coder-avatar::after {
      content: '';
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      background: #0f0f0f;
      border-radius: 50%;
      z-index: 1;
    }

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

  <div class="coder-avatar">
    <img src="https://i.pravatar.cc/300?img=12" alt="programmer">
  </div>

</body>
</html>

46 views10:02

Html codes

<!DOCTYPE html>
<html>
<head>
  <title>Ably Real-Time Chat</title>
  <script src="https://cdn.ably.io/lib/ably.min-1.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }
    #messages {
      border: 1px solid #ccc;
      padding: 10px;
      height: 300px;
      overflow-y: scroll;
      margin-bottom: 10px;
    }
    input, button {
      padding: 10px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h2>💬 Ably Real-Time Chat</h2>
  <div id="messages"></div>
  <input type="text" id="msgInput" placeholder="Write a message..." />
  <button onclick="sendMessage()">Send</button>

  <script>
    const ably = new Ably.Realtime('key');
    const channel = ably.channels.get('chat');

    channel.subscribe('message', function(msg) {
      const p = document.createElement('p');
      p.textContent = msg.data;
      document.getElementById('messages').appendChild(p);
      document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;
    });

    function sendMessage() {
      const input = document.getElementById('msgInput');
      const message = input.value.trim();
      if (message) {
        channel.publish('message', message);
        input.value = '';
      }
    }
  </script>
</body>
</html>

58 views14:34

59 views13:50

New style qr code

52 views05:46

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

screenshot to html.html

56 views16:53

46 views19:58

CodePen Blog
Chris’ Corner: Liquid Ass

First a quick heads up about… me. I have a weird itch to do “streaming”, so I’m letting myself just be a hardcore beginner and giving it a shot. The plan is just hang out with whoever shows up and make stuff and talk about front end web development and design. So:

* Me on Twitch
* CodePen on YouTube

Seems like those two platforms make the most sense for that, so here we go.

I made this super sick banner for Twitch, which you can’t even see because it’s covered by UI stuff lol. https://blog.codepen.io/wp-content/uploads/2025/06/Frame-1-1024x410.png Welp.

I suppose you knew that there’s no way I’m letting “liquid glass” slide by this week. Or should I say: https://blog.codepen.io/wp-content/uploads/2025/06/bafkreichpccmnpuyg6votcyb3vjza7b4zfpnpcbytuxhcxsesr43p6phd4.jpg Amazing.

Marie actually beat me to it doing a whole Spark issue on it last week. Obviously CodePen users are all over this design trend, as it’s an absolutely magnetic challenge in CSS. Kevin Powell did a video which happened to drop at the perfect time. Kevin is so good at these things I’m like sick with jealousy about it. Maybe my stream will level up my video teaching skills.

It’s not like CodePen is only now starting to have these glass-like effects. People have been doing it for ages. It had a particular boon when backdrop-filter: blur(2px); became a thing — that’s more like “frosted” glass — but still, Apple is doing that, too. Maybe -webkit-box-reflect will get new life on the web also? Feels related. Sebastiaan de With fortold it nearly perfectly well. 👏👏👏. Little touches like the reflective progress bar are so cool. https://blog.codepen.io/wp-content/uploads/2025/06/Mica-Video-Playback-1-1024x527.png I don’t know if Apple is actually doing this particular detail, I don’t have the new OS yet, but Sebastiaan’s idea is awesome.
Apple is actually quite serious about this, and released a video of the whole idea. Honestly I think it’s kinda awesome looking. https://blog.codepen.io/wp-content/uploads/2025/06/lg-controls-1024x662.jpeg But I did kinda 😬 about the accessibility of it. https://blog.codepen.io/wp-content/uploads/2025/06/glass-tabs-1024x486.jpg No chance the text “Nao” above is passing any contrast test. Nao way amiright?

Feels like text/background contrast has taken a hit. I haven’t seen a full throated takedown of it yet (there are some mentions though), but I imagine that’s coming. There are already settings in there to tone the effects down, I hear.

I thought out loud the other month: literally everything ships inaccessibly. And since having that thought I’ve seen a half dozen things ship that way. Certainly we’re not immune to it, but it’s good motivation to get some more accessibility testing done (we’ve done a good bit already!) on our new editor before it goes out.

Random thing before I sign off. The Oatmeal on Erasers is lovely.

50 views19:58

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

mountain_relief_3d.html

24.4 KB

55 views07:22

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

An ID SELECTOR in CSS file starts with

Anonymous Quiz

4 voters55 views04:55

Html codes

Trackable_QR_Code_Generator_–_Free,_Custom_Colors,_SVG,_Logo_&_Gradient.html

41.3 KB

Share my html file

59 views07:22

Html codes

49 views16:04

Html codes

Photo

CodePen Blog
Chris’ Corner: Modern CSS Features Coming Together

I like the term “content aware components” like Eric Bailey uses in the Piccalilli article Making content-aware components using CSS :has(), grid, and quantity queries. Does a card have a photo? Yes, do one thing, no, do another. That sort of thing. Eric has some good examples where a UI component has a bunch more “tags” than another, so the layout adjusts to accommodate them better. https://blog.codepen.io/wp-content/uploads/2025/06/Screenshot-2025-06-17-at-2.21.27 PM-960x1024.png Thanks to :has(), the idea of “quantity queries” (e.g. style an element if there are, say, 4 or more of an element) have gotten a lot easier. The way I figure it, we could do like:

.card:has(.tag:nth-child(4)) {
  /* apply styles to the card because there are at least 4 tags */
}

Admittedly, the logic gets a little bit more complicated if you want like “3 or less tags”, but that’s exactly what Eric covers in the article, linking up the original ideas and resources, so you’re in luck.

At CSS Day the other week, I listened to Ahmad Shadeed have a wonderful idea on stage. Imagine a layout with one item, you show it. Two items? Side by side? Three items? Maybe two on top and one on the bottom. Four? Two by Two. Five? Well! That’s getting to be a lot of items. We could break them into a carousel. All entirely in CSS. That’s wild. I’d love to build that one day. Maybe I’ll try to stream it one of these days. (Of course, as I write this Kevin Powell put out a video that verges on the idea, and it’s very clever.)

Speaking of Ahmad, he’s got a great article introducing the big improvements that the attr() function has gotten. I absolutely love how we can pluck attribute values out of HTML and actually have them be useful now. I think we’ll realize the power of that more and more. But it occurs to me here that it could factor into this quantity query situation. Say you trust your server to know and output stuff like this. So like: ... You can get your hands on 13, as an actual number not a string, in CSS now like: attr(data-cards type(<number), 2)
The number 2 above is a fallback. With a number like that, it makes me think that maybe-just-maybe, we could combine it with the newfangled if() commands in CSS (See Una’s great video) to write the same kind of “quantity query” logic.

Ya know how Sass has @mixin to repeat blocks of CSS? Native CSS doesn’t have that yet, but style queries are pretty close. I snagged this screenshot out of Kevin’s video (in CodePen, naturally): https://blog.codepen.io/wp-content/uploads/2025/06/Screenshot-2025-06-19-at-8.05.51 AM-1024x790.png See how he just flips on a --custom-property then the style query matches when that custom property is set and outputs a block of styles? That feels an awful lot like a mixin to me. Miriam has a nice homebase page for native mixins, which links to some very active discussion on it. At the pace CSS is moving I imagine we’ll have it before we know it. Just @applying a @mixin seems like a more straightforward approach than the style query approach, and more flexible as it’s likely they’ll take parameters, and possibly even slots. CSS carousels amount to a pretty hefty amount of CSS. Wouldn’t it be cool to make that into a hefty @mixin that takes parameters on what features you want? Ship it.

In other news, gap decorations are starting to be a thing and that’s wonderful. Hoping they’ll move right onto styling a grid area without needing an HTML element there, that would be just as wonderful. I’m still hesitant on making entire columns of article content into grids, but that’s a me-problem, I see others are coming around on the idea.

49 views16:04

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

🚀 What is Vibe Coding?
It’s a new way to build software — where you just say what you want, and AI helps you code it.
No boilerplate. No burnout. Just you, your idea, and a good vibe. 💻✨

🧠 AI Assistants You’ll Love:
Gemini · Claude 4 · Copilot · Cursor · Ghostwriter · Codeium

🎨 UI Builders That Feel Like Magic:
v0.dev · Lovable.dev · Framer AI · Locofy.ai · WebCrumbs

⚡ Dev Tools With Style:
Zed · Supabase · Ray.so · Carbon

💡 Why it's called vibe coding:
Because it’s fast, creative, visual, and fun.
You’re not just coding — you’re creating.

🧵 Try these tools, build what you love, and let the AI handle the boring parts.

Vibe coding = prompts + flow + joy.

39 views06:58

About

Blog

Apps

Platform