A couple of days ago I created this Falling Snow Effect for day #031 in the #100Days100Projects Challenge and in this article I'm going to show you how easy it is to create such an effect using only vanilla JavaScript and a little bit of CSS. You can…
The theme for week #16 of the Weekly Coding Challenge is: Notifications The notification component is used in a web/mobile app when you want to notify the user that something happened based on his action - "successfully completed registration…
The theme for week #4 of the Weekly Coding Challenge is: Loading Animations Every time something is loading on a website it's a good practice to give some sort of feedback to the user, make him aware that his request is being processed. Most of the…
Update: I also created a YouTube video for this tutorial. Check out below! I've been playing around the past week with this CSS animation and I thought that it would be nice and useful to write a short article about how we can create it. Below you…
New week! New Challenge! 😄 The theme for the second week of the Weekly Coding Challenge is: Create a Slider A slider is used mostly to showcase content like: images, projects in your portfolio or even testimonials from clients. It is useful because…
Some of you might already know but for those who don't, I'm starting a weekly Coding Challenge with all of you! 😄 This is how I'm planning to make it work: Every Monday I'm going to post an article about how I'm solving a different Coding Challenge…
It's been a while since I wrote something on this blog and I want to apologize for that... I should have put more time in it as people requested it. BUT... I'm back And I'm here to stay! Back to business! For today I prepared a simple, yet…
Ever wanted to have a nice click effect on your buttons? Today we're going to create one called: The Ripple Effect. See the demo below: demo HTML: A simple button will do... You could also add a class if you need, but it's not required if you want to…
In the previous post we built an animated hamburger button, but we didn't have something to show (like a menu) when the button was pressed. In this post we'll build a responsive navigation menu which will show/hide when the button is pressed. This is…
Today we're going to create, from scratch, the hamburger button. Big CSS frameworks like Bootstrap and Foundation use this into their own products. We are also going to add a little CSS animation to make it look more "fancy". :D Note: in this…
Sometimes when the user interacts with your application, behind the scenes you might need to send back some data from the server. It's a good idea to have some sort of loading animation which ensures the user that you're processing his input, and…
In this post we're going to take a look on how to achieve the Floating Label animation with pure CSS. It's been used in MaterializeCSS and it's a clever way to improve the look and feel of your input fields. Read more about it here. The final result…
Have you ever wanted to change the default look and feel of your checkboxes? To be honest, it looks a little odd on a modern website. Today I'm going to show you 3 different ways you can customize your checkboxes with CSS3. No JavaScript required…