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

21–30 of 146 posts

Re: A Single Div

#21

Post by vlunkr »

leni536 wrote: post #9

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 CS…

By creating images in css you don't have to load any additional assets. But I suspect these are more just for the author to show off her skills :) *EDIT his -> her

Re: A Single Div

#23

Post by untog »

abritishguy wrote: post #13
mikeryan wrote: post #10

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

I disagree - you still only have one element in markup which is the whole point.

But when you're using CSS to turn one element into three... what is the "whole point", exactly?

Re: A Single Div

#24

Post by inflagranti »

vlunkr wrote: post #21
leni536 wrote: post #9

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 CS…

By creating images in css you don't have to load any additional assets. But I suspect these are more just for the author to show off her skills :) *EDIT his -> her

AFAIK you can embed images in CSS using data URIs, so there goes that argument and only the show-off one remains ;)

Re: A Single Div

#25

Post by dpeck »

shmerl wrote: post #20

What is the point of doing that instead of using SVG?

you're not allowed to ask that these days, we have to celebrate using inferior means for the sake of doing so.

Re: A Single Div

#26

Post by jtheory »

jfoutz wrote: post #6
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%…

Different gradients (sometimes linear, sometimes radial), and/or box-shadow rules like this:

  #camera div:after {
    width: 100px;
    height: 100px;
    margin-left: -20px;
    top: 15px;
    left: 50%;
    z-index: 3;
    background: linear-gradient(45deg, #ccc 40%, #ddd 100%);
    border-radius: 50%;
    box-shadow: 0 3px 2px #999, 1px -2px 0 white, -1px -3px 2px #555, 0 0 0 15px #c2c2c2, 0 -2px 0 15px white, -2px -5px 1px 17px #666, 0 10px 10px 15px rgba(0,0,0,0.3), -90px -51px 1px -43px #aaa, -90px -50px 1px -40px #888, -90px -51px 0 -34px #ccc, -90px -50px 0 -30px #aaa, -90px -48px 1px -28px rgba(0,0,0,0.2), -124px -73px 1px -48px #eee, -125px -72px 0 -46px #666, -85px -73px 1px -48px #eee, -86px -72px 0 -46px #666, 42px -82px 1px -48px #eee, 41px -81px 0 -46px #777, 67px -73px 1px -48px #eee, 66px -72px 0 -46px #666, -46px -86px 1px -45px #444, -44px -87px 0 -38px #333, -44px -86px 0 -37px #ccc, -44px -85px 0 -34px #999, 14px -89px 1px -48px #eee, 12px -84px 1px -48px #999, 23px -85px 0 -47px #444, 23px -87px 0 -46px #888;
  }
Neat results -- I'm not sure how practical these specific techniques are to everyday development, but of course a project like this provides the creator with a strong motivation to seriously master everything available in CSS; and the end result of that has obvious practical use.

Re: A Single Div

#27

Post by nfoz »

vlunkr wrote: post #21
leni536 wrote: post #9

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 CS…

By creating images in css you don't have to load any additional assets. But I suspect these are more just for the author to show off her skills :) *EDIT his -> her

*her skills

Re: A Single Div

#28

Post by jtheory »

vlunkr wrote: post #21
leni536 wrote: post #9

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 CS…

By creating images in css you don't have to load any additional assets. But I suspect these are more just for the author to show off her skills :) *EDIT his -> her

I'd say it's an artistic constraint.

It forced her to search through everything possible in CSS (an obviously-limited medium), and get creative to convince it to draw these.

Re: A Single Div

#29

Post by vlunkr »

inflagranti wrote: post #24
vlunkr wrote: post #21

Earlier quoted context omitted.

By creating images in css you don't have to load any additional assets. But I suspect these are more just for the author to show off her skills :) *EDIT his -> her

AFAIK you can embed images in CSS using data URIs, so there goes that argument and only the show-off one remains ;)

You can do that, but I think embedded images are slightly larger than the original because the way they are encoded. But still, images are more practical since these would be a cross-browser nightmare.

Re: A Single Div

#30

Post by shmerl »

dpeck wrote: post #25
shmerl wrote: post #20

What is the point of doing that instead of using SVG?

you're not allowed to ask that these days, we have to celebrate using inferior means for the sake of doing so.

The author commented: https://twitter.com/lynnandtonic/status/504378544349126656

> Don't worry folks, I do know what SVG is. ;)

Post reply on HN