nowfound

Life & fun · April 2, 2011

CA

CSS3 Animated Glowing Forms

I remember seeing the Dragon Labs Dragonfish Glowing Form Demo[1] when it first came out, and it always stuck in my head. They implement the effect by using a rather large background image and a mask image and move the background image around via Javascript. I was inspired and wanted to see how close I could get with CSS3. I recommend using a Webkit browser [and you can see an alternate version of the animation on Firefox 4]. [1] http://labs.dragoninteractive.com/panel/demo/

CSS3 Animated Glowing Forms launched on April 2, 2011 with 182 votes, #5 of 229 launches that month and more than 95% of that year's launches.

Visit kaylarose.github.com ↗Alternativestop 2% of April 2011

In plain words

CSS3 Animated Glowing Forms is a web design demonstration that recreates a glowing form animation effect using CSS3 instead of JavaScript and image manipulation. Inspired by the Dragon Labs Dragonfish demo, it shows how to achieve dynamic glowing borders around form elements through pure CSS animations. The project is for web developers and designers interested in CSS3 techniques and works best in Webkit browsers, with an alternate version available for Firefox.

written from the facts on this page · September 2026

Does a similar job

all alternatives →
  • CSS3 animation2012 · thegoodman.cc · ▲271

    An experiment with basic CSS3 animations.

  • CSS generator for a high-def glass effect2025 · glass3d.dev · ▲420

    There are lots of glassmorphism generators out there, but I wanted to push the effect further! This project is the result of months of experimenting with CSS property layering and battling browser quirks. Cross-browser compatibility is actually the reason I rely on ::before and ::after pseudo-elements to build up the effect. Move the color/opacity to the main element, and you’ll get weird color bleed on the corners in Chrome. Move the texture, and it muddles the bevel’s specular highlight. Move the bevel, and it gets blurred out by the backdrop-filter. And so on! Layers include: *…

  • RoughNotation – create and animate hand-drawn annotations on a web page2020 · roughnotation.com · ▲696

    A small JavaScript library to create and animate hand-drawn annotations on a web page

  • CSS Animation Cheat Sheet2014 · justinaguilar.com · ▲232

    Awesome CSS3 plugin for spiffy animations

  • Webflow 3D Transforms2015 · 3d-transforms.webflow.com · ▲318

    Build 3D interactions visually, without writing any code

  • BJ
    Bounce.js – A tool for generating CSS3 animations2014 · bouncejs.com · ▲172

More life & fun this month

the category →

Source: Show HN post ↗

Launched alongside, April 2011

the whole month →
  • my weekend project, Gumroad▲396

    Start selling what you know, see what sticks, and get paid. Simple and effective.

    Work · 2011 · gumroad.com

  • LS
    Let's end the Programmer Salary Taboo▲278

    Life & fun · 2011 · salaryshare.me

  • MW
    My weekend project, tracking the services you can't have in Canada▲212

    Work · 2011 · cantada.ca

  • MA
    made a html5 game, polished it many many times▲211

    hi all, I've always wanted to make my own game, but couldn't afford a thousand-dollar adobe (flash+photoshop) license. I'm not a talented programmer, have no degree in CS. But I understand some elements of design. So I got me a copy of ImpactJS, and after about 5 months of steep learning curve (at least for me), I managed to come up with a game. I also integrated it with a highscore and badge system, similar to what you get at Kongregate. You need to login with Google/OpenID to earn badges/scores. link is: http://www.hotbazooka.com/privatejoe hope to hear some feedback/questions from you guys!

    Life & fun · 2011 · hotbazooka.com

  • HT
    Hacker Typer [joke]▲160

    Ever wanted to type as fast as those amazing hackers in the movies? now you can! just write something. Yes, i was really bored. To change writing speed: javascript:writer.speed=10;

    Life & fun · 2011 · duiker101.tk

  • An isometric marble run build in CoffeeScript▲141

    Elegance in Every Detail

    Life & fun · 2011 · marbleo.us