CSS brainteaser: How would you code this?

[lucas572]

Hi all!

I’m a little stumped as to the best way to approach a specific design element in a new website I’m about to start work on.

Here’s a screenshot of the design I’ve been sent: [http://lukeseager.com/shape.png](http://lukeseager.com/shape.png “Screenshot”)

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?

How would you tackle this?

[CrocoDillon]

*drums*

Background image with `background-size` property set to something clever. That said, I might think about a CSS only solution ;p

[aco]

Yeah im with Croco, I pretty sure the best way to do something like this is with a Background image. But that said I found a W3 schools lesson on circles that might help you out.

Lesson: http://www.w3schools.com/tags/canvas_arc.asp

[__]

[w3fools](http://w3fools.com)

[Merri]

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.

[CrocoDillon]

The shape is possible in CSS but it takes a lot of time to get it right, browser support is bad (because of gradients) and the result won’t look as good as an image… so go with image :P

Still made a proof of concept: http://codepen.io/CrocoDillon/pen/BHGJg

[Mottie]

That’s really nice work @CrocoDillon!

My main concern though is how that would look on a mobile device.

[Paulie_D]

>My main concern though is how that would look on a mobile device.

On looking at the design, I suspect **mobile** was not on their list of things to worry about.

[lucas572]

Yea, unfortunately this will be a responsive site, but I’m thinking of deffing off the funky design and just having three block colour sections instead.

@CrocoDillion, very impressive code there! I’ll have to have a dig around that and see what I can use, browser support is going to be a bitch on this one I can feel.

[CrocoDillon]

@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)

[lucas572]

@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.

[CrocoDillon]

Just put the whole image as background on the parent element like this http://codepen.io/CrocoDillon/pen/zmClE

You have to add breakpoints to make sure the text fits nicely whatever resolution, and change layout (to single column mobile friendly something) when text becomes unreadable.

[DrCLue]

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.

[lucas572]

I think for maximum browser compatibility an image is the only way to do. While I don’t doubt there is an elegant CSS solution, for this to work in an older version of IE, I think an image is a must.

[Author]

Posts