I created this background image to apply to each of the elements and I will rotate 15 degrees each: Essentially, I’ve got six elements to work with. price, and the :before and :after pseudo elements for each. Let me overview what I’m going to do, then I’ll show you the styles needed to achieve it. This markup doesn’t really have anything unnecessary in it. Also, I mentioned earlier that there were a few less points in the CSS version of this starburst. From here, I’ll be styling pseudo classes to create the multiple points. The is the container for the text inside (the price info.) That’s it for the markup.
I’ll use this for the background of the starburst. I have that, you guessed it, contains the price starburst.
(In the finished design I’ll actually have six elements, you’ll see…) The Markup So I’ve got three elements here, each rotated 30 degrees. The way I wrapped my head around what’s going on here is with a few post-its. Think of this starburst as a series of rotated boxes. I know it’s not exactly the same – it has a few less “points” – which I technically could have achieved with a little more markup, but I decided a little less markup and fewer points was worth it. We’ll talk about that a little later.) I took this design and made this: (Also notice the subtle inner border Drew’s got going on here. We’ve got a rather pointy circle with the product price inside. Being that it included a dynamic price, the thing had to grow and adjust appropriately, so I set out to build this thing with CSS. There was an element in the site that was sort of a starburst shape that had the price of the product inside. Recently, our creative director here at Sparkbox, Drew, gave me a design to build out for an e-commerce site.
ROB TARR SPARKBOX HOW TO
There’s almost always a way to reproduce a design in code, and I love figuring out how to get as close to the original design as possible with CSS. If there’s one thing I love most about what I do it’s building out the challenges that a designer throws my way.
0 kommentar(er)
