Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

A Single Div

a.singlediv.com

Post reply on HN
Print view View original

1–10 of 146 posts

Re: A Single Div

#6

Post by jfoutz »

infinitivium wrote: post #3

Would love to see a blog post detailing some of these techniques.

looks like the big trick is rendering to the background image:

    #mario-mushroom div {
      width: 170px;
      height: 140px;
      margin-left: -85px;
      margin-top: -90px;
      background-image: radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%), linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%), radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%), radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%), radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%), linear-gradient(to bottom, #ef0015 20%, #b2000c 100%);
      border-radius: 140px 140px 80px 80px;
    }

Re: A Single Div

#7

Post by tux3 »

kelvin0 wrote: post #2

Could someone please enlighten me as to what I am looking at? The images are nice, and ...?

That's clever. It didn't even slow done my modest laptop.

Re: A Single Div

#9

Post by leni536 »

They are really nice but I really don't see the point why they are implemented in css. Most of the images make use of the capability of directly using gradients in the background-image property. Of course it could be easily replaced by the appropriate svg element.

For the lollypop shadow I would make use of the 3D transformation capabilities of CSS3. AFAIK svg is only capable of affine transformations (why?) while CSS3 can handle perspective transformations too.

Re: A Single Div

#10

Post by mikeryan »

The first couple of these all have before and after pseudo elements. If you're going to use those its kind of cheating calling it a single div when you have 3 styleable elements
Post reply on HN