42 posts tagged with "css3"View all tags

On day #032 of the #100Days100Projects Challenge I saw this effect that my buddy Kyle Shook created and I thought: "Hmm... this would be nice as a project for the challenge", so... I did it! In this article I'm going to show you how I did it…

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…

30 days ago I started the #100Days100Projects challenge and in this article I'm going over the last 15 projects that I've built. You can check out the article in which I explained the first 15 projects here. Note: You can also join the challenge if…

Two weeks ago I started the #100Days100Projects challenge and in this article I'm going to showcase all the projects that I've built since I started. 😄 Note: You can also join the challenge if you want as there are other variants too if you feel…

For the first project in the #100Days100Projects I thought about working with a public API in order to get some data that would be displayed in a webpage; an usual thing to do with an API. For that I chose to use TheMealDB's public API in order to…

Yesterday I was talking with @ildiesign about the fact that I needed a component which I could use on all of my mini-projects on Codepen in order to make it easier for people to find my Social Media profiles. Today, she came up with this A.W.E.S.O.M…

I've came across this simple and clean 404 page design created by @ildiesign and I thought I would make a quick tutorial on how to build something like this. You can see the live version on Codepen: https://codepen.io/FlorinPop17/pen/JjPvJzz The HTML…

Often when you have a table with information you'd want to be able to sort the information in the table in ascending or descending order, especially when you are dealing with numbers. In this tutorial we're going to see how to do exactly that using…

The theme for week #19 of the Weekly Coding Challenge is: Testimonials If you are looking to find new clients it's important to gather reviews / testimonials from old clients you've worked for to show them to your new clients. When you gather a few…

The theme for week #18 of the Weekly Coding Challenge is: Social Media Buttons We all know how important is Social Media nowadays for a business (be it either a blog or a product/service selling business) because of the amount of people using it. You…

The theme for week #17 of the Weekly Coding Challenge is: Pagination A Pagination Component is used on websites where you have more content available than you want to display at one time to the user so you'd split it on multiple pages. By separating…

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 #15 of the Weekly Coding Challenge is: Instant Search We live in a fast world and we want everything to be FAST, including search results, this is why instant search functionality became pretty much a "must have" feature instead of…

The theme for week #14 of the Weekly Coding Challenge is: Progress Bar A progress bar is used to show how far a user action is still in process until it's completed. A good example is a download progress bar which shows you how much of the file is…

The theme for week #13 of the Weekly Coding Challenge is: Accordion Hide and show content with just a click - this is what an accordion let us do. 😃 In this article we're going to build this Accordion: https://codepen.io/FlorinPop17/pen/PvvZmN/ The…

The theme for week #12 of the Weekly Coding Challenge is: Toggle A toggle (or a switch) is a component which allows you to change a state / a boolean value from true to false and vice-versa. It is basically a , but we are going to hide it and display…

The theme for week #11 of the Weekly Coding Challenge is: Tooltip A tooltip is a message which appears when you hover over an item. Usually this item is an image, a hyperlink or an icon. In this article we're going to build a Tooltip with Pure CSS…

Recently I had to create a Countdown for one of my other projects and I thought that it could also make a good tutorial, so in this post we're going to create this component using React and a little bit of . 😄 You can find the final result in this…

The theme for week #9 of the Weekly Coding Challenge is: Modal We have another one of the main components that is found on most of the websites. A modal is used to attract the users attention to some special information that you want to highlight. It…

The theme for week #8 of the Weekly Coding Challenge is: Chat Interface Everyone is using a chat of some sort nowadays so in this article we're going to create the bare bones of a chat application. We'll start with the HTML/CSS to create the layout…

Two weeks ago I published an article containing 15 project ideas that you could build to level up your coding skills and people were very excited about that resource. Also, the app-ideas repository got almost 3000 stars since I published that article…

The theme for week #7 of the Weekly Coding Challenge is: Portfolio As a developer it is highly recommended to have a portfolio with some of the projects that you've been working on. I say some, because maybe not all of your projects are worthy to be…

These days I've been working on a new page for my website. I wanted to have a Timeline to showcase some of my professional accomplishments over the years. I did it for a couple of reasons: My future self will look back one day and say: "Wow... I…

The theme for week #6 of the Weekly Coding Challenge is: Button "A button? 🤔" you might ask... Yes! A button! 😄 "But why?" Because a button is one of the building blocks of any website/web application. Either you are on facebook or twitter or…

Last week I found something that amazed me. A designer that took the 100 UI Design Challenge to a whole new level! She's been creating a new design every workday for the past 3+ years (800+ designs)! Amazing! 😮 You can find her on dribbble as…

The theme for week #5 of the Weekly Coding Challenge is: Drawing Application This is the first application that we are building in the #weeklyCodingChallenge program. So far we have built smaller projects, so this is pretty exciting if you ask me…

Have you ever wanted to build something but you had no idea what to do? Just as authors sometimes have "writers block" it's also true for developers. Together with my friend Jim we created a collection of application ideas which is intended to solve…

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…

The theme for week #3 of the Weekly Coding Challenge is: Navigation A navigation component is crucial on a website because you want your users be able to easily navigate through your pages. You can find a navigation component even on single page…

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…

For today I was thinking that we could build an App using React, and because the people from the Chingu group I'm in are working to create a Book Finder App I decided to build something similar. I also wanted to avoid building the exact same app as I…

For this post I've decide that I'll teach you how to create a Pricing Plan component as the one shown bellow: Pricing Plans snapshot This kind of component is used on most of the SaaS (Software as a Service) presentation websites where people can…

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 article we're going to create a simple progress bar which will act as an indicator on how much a user scrolled on the website. It can be very useful for a blog or any kind of website where you might have some extra text. This way the readers…

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…