As you can probably guess, the tricky bit is going to be the arch’s that meet in the centre of the screen. At first I thought background image, but I want this to be a % based design, and that image would only work at a specific screen size.
I’m hoping there’s some fancy CSS3 feature that’s well supported, that can do this kind of thing. Or maybe something with pseudo elements?
For the best browser support you’ll probably need to use three img elements that are placed on top of each other in equal size. The images themselves could be two color 2-bit images where color A represents transparency and color B is the solid color. This allows you to save them in very small filesize as PNG or GIF (run through an optimizer). The images should be very big (like 2000’ish px). Most new browsers will smooth the end result to something that isn’t too bad to look at.
@lucas572, I would go with images. The rendering of the CodePen I made isn’t perfect and gets even worse if you make the radius larger. It was just fun to show it can be done :)
To help digging around though. It uses padding to set the height of elements because % based padding is based on width, so it keeps aspect ratio. The circles are pseudo elements and to keep part of them transparent I used radial gradients (with stops in the center, so inner circle is transparent and outer circle has the color)
@CrocoDillion I’m so impressed by that code still!
For images, would you suggest a bg image in a pseudo element for each colour? Or literally one bg image with the arch’s in it?
I think trying to make this page work with a % based grid is going to be very difficult, as when the height of the text div’s increase, the arch’s will have to increase with it! Which I can’t see happening to be honest.
That layout does not really need need any images to reproduce. Not too much more
complicated then the graphical logo image converted to 9 lines of css and a div today, and probably less complicated then 3D pyramids complete with yellow brick forged out of the CSS triangle hack.
This main page in the shape.png really does not look like it would be a huge deal to have origami itself into a one column mobile without even bothering with a media query while still retaining the general flavor of the layout.
The only thing that might make it more challenging is if that layout has some logo-ized meaning where any variation however small in the switch to the one column would not blow by as art.
Other then that ,it’s sorta a game of name that tune , where instead of seeing how few musical notes , it’s just how low one can get the div count while not having a 12 armed freak for a CSS file.