10 ms·

A Single Div

535 points by duck 10y ago

rawnlq 10y ago
Just wondering, is there still any legitimate reason for doing this over using something like svg? Or is it mostly to show off in the same spirit as obfuscated C contests or demo scenes?
- gkoberger 10y ago
  It's definitely just showing off what you can do with a single div and CSS, much like your latter examples. It's an experiment in constraints. However, I could see something like this being useful in the case where you're using a third-party site and are only allowed to edit CSS. You probably don't need something as complicated as a cross-stitched heart, however it does show some techniques for squeezing as much in as possible. It also could be useful for a Font-Awesome-style icon set, where you just type <i class="icon-flower"></i>, although I imagine most people would prefer to just do something like <img src="/flower.svg">.
  - derefr 10y ago
    Personally, I'd prefer .icon-flower:before { content: url(/flower.svg); } —which would effectively treat the SVG not as an image or background or anything, but rather as a character glyph from a synthesized single-character graphical-emoji font—meaning your SVG design would be display:inline'd at the current font-size, including font-styles (oldschool faux-italics) and text-decorations (properly-positioned and shaped underline/outline drawn before the SVG glyph's stroke.) The text engine is already incredibly expressive for doing arbitrary vector-glyph layout; so if you're creating your own one-off vector glyphs, why shouldn't you be allowed to manipulate them using the text engine?
    - manmal 10y ago
      That's an option if you want your icon monocolored, but else you'll need the other options. Or, if you want a responsive icon, you'll need the pure CSS approach AFAIK.
      - minitech 10y ago
        What is a "responsive icon"? Keep in mind that you can just switch the path to the SVG in CSS in the same way that you'd alter properties of a CSS image.
        helb 10y ago
        http://www.responsiveicons.co.uk/ http://www.responsiveicons.co.uk/
      - derefr 10y ago
        Right, that's the way things stand as they are today, where (afaik) only Apple's renderer actually has support for graphical emoji (and even then, it requires mipmapped bitmaps, not color vectors), and everyone else just supports emoji using what they can manage from pure OpenType specifiers. I was more referring to a hypothetical world where text-rendering engines were slightly expanded in their purpose, becoming generalized "inline graphical glyph layout engines", and exposed an API roughly like the following: Text.compileGlyph(Buffer) -> Text.Font.Glyph Text.Font() -> Text.Font Text.Font.mapLigature([Text.Codepoint], Text.Font.Glyph) -> () Text.Font.getUniqueName() -> String Then the above CSS would be a shortcut for doing this Javascript: function createImageIconClass(className, someSVGURL) { const svg_glyph = Text.compileGlyph(someSVGURL) const synthesized_font = new Text.Font() synthesized_font.mapLigature(Text.Codepoint.fromString("\uE075"), svg_glyph) const font_name = synthesized_font.getUniqueName() const synthesized_css = document.createElement('style') synthesized_css.type = 'text/css' synthesized_css.innerHTML = ` .${className}:before { font-family: ${font_name}; content: "\E075"; } ` document.getElementsByTagName('head')[0].appendChild(synthesized_css) } ...where the text-rendering engine would have the full capacity to render all SVG features when rendering an SVG "glyph", but would also do all the same optimizations it does to regular OpenType/TrueType glyphs (doing its own GPU-memory mipmap-generation of used ligatures at each size, etc.) If this was done correctly, you could actually deliver a "font" as a JSON object that would be synthesized in the browser at runtime, if you wanted. (I have no idea why you'd want that, but you could. Allowing for streaming fonts where the characters used above the fold load first, maybe?) And you could generate new text-engine objects at runtime—this could be used with graphical SVG icons to achieve an effect similar to GPU texture-atlassing for games.
- Sylos 10y ago
  Sort of to show off, but also simply the very artsy reason of seeing what you can come up with when restricting yourself. Or to quote from the corresponding Mozilla Hacks article (link to which can be found in the page source): But why a single div? When I was learning to paint, my class did these color mixing exercises where we created the many colors of the spectrum from only the three primary colors: red, yellow, and blue. The purpose of the exercise is to learn the behavior of the medium and the constraints show us the power of combination. You can certainly buy green paint, but you can also create green from blue and yellow. Restricting your available options forces you to re-evaluate the tools you already have. I decided to start a CSS drawing project, every few days illustrating something new with only CSS. To further challenge and explore what CSS is capable of, I gave myself the constraint of using only a single div in the markup. Instead of buying green paint (or adding another div), I’d need to stretch and combine CSS properties to achieve my goals.
  - Freak_NL 10y ago
    You might want to use something other than a code block for quotes. That second paragraph is a bit hard to read crammed all on one line.
- xemdetia 10y ago
  I think there is a place for this in performance hacking for the experience around the first load of the webpage experience. You are inevitably going to load a .css file anyway, but if you include it in the .css you aren't now having to download additional assets. So in only 3 GET you could be getting your complete html, javascript and css payload, rather than 6+ of html, javascript, css and core assets. You would be spending your network budget on only the assets that make no sense to replicate via SVG but everything else would show up on time. There's probably a case to be made as well for performance for people using electron or similar.
  - WiseWeasel 10y ago
    You can embed SVG in HTML if you want to limit asset requests.
throwaway13337 10y ago
CSS can be used to draw arbitrary vector images mostly via the background style. Probably the easiest way to do this automatically is through adobe illustrator. You can convert an arbitrary file to CSS: https://helpx.adobe.com/illustrator/using/css-extraction.html https://helpx.adobe.com/illustrator/using/css-extraction.htm... I guess a lot of people think it's neat in a 'web-hack' sort of way, but it's just another way to express the same thing. Pay no attention to the man behind the curtain.
- phaed 10y ago
  You just blew my mind.
- TeMPOraL 10y ago
  > way to do this automatically is through adobe illustrator That explains quite a lot. CSS hacks just got a lot less impressive for me.
- Freak_NL 10y ago
  That is not what the author of A Single Div is doing! In CSS you cannot add arbitrary vector drawings to a single div without linking to an image resource as background (SVG in that case). What the author is doing is using the single div and its two pseudo elements before and after (so effectively the author has three elements to work with) and style the borders, border-radius, background, shadow, text-content, etc. The use of linear-gradient declarations on the background in particular is a big part of a lot of these drawings, because you can add an arbitrary number of them on any element. Look at the Tardis sample in your element inspector and toggle the background of the div; you will see that most of the door panelling and windows disappear. These are drawn with linear gradients where the colours don't blend into each other, but stop abruptly. By layering these 'gradients', you can create patterns, such as cross hatching or a grid of lines. Some of these are actually really clever.
  - taneem 10y ago
    (he -> she)
katzgrau 10y ago
I dig, very much. That's all I've got.
NeliusKnight 10y ago
So were these created with straight CSS the way I'm believing it to be, or using a program from adobe?
- Freak_NL 10y ago
  I don't think that there are programs that generate CSS within this particular constraint of one div. This is more akin to code golf, where you attempt to push the boundaries of what is possible within a strict set of limits. More information is available here: https://github.com/lynnandtonic/a-single-div https://github.com/lynnandtonic/a-single-div
  - deleted 10y ago
    [deleted]
Trufa 10y ago
Regardless of the usefulness or practicality of this, the art is really captivating, I really like the style.
jswny 10y ago
Yes, SVG files have come a long way and are quite useful for this type of vector graphics. However there is something so satisfying about knowing that your vector art fits into a single div and comes purely from CSS. Amazing work. These are really visually appealing to me. Soft and welcoming, yet vibrant.
- wingerlang 10y ago
  I'm on the opposite side. With all the quirks of CSS, all I can think is: "I wonder how it looks in browser X".
  - ygra 10y ago
    Most of these do not much more than layering gradients via multiple background declarations. That gives browser developers very little room to screw up if gradients and multiple backgrounds work correctly. It still remains a hack, of course and I guess there is little use of the technique apart from curiosity and fun.
    - myfonj 10y ago
      In reality, that layering gradients via multiple backgrounds has still many quirks across current browsers: different pixel rounding errors, different blend modes often produces visually incoherent results - seams, gaps and aliasing [1]. One amusing quip: recently I have been messing with CSS3, tried the most simple use-case for `radial-gradient` I could imagine and immediately ran into Chrome bug [2] not reported at the time. I think it is somewhat illustrative. [1] Look for example at http://codepen.io/myf/pen/Bzmmry http://codepen.io/myf/pen/Bzmmry in Chrome and Firefox. [2] https://bugs.chromium.org/p/chromium/issues/detail?id=623714 https://bugs.chromium.org/p/chromium/issues/detail?id=623714
c-smile 10y ago
While ago I've proposed at W3C CSS WG so called vector images ( see: http://sciter.com/lightweight-inline-vector-images-in-sciter/ http://sciter.com/lightweight-inline-vector-images-in-sciter... ). With them, without any hacks like those you can define arbitrary shapes in CSS and in <img src="...">: div { background-image: url(path:c 50,0 50,100 100,100 c 50,0 50,-100 100,-100); background-repeat: no-repeat; } Symbols on the right of path: are the same that appear in SVGs path d attribute: <path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" fill="#000" /> But in significantly more lightweight manner. Proposal did not go through. Nobody cares, sigh. So people keep hacking gradients with CSS.
- ihuman 10y ago
  At that point, why not just use an svg file?
  - c-smile 10y ago
    1. Each DOM element is about 200-400 bytes (YMMV) in memory. You will need at least two of those. So to parse that SVG and build DOM structure. 2. Yet just to get that file over HTTP you will need to execute around 40,000 machine instructions. You can use data URLs to encode your SVG but that looks even more uglier. 3. With such path images you can write: button { background-image: url(path: ...); fill: blue; } button:hover { fill: red; } With SVG you cannot do that - each SVG is a standalone document. So you will need two such images, see #1 and #2 above. 4. And one more: CSS needs the way to define arbitrary shapes : https://www.w3.org/TR/css-shapes-1/#supported-basic-shapes https://www.w3.org/TR/css-shapes-1/#supported-basic-shapes . Ugly and far from complete set. Why not proven construct that we already have WYSIWYG tools for editing? That if to look on the problem as a whole ... But CSS is split on modules these days. Each module have their own authors that do whatever is more convenient for them. Christmas tree design, sigh.
    - jakobegger 10y ago
      Re 3: You can use CSS to change the color of inline SVG on hover. I used this trick for the download button on https://eggerapps.at/postico/ https://eggerapps.at/postico/
derefr 10y ago
The thing I'm always surprised about with these sort of CSS hacks: they don't lag my browser. Like, at all. Even the animated ones! Which is really surprising when you compare them to literally any other way these illustrations could have been created. A sufficient mess of procedural Javascript to render the same designs would lag horribly. The equivalent Flash would make the browser choppy as all hell. As would a Java applet, if those were even still around. (SVG might not, but for the SVG to animate you'd need to use... CSS.) Is CSS effectively "free", or is this just not a complex-enough example to start to see problems?
- Aweorih 10y ago
  I would compare it like this: C is extremely fast php which is built on C is not so fast So css is like C, built on the internal stuff so pretty much no overhead or anything. Javascript animations are like php, built on top of css with just manipulation of the css/dom structure.
  - wlievens 10y ago
    What you mean the say is "there are less abstraction layers".
    - Piskvorrr 10y ago
      *fewer
      - hueving 10y ago
        Nah, 'less' because abstraction layers are not as defined as we want to believe so they are more like spackle piled onto a foundation. :)
        Piskvorrr 10y ago
        That's the best explanation of a language quirk I've heard for a long, long time! :)
schneidmaster 10y ago
Sometimes I like to look at sites like these in IE6 (through BrowserStack) -- not because I expect them to support it, of course; just because it's fascinating to see how far CSS has come. This one is particularly amusing given how rich it looks in any modern browser. http://i.imgur.com/zGycgtH.jpg http://i.imgur.com/zGycgtH.jpg
- milcron 10y ago
  Reminds me of the old browser acid tests.
  - schneidmaster 10y ago
    > Microsoft said that Acid3 did not agree with the goal of Internet Explorer 8 and that IE8 would improve only some of the standards being tested by Acid3. IE8 scored 20/100, which is much worse than all relevant competitors at the time of Acid3's release, and had some problems with rendering the Acid3 test page. On 18 November 2009, the Internet Explorer team posted a blog entry about the early development of Internet Explorer 9 from the PDC presentation, showing that an internal build of the browser could score 32/100. Ah, memories. https://en.wikipedia.org/wiki/Acid3 https://en.wikipedia.org/wiki/Acid3
    - cormacrelf 10y ago
      Hm, Safari latest doesn't actually pass Acid3. It crashes Safari Web Content every time, and gets to max 97/100. Should we be worried?
      - drostie 10y ago
        IE and Edge never actually "passed" Acid3 either; as I recall they typically got to scores of 100 but would lag on two numbers, I want to say they were 25 and 69, whereas the test explicitly says that the animation needs to be fluid.
        10y ago
webXL 10y ago
So much good stuff here (toggling Mickey's :after border-radius is my favorite), but the title is a tad bit misleading, since the ::before and ::after pseudo-elements really act as divs. https://www.w3.org/TR/selectors/#pseudo-elements https://www.w3.org/TR/selectors/#pseudo-elements: > Note: A future version of this specification may allow multiple pseudo-elements per selector. Oh, please, please, please!
- Freak_NL 10y ago
  I really like how some of these make you think about how she did it. The Mickey is so clever with the box-shadow and the border-radius on the ::after.
javierbyte 10y ago
We had a contest at the office, the challenge was to create the most complex illustration with css and a single div, so I created http://javier.xyz/img2css/ http://javier.xyz/img2css/ (I have to admit that is not as fun nor interesting to create 'single divs' with img2css).
seanhandley 10y ago
Lynn's talk at CSS Day is well worth 30 minutes of your time: https://www.youtube.com/watch?v=I_QKNCn_m_g https://www.youtube.com/watch?v=I_QKNCn_m_g
shultays 10y ago
<div id="zipper" class="entry"> <div></div> </div> why is this a thing? what is with empty div? is it necessary?
- stevehb 10y ago
  It looks like use them for CSS properties. The background for the outer div is set to #4e6590, the blue background. The background-image of the inner div (and its ::before and ::after) draw the parts of the zipper. For example, the inner div has background-image of linear-gradient(to top, transparent 10px, #aaa 10px, #aaa 15px, #ccc 15px, #ccc 30px, transparent 30px), repeating-linear-gradient(to bottom, transparent, transparent 5px, #ddd 5px, #ddd 10px), repeating-linear-gradient(to bottom, #ccc, #ccc 5px, transparent 5px, transparent 10px); which draws the teeth of the zipper.
- grahamel 10y ago
  From looking at the code, the empty div is the single div used for the image. The parent div is just the seperator for presentation - the coloured background. Otherwise they'll need a page per demo
Freak_NL 10y ago
Here is another collection of such single-div experiments: https://github.com/ManrajGrover/SingleDivProject https://github.com/ManrajGrover/SingleDivProject (I have contributed a handful myself)
- odabaxok 10y ago
  Why would not you put live demos there (instead of the gifs and pngs)?
  - minitech 10y ago
    You can't put arbitrary CSS in GitHub readmes.
    - odabaxok 10y ago
      Ohh.. I was not aware of that, thanks for the explanation.
duke360 10y ago
WOW, that's beautiful!
jlebrech 10y ago
I'd love a UI entirely run by css, just the one div like this.
HugoDaniel 10y ago
Perhaps this is the equivalent of the css zen garden[0] for modern CSS ? :D [0]http://csszengarden.com/ http://csszengarden.com/
rjcaricio 10y ago
A while ago I was looking into the things in this site and I created this Plugin to help me inspecting how it is done: https://github.com/rafaelcaricio/gradient-inspector https://github.com/rafaelcaricio/gradient-inspector May help you too!
sdneirf 10y ago
Nice! Great performance on Chrome.
cloudjacker 10y ago
Web development looking fun again now that Internet Explorer is out of the picture

535 points by duck 10y ago

Just wondering, is there still any legitimate reason for doing this over using something like svg? Or is it mostly to show off in the same spirit as obfuscated C contests or demo scenes?

gkoberger 10y ago
It's definitely just showing off what you can do with a single div and CSS, much like your latter examples. It's an experiment in constraints. However, I could see something like this being useful in the case where you're using a third-party site and are only allowed to edit CSS. You probably don't need something as complicated as a cross-stitched heart, however it does show some techniques for squeezing as much in as possible. It also could be useful for a Font-Awesome-style icon set, where you just type <i class="icon-flower"></i>, although I imagine most people would prefer to just do something like <img src="/flower.svg">.
- derefr 10y ago
  Personally, I'd prefer .icon-flower:before { content: url(/flower.svg); } —which would effectively treat the SVG not as an image or background or anything, but rather as a character glyph from a synthesized single-character graphical-emoji font—meaning your SVG design would be display:inline'd at the current font-size, including font-styles (oldschool faux-italics) and text-decorations (properly-positioned and shaped underline/outline drawn before the SVG glyph's stroke.) The text engine is already incredibly expressive for doing arbitrary vector-glyph layout; so if you're creating your own one-off vector glyphs, why shouldn't you be allowed to manipulate them using the text engine?
  - manmal 10y ago
    That's an option if you want your icon monocolored, but else you'll need the other options. Or, if you want a responsive icon, you'll need the pure CSS approach AFAIK.
    - minitech 10y ago
      What is a "responsive icon"? Keep in mind that you can just switch the path to the SVG in CSS in the same way that you'd alter properties of a CSS image.
      - helb 10y ago
        http://www.responsiveicons.co.uk/ http://www.responsiveicons.co.uk/
    - derefr 10y ago
      Right, that's the way things stand as they are today, where (afaik) only Apple's renderer actually has support for graphical emoji (and even then, it requires mipmapped bitmaps, not color vectors), and everyone else just supports emoji using what they can manage from pure OpenType specifiers. I was more referring to a hypothetical world where text-rendering engines were slightly expanded in their purpose, becoming generalized "inline graphical glyph layout engines", and exposed an API roughly like the following: Text.compileGlyph(Buffer) -> Text.Font.Glyph Text.Font() -> Text.Font Text.Font.mapLigature([Text.Codepoint], Text.Font.Glyph) -> () Text.Font.getUniqueName() -> String Then the above CSS would be a shortcut for doing this Javascript: function createImageIconClass(className, someSVGURL) { const svg_glyph = Text.compileGlyph(someSVGURL) const synthesized_font = new Text.Font() synthesized_font.mapLigature(Text.Codepoint.fromString("\uE075"), svg_glyph) const font_name = synthesized_font.getUniqueName() const synthesized_css = document.createElement('style') synthesized_css.type = 'text/css' synthesized_css.innerHTML = ` .${className}:before { font-family: ${font_name}; content: "\E075"; } ` document.getElementsByTagName('head')[0].appendChild(synthesized_css) } ...where the text-rendering engine would have the full capacity to render all SVG features when rendering an SVG "glyph", but would also do all the same optimizations it does to regular OpenType/TrueType glyphs (doing its own GPU-memory mipmap-generation of used ligatures at each size, etc.) If this was done correctly, you could actually deliver a "font" as a JSON object that would be synthesized in the browser at runtime, if you wanted. (I have no idea why you'd want that, but you could. Allowing for streaming fonts where the characters used above the fold load first, maybe?) And you could generate new text-engine objects at runtime—this could be used with graphical SVG icons to achieve an effect similar to GPU texture-atlassing for games.
Sylos 10y ago
Sort of to show off, but also simply the very artsy reason of seeing what you can come up with when restricting yourself. Or to quote from the corresponding Mozilla Hacks article (link to which can be found in the page source): But why a single div? When I was learning to paint, my class did these color mixing exercises where we created the many colors of the spectrum from only the three primary colors: red, yellow, and blue. The purpose of the exercise is to learn the behavior of the medium and the constraints show us the power of combination. You can certainly buy green paint, but you can also create green from blue and yellow. Restricting your available options forces you to re-evaluate the tools you already have. I decided to start a CSS drawing project, every few days illustrating something new with only CSS. To further challenge and explore what CSS is capable of, I gave myself the constraint of using only a single div in the markup. Instead of buying green paint (or adding another div), I’d need to stretch and combine CSS properties to achieve my goals.
- Freak_NL 10y ago
  You might want to use something other than a code block for quotes. That second paragraph is a bit hard to read crammed all on one line.
xemdetia 10y ago
I think there is a place for this in performance hacking for the experience around the first load of the webpage experience. You are inevitably going to load a .css file anyway, but if you include it in the .css you aren't now having to download additional assets. So in only 3 GET you could be getting your complete html, javascript and css payload, rather than 6+ of html, javascript, css and core assets. You would be spending your network budget on only the assets that make no sense to replicate via SVG but everything else would show up on time. There's probably a case to be made as well for performance for people using electron or similar.
- WiseWeasel 10y ago
  You can embed SVG in HTML if you want to limit asset requests.

throwaway13337 10y ago

CSS can be used to draw arbitrary vector images mostly via the background style. Probably the easiest way to do this automatically is through adobe illustrator. You can convert an arbitrary file to CSS: https://helpx.adobe.com/illustrator/using/css-extraction.html https://helpx.adobe.com/illustrator/using/css-extraction.htm... I guess a lot of people think it's neat in a 'web-hack' sort of way, but it's just another way to express the same thing. Pay no attention to the man behind the curtain.

phaed 10y ago
You just blew my mind.
TeMPOraL 10y ago
> way to do this automatically is through adobe illustrator That explains quite a lot. CSS hacks just got a lot less impressive for me.
Freak_NL 10y ago
That is not what the author of A Single Div is doing! In CSS you cannot add arbitrary vector drawings to a single div without linking to an image resource as background (SVG in that case). What the author is doing is using the single div and its two pseudo elements before and after (so effectively the author has three elements to work with) and style the borders, border-radius, background, shadow, text-content, etc. The use of linear-gradient declarations on the background in particular is a big part of a lot of these drawings, because you can add an arbitrary number of them on any element. Look at the Tardis sample in your element inspector and toggle the background of the div; you will see that most of the door panelling and windows disappear. These are drawn with linear gradients where the colours don't blend into each other, but stop abruptly. By layering these 'gradients', you can create patterns, such as cross hatching or a grid of lines. Some of these are actually really clever.
- taneem 10y ago
  (he -> she)

katzgrau 10y ago

I dig, very much. That's all I've got.

NeliusKnight 10y ago

So were these created with straight CSS the way I'm believing it to be, or using a program from adobe?

Freak_NL 10y ago
I don't think that there are programs that generate CSS within this particular constraint of one div. This is more akin to code golf, where you attempt to push the boundaries of what is possible within a strict set of limits. More information is available here: https://github.com/lynnandtonic/a-single-div https://github.com/lynnandtonic/a-single-div
- deleted 10y ago
  [deleted]

Trufa 10y ago

Regardless of the usefulness or practicality of this, the art is really captivating, I really like the style.

jswny 10y ago

Yes, SVG files have come a long way and are quite useful for this type of vector graphics. However there is something so satisfying about knowing that your vector art fits into a single div and comes purely from CSS. Amazing work. These are really visually appealing to me. Soft and welcoming, yet vibrant.

wingerlang 10y ago
I'm on the opposite side. With all the quirks of CSS, all I can think is: "I wonder how it looks in browser X".
- ygra 10y ago
  Most of these do not much more than layering gradients via multiple background declarations. That gives browser developers very little room to screw up if gradients and multiple backgrounds work correctly. It still remains a hack, of course and I guess there is little use of the technique apart from curiosity and fun.
  - myfonj 10y ago
    In reality, that layering gradients via multiple backgrounds has still many quirks across current browsers: different pixel rounding errors, different blend modes often produces visually incoherent results - seams, gaps and aliasing [1]. One amusing quip: recently I have been messing with CSS3, tried the most simple use-case for `radial-gradient` I could imagine and immediately ran into Chrome bug [2] not reported at the time. I think it is somewhat illustrative. [1] Look for example at http://codepen.io/myf/pen/Bzmmry http://codepen.io/myf/pen/Bzmmry in Chrome and Firefox. [2] https://bugs.chromium.org/p/chromium/issues/detail?id=623714 https://bugs.chromium.org/p/chromium/issues/detail?id=623714

c-smile 10y ago

While ago I've proposed at W3C CSS WG so called vector images ( see: http://sciter.com/lightweight-inline-vector-images-in-sciter/ http://sciter.com/lightweight-inline-vector-images-in-sciter... ). With them, without any hacks like those you can define arbitrary shapes in CSS and in <img src="...">: div { background-image: url(path:c 50,0 50,100 100,100 c 50,0 50,-100 100,-100); background-repeat: no-repeat; } Symbols on the right of path: are the same that appear in SVGs path d attribute: <path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" fill="#000" /> But in significantly more lightweight manner. Proposal did not go through. Nobody cares, sigh. So people keep hacking gradients with CSS.

ihuman 10y ago
At that point, why not just use an svg file?
- c-smile 10y ago
  1. Each DOM element is about 200-400 bytes (YMMV) in memory. You will need at least two of those. So to parse that SVG and build DOM structure. 2. Yet just to get that file over HTTP you will need to execute around 40,000 machine instructions. You can use data URLs to encode your SVG but that looks even more uglier. 3. With such path images you can write: button { background-image: url(path: ...); fill: blue; } button:hover { fill: red; } With SVG you cannot do that - each SVG is a standalone document. So you will need two such images, see #1 and #2 above. 4. And one more: CSS needs the way to define arbitrary shapes : https://www.w3.org/TR/css-shapes-1/#supported-basic-shapes https://www.w3.org/TR/css-shapes-1/#supported-basic-shapes . Ugly and far from complete set. Why not proven construct that we already have WYSIWYG tools for editing? That if to look on the problem as a whole ... But CSS is split on modules these days. Each module have their own authors that do whatever is more convenient for them. Christmas tree design, sigh.
  - jakobegger 10y ago
    Re 3: You can use CSS to change the color of inline SVG on hover. I used this trick for the download button on https://eggerapps.at/postico/ https://eggerapps.at/postico/

derefr 10y ago

The thing I'm always surprised about with these sort of CSS hacks: they don't lag my browser. Like, at all. Even the animated ones! Which is really surprising when you compare them to literally any other way these illustrations could have been created. A sufficient mess of procedural Javascript to render the same designs would lag horribly. The equivalent Flash would make the browser choppy as all hell. As would a Java applet, if those were even still around. (SVG might not, but for the SVG to animate you'd need to use... CSS.) Is CSS effectively "free", or is this just not a complex-enough example to start to see problems?

Aweorih 10y ago
I would compare it like this: C is extremely fast php which is built on C is not so fast So css is like C, built on the internal stuff so pretty much no overhead or anything. Javascript animations are like php, built on top of css with just manipulation of the css/dom structure.
- wlievens 10y ago
  What you mean the say is "there are less abstraction layers".
  - Piskvorrr 10y ago
    *fewer
    - hueving 10y ago
      Nah, 'less' because abstraction layers are not as defined as we want to believe so they are more like spackle piled onto a foundation. :)
      - Piskvorrr 10y ago
        That's the best explanation of a language quirk I've heard for a long, long time! :)

schneidmaster 10y ago

Sometimes I like to look at sites like these in IE6 (through BrowserStack) -- not because I expect them to support it, of course; just because it's fascinating to see how far CSS has come. This one is particularly amusing given how rich it looks in any modern browser. http://i.imgur.com/zGycgtH.jpg http://i.imgur.com/zGycgtH.jpg

milcron 10y ago
Reminds me of the old browser acid tests.
- schneidmaster 10y ago
  > Microsoft said that Acid3 did not agree with the goal of Internet Explorer 8 and that IE8 would improve only some of the standards being tested by Acid3. IE8 scored 20/100, which is much worse than all relevant competitors at the time of Acid3's release, and had some problems with rendering the Acid3 test page. On 18 November 2009, the Internet Explorer team posted a blog entry about the early development of Internet Explorer 9 from the PDC presentation, showing that an internal build of the browser could score 32/100. Ah, memories. https://en.wikipedia.org/wiki/Acid3 https://en.wikipedia.org/wiki/Acid3
  - cormacrelf 10y ago
    Hm, Safari latest doesn't actually pass Acid3. It crashes Safari Web Content every time, and gets to max 97/100. Should we be worried?
    - drostie 10y ago
      IE and Edge never actually "passed" Acid3 either; as I recall they typically got to scores of 100 but would lag on two numbers, I want to say they were 25 and 69, whereas the test explicitly says that the animation needs to be fluid.
      - 10y ago

webXL 10y ago

So much good stuff here (toggling Mickey's :after border-radius is my favorite), but the title is a tad bit misleading, since the ::before and ::after pseudo-elements really act as divs. https://www.w3.org/TR/selectors/#pseudo-elements https://www.w3.org/TR/selectors/#pseudo-elements: > Note: A future version of this specification may allow multiple pseudo-elements per selector. Oh, please, please, please!

Freak_NL 10y ago
I really like how some of these make you think about how she did it. The Mickey is so clever with the box-shadow and the border-radius on the ::after.

javierbyte 10y ago

We had a contest at the office, the challenge was to create the most complex illustration with css and a single div, so I created http://javier.xyz/img2css/ http://javier.xyz/img2css/ (I have to admit that is not as fun nor interesting to create 'single divs' with img2css).

seanhandley 10y ago

Lynn's talk at CSS Day is well worth 30 minutes of your time: https://www.youtube.com/watch?v=I_QKNCn_m_g https://www.youtube.com/watch?v=I_QKNCn_m_g

shultays 10y ago

<div id="zipper" class="entry"> <div></div> </div> why is this a thing? what is with empty div? is it necessary?

stevehb 10y ago
It looks like use them for CSS properties. The background for the outer div is set to #4e6590, the blue background. The background-image of the inner div (and its ::before and ::after) draw the parts of the zipper. For example, the inner div has background-image of linear-gradient(to top, transparent 10px, #aaa 10px, #aaa 15px, #ccc 15px, #ccc 30px, transparent 30px), repeating-linear-gradient(to bottom, transparent, transparent 5px, #ddd 5px, #ddd 10px), repeating-linear-gradient(to bottom, #ccc, #ccc 5px, transparent 5px, transparent 10px); which draws the teeth of the zipper.
grahamel 10y ago
From looking at the code, the empty div is the single div used for the image. The parent div is just the seperator for presentation - the coloured background. Otherwise they'll need a page per demo

Freak_NL 10y ago

Here is another collection of such single-div experiments: https://github.com/ManrajGrover/SingleDivProject https://github.com/ManrajGrover/SingleDivProject (I have contributed a handful myself)

odabaxok 10y ago
Why would not you put live demos there (instead of the gifs and pngs)?
- minitech 10y ago
  You can't put arbitrary CSS in GitHub readmes.
  - odabaxok 10y ago
    Ohh.. I was not aware of that, thanks for the explanation.

duke360 10y ago

WOW, that's beautiful!

jlebrech 10y ago

I'd love a UI entirely run by css, just the one div like this.

HugoDaniel 10y ago

Perhaps this is the equivalent of the css zen garden[0] for modern CSS ? :D [0]http://csszengarden.com/ http://csszengarden.com/

rjcaricio 10y ago

A while ago I was looking into the things in this site and I created this Plugin to help me inspecting how it is done: https://github.com/rafaelcaricio/gradient-inspector https://github.com/rafaelcaricio/gradient-inspector May help you too!

sdneirf 10y ago

Nice! Great performance on Chrome.

cloudjacker 10y ago

Web development looking fun again now that Internet Explorer is out of the picture