Create complex shapes with CSS

Question

I am working on a project for iphone and android browsers that require me to build a progress meter similar to a thermometer, which can react with resizing the browser and can easily change the course. It should be as design as possible. That is, for this we need fantasy gradients, insert highlighting, border.

Indicator:

Pay attention to the shadow and white frame

Progress should also extend to the circular part and still have bizarre effects.

I went ahead and got an approximate prototype working (tested in chrome) http://jsfiddle.net/xduQ9/3/

html, body { padding: 25px; } .circle { margin-left: -6px; width: 48px; height: 48px; border-radius: 25px 25px 25px 24px; border: solid rgba(178, 181, 188, 0.8) 1px; box-shadow: inset 1px 2px 0 #fff, inset 1px -2px 0 #fff, inset -2px 0 0 #fff, inset -2px -2px 0 #fff, inset 0 3px 0 rgba(255, 255, 255, 0.35), -20px -20px 0 #fff, 20px -20px 0 #fff, 20px 20px 0 #fff, -20px 20px 0 #fff; } .circle-wrap { overflow: hidden; width: 48px; height: 51px; position: absolute; right: 0; } .wrap { display: -webkit-box; width: 100%; position: relative; height: 51px; overflow: hidden; } .progress { position: absolute; z-index: 0; height: 100%; width: 70%; background: url("http://dl.dropbox.com/u/905197/white-stripe-diagonal.png"), -webkit-linear-gradient(top, rgba(183, 237, 21, 1) 0%, rgba(140, 186, 24, 1) 28%, rgba(78, 126, 11, 1) 65%, rgba(59, 86, 0, 1) 99%); } .meter.complete .progress { width: 100%; -webkit-animation: progress-slide 0.6s linear infinite; } @-webkit-keyframes progress-slide { 0% { background-position: 0 0; } 100% { background-position: 25px 25px; } } .progress-cover { position: absolute; top: 19px; width: 70%; height: 12px; border-radius: 9px 0 0 9px; border: solid #70901b 1px; border-right: 0; z-index: 2; } .top-mask { position: absolute; box-sizing: border-box; width: 100%; height: 18px; padding-left: 45px; margin-left: -45px; background: white; border-bottom: solid #b2b5bc 1px; border-radius: 0 0 33px 0; box-shadow: 1px 2px 0 #fff, 0 3px 0 rgba(255, 255, 255, 0.35); } .bottom-mask { position: absolute; bottom: 0; box-sizing: border-box; width: 100%; height: 17px; padding-left: 45px; margin-left: -45px; background: white; border-top: solid #b2b5bc 1px; border-radius: 0 19px 0 0; box-shadow: 1px -2px 0 #fff; } .inner { position: absolute; top: 0; left: 2px; width: 3px; height: 12px; border: solid 3px #fff; border-right: none; border-radius: 5px 0 0 5px; } .meter { position: relative; } .left-border { position: absolute; top: 17px; left: -4px; width: 10px; height: 16px; border-radius: 12px 0 0 12px; border: solid 1px #b2b5bc; border-right: none; z-index: 3; } 

 <div class="meter complete"> <!-- Remove .complete to stop animation --> <div class="left-border"> <div class="inner"></div> </div> <div class="wrap"> <div class="progress"></div> <div class="top-mask"></div> <div class="bottom-mask"></div> <div class="circle-wrap"> <div class="circle"></div> </div> </div> </div> 

The technique basically grips a rectangle with a striped green background with several divs with rounded corners until the desired shape appears. Then I use a bunch of shadows to add padding and paste around the counter.

My question is: what would you do? I mean, I can optimize this solution a bit. I could add more markup to get the design just right, but it feels so dirty. And I have a feeling that it will not be easy for a cross-browser test. I was thinking about using canvas, but I need to redraw the shapes if the browser size is very high.

I would like to avoid using images as much as possible, but if there can be an elegant solution with them, I will definitely use it.

Although the ability to change the color of the progress bar is not a requirement for implementation, I would like to get a solution that has this ability.

Answer 1

Your violin does not work in firefox (Aurora) or IE.

I know that you prefer not to use images, but I think it will be much cleaner in code if you only use images.

Why? because you can create a sprite with 3 parts: The first part has the outer part of the meter with the transparent part of the bar, the second part has a “bar”, and the third part is just white to hide the strip and give the impression of percent.

Then you make simple javascript code to hide interest rates in the bar, starting from the right (for example, if the user has 24 percent, then the position is -76px).

I would draw the bar exactly as it shows the full one, and use the z-index to put the meter on top and then the white part to fake progress. And a big circle at the beginning.

The circle will fill the circular part at the end (I don't know what the current meter looks like if you have a straight straight line and then a square instead of a circle).

Made a sketch in the paint:

This version will be simpler than pure CSS and will look the same in all browsers. Resizing can also be done with some scenarios in the sizes of the liquid div and the liquid image.

Once you have a relationship that you want to work with the rest, it's just-ish.

Answer 2

You should be ready to give up some visual chocolates for full cross-browser compatibility, but given that you are looking at the iPhone / Android market, I would fool myself and say: “You should be fine”

Check out the css forms - perhaps the only css-tricks article I'd find intriguing and useful - for creative inspiration using css to accomplish what you need. Be prepared for the fact that with fantastic gradients you will have problems with the matching "stitch" between the individual pieces.

Most likely, semantic markup is out of the question, so be wild with all the necessary elements (but try and use: before and: after pseudo-elements so as not to completely pollute the HTML). If it depended on me, I would probably cheat a little and make the tip of the thermometer motionless, that is, always completely full or empty, and have “progress” in the div with rounded corners TL and BL.

In retrospect, your example is already better, but here is the fiddle anyway :) http://jsfiddle.net/8dbjw/