Posts

Showing posts with the label css-art

Cool page load transition

Image
How did this happen? 1. Script executes at starting of page load, divides screen size into 16 and 9. 2. 16 blocks horizontal and 9 blocks vertical is generated 3. Each block is given respective height width according to screen size. 4. Blocks are give a transition delay in a for loop along with an increment. 5. The wavy effect is given by using custom bezier curves for transition Add this script and css to the top of your webpage for this cool transition.!!!! Visit my profile website to witness this effect in action jonesvinothjoseph.blogspot.in

CSS Monkey

Image
A monkey from pure CSS code. Made only from circles and ellipses, technically only ellipses. Eyes, ears, face and mouth are obvious ellipses. The smile and hair are ellipses too, a transparent one wit only one side border, and rotated in such a way that it looks like a strand of hair. Even the monkey's smile, is a ellipse covering the whole face, but its transparent and has a bottom-border  of few pixels which makes it look look like a smile. The complete CSS and the monkey:  See the Pen CSS Monkey by Jones Vinoth Joseph ( @jo_Geek ) on CodePen .

CSS Ghost - not really!

Image
Done using basic shapes. Circle , Rectangle , Semi-circle , Triangles See the Pen CSS Ghost by Jones Vinoth Joseph ( @jo_Geek ) on CodePen .

CSS Kitty

Image
Kitty with basic shapes in pure CSS. Well don't ask me why it is staring at you with mouth open!! I am no artist.. just put few circles and lines here and there to make it look like a cat!! Here is the code.. and the cat!! See the Pen CSS Kitty by Jones Vinoth Joseph ( @jo_Geek ) on CodePen .