Well, I created the slingshot icon in pure CSS yesterday, and I decided to share it with you on dribbble.
But, you have to know the story behind, and why it is not as pixel perfect as it have to be.
So, when Slingshot were released, yesterday evening, I was on a rush to meet someone on a train-station. But I would like to be the first to attempt to create it in CSS, just for fun.
So, I ordered a beer at the "Gare de Lyon" in Paris, and I opened my Macbook, and I directly started to code it.
I only had a screenshot of the app icon (from my phone) that I opened with photoshop.. And so, some sizes and "details" are not exactly the same.
Technically, it uses box-shadows to generates the colored squares, and some other CSS3 properties such as border-radius, after that, its just regular css.
I've made it with SASS, yes, because you know, SASS is awesome :)
Anyway, as always, I had fun creating it ! And it would be awesome if you could give me some feedbacks on :
- The written code behind (is there an other way, faster & better way to do it ? )
- The details you would change to make it pixel perfect
And just if you want to like the shot, go on, don't be shy :)
Full page : http://codepen.io/LukyVj/full/skpgA/
See codes : http://codepen.io/LukyVj/pen/skpgA/
L or F like
Z toggle zoom
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
© 2018 Dribbble. All rights reserved.
A community of designers sharing their work, process, and current projects.
Minimum 6 characters
Uh oh… We’re still waiting for our spam prevention code to load.
Already a member? Sign in