Code link http://codepen.io/geligelu/full/mEjrLp/
Enjoy, criticize, praise. Do what you do…
6 Likes
Haha pretty sick, you should definitely use that for the timer project!
Wow! where did you learn to do that?
I have seen your code too, but couldnt understand much of that.
I have seen some codepens where people have made dogs with just css and what not
and yet I dont know how to do that?
can you point me to some tutorial that teaches how to do this kind of thing??
I’d like to do something similar.
Thanks! I’m going to include it as part of the title I think. Next step is to try and makes seeds fly out when you hover!
No real tutorials - it’s more I’ve take principles and inspiration that I learned elsewhere, and then I apply those principles to things I think would be cool.
I have a bit of a UX/UI interest as well as a love of drawing, some skills with Sketch + PS + Illustrator, I’m interested in vector art and how shapes and lines come together to make great pieces of art etc.
But most importantly I EXPERIMENT. Codepen and other online editors update your CSS in real time. So it’s trial and error for some things. I change values and watch for the effect they have on screen. That’s a very powerful learning process right there - seeing how your fiddling has an effect on the real site. In a completely risk-free environment. It’s like a sandbox.
For this particular project, I was implementing manipulation of ::before and ::after CSS3 pseudo elements. I was inspired by a technical talk I attended and workshop where we created pure CSS icons using one single div element and the before/after pseudo elements. It was kind of an exercise in design and constraint. It was fun.
A similar site is here: http://nicolasgallagher.com/pure-css-gui-icons/ - this guy made an entire icon set out of one element + CSS. Read the code he supplies and EXPERIMENT with what each part is adding / doing in the demo.
Another useful site is this: http://www.samuelrossille.com/css-shape - you can see lots of possible shapes that can be made with pure CSS. It also spits out code for you, but hell no I don’t want to copy and paste. I want to make it myself. I just use this to plan my CSS objects. I take a picture I want to draw and I break it down into as many component shapes as possible - ones which I know are possible in CSS. Only then do I hit the code and try and build it.
Here’s an ‘exploded’ version of my tomato and the shapes that make it up built using that site.
And for an intro into before and after pseudo elements - http://krasimirtsonev.com/blog/article/CSS-before-and-after-pseudo-elements-in-practice is a very good place to start. Go down to ‘arrows’ for the stuff where you can start using it for shapes etc.
For other shapes and demo code: https://css-tricks.com/examples/ShapesOfCSS/
For a cracking article about CSS triangles and how you can use them in stuff like tooltips: https://davidwalsh.name/css-triangles
And an explanation of how CSS triangles are possible: https://css-tricks.com/snippets/css/css-triangle/
Anyway, I hope this helps serve as ‘inspiration’ so you can go out and build some kick-ass CSS things. You mentioned dogs, I found a CSS cat on codepen earlier today
G
5 Likes
This collection of resources is really excellent inspiration!
Thanks for sharing!!!
1 Like
Hey Thanks for the detailed reply of all the resources.
I had heard some developers saying that a lot could be done using before and after pseudo elements but I didnt know much beyond putting quotes before or after a paragraph.
I’ll be able to learn a lot from the links you mentioned.
Thanks again.
Faraz
Okay, I have done a lot of reading and now, I am able to create a lot of shapes using css. I’ll try to make a tomato too as I have understood how to accomplish it, thanks to your exploded version of the tomato.
1 Like
Awesome resources, I’ve been interested in looking into these things for a while myself.
Nice tomato!
1 Like
You could use some z-index magic to “hide” the seeds behind the tomato layer and just change their position with transition on hover 