90 Days Of HTML and CSS. Basically, this project will be develope by 90 days. Every day ( without weekends ) I will try to use my current knowledge about HTML and CSS to build something useful, interesting, simple, and good-looking. So, I am happy because I'm going to show and convey to you a lot of knowledge especially about CSS. Based on my projects you can learn how to use CSS in a very creative way. The most important thing is: all projects will be created purely using HTML and CSS only. No JavaScript, Webpack, npm, Node.js, SASS, CSS frameworks, and other similar stuff. So if you will see animations, interactions, and stand-out effects, I guarantee you. It will be HTML and CSS only without any single line of JS code.
My first challenge is building this project which you see currently. In this challenge, I wanted to build a very simple and clean website using only HTML structure and CSS styles without fireworks.
A custom animated page loader based on pseudo selectors.
See the Pen jOVBxwj by Krzysztof Grudzień (@CrisCode-2018) on CodePen.
A very cool gallery based on grid and css animations. When you hover on particular thumbnail image from left side the big one will show up.
See the Pen ExNWLeW by Krzysztof Grudzień (@CrisCode-2018) on CodePen.
A custom burger menu icon with changing icon and text. This is a very popular approach how to subtitute the JavaScript using the CSS syntax only.
See the Pen wvoJjZL by Krzysztof Grudzień (@CrisCode-2018) on CodePen.
The fundamental idea is to hover on the icon and the tooltip should be show up from different sides. I didn't use many classes for different directions. So, in the css styles - there is a special section with different types of behavior. Most code have been commented but only one type of direction is uncommented. You can choose your type.
See the Pen Custom hover tooltip by Krzysztof Grudzień (@CrisCode-2018) on CodePen.
Sending email button with animated content when user clicks the button
See the Pen Custom send mail button by Krzysztof Grudzień (@CrisCode-2018) on CodePen.
Different approach to the navigation on the websites.
See the Pen Custom circle navigation by Krzysztof Grudzień (@CrisCode-2018) on CodePen.
Custon toggle radio buttons - nice 😉
See the Pen Custom toggle radio buttons by Krzysztof Grudzień (@CrisCode-2018) on CodePen.
Good approach if you want to avoid JS for custom labels (posts, news, etc)
See the Pen LYbWrjg by Krzysztof Grudzień (@CrisCode-2018) on CodePen.
Stand out navigation with images inside.
See the Pen JjbWZMa by Krzysztof Grudzień (@CrisCode-2018) on CodePen.
Awesome effect with hover event on the card. When you hover on it the card will turn over.
See the Pen mdOmWOq by Krzysztof Grudzień (@CrisCode-2018) on CodePen.
Sometimes you need to customize your select tag of form, so below there is something that you need.
See the Pen Custom select tag by Krzysztof Grudzień (@CrisCode-2018) on CodePen.
An amazing credit card layout!!!. In addition, there is a hover effect for front and back side 😉.
See the Pen Credit Card Layout by Krzysztof Grudzień (@CrisCode-2018) on CodePen.
If you want create a custom "input range", you should check this.
See the Pen Custom input range by Krzysztof Grudzień (@CrisCode-2018) on CodePen.