Posts

Showing posts from January, 2017

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

Pure CSS responsive Navbar

Image
This is another element of web page, which normally requires some script. This is somewhat related to my last post " Pure CSS Collpasible Accordion ", where I used a 'radio button' to manipulate the collpase and expanding of panels. Same thing here, this time its a 'checkbox' and a 'label' which collapses and expands the navbar when screen size less than 600. Note: Refer to the previous post to see how 'radio button' and 'label' work together. A big nav [Desktop View] A collapsed nav [Mobile view] Full HTML + CSS code