CRAYON CODE

CRAYON CODE
14 posts
Building a vertical calendar with HTML, CSS & JS
Today let's build together a small vertical calendar using CSS grid layout, the tag and a little bit of JavaScript... This article is an extract of a larger project dashboard I coded. For the impatient ones or those who want to see how the entire d...
Mar 7, 20227 min read
How to build 5 clip-path hover effects
Today let's build 5 awesome hover effects with CSS clip-path! Read the full article or watch me code this on Youtube: https://youtu.be/YS9Je33kTxs Result https://codepen.io/crayon-code/pen/GRNrLbL Basic Setup Let's first setup a few basic things like...
Feb 19, 20218 min read
Let's build a responsive navbar from scratch
Today let's build a responsive navbar, an animated burger icon and a beautiful uncovering effect from scratch using HTML, CSS, clip-path, flexbox, grid layout and so much more... Read the full article or watch me code this on Youtube: https://youtu.b...
Feb 12, 202119 min read
Let's build a layout from scratch
Today let's build the layout for an entire website from scratch using HTML, CSS, flexbox, grid layout and so much more... Read the full article or watch me code this on Youtube: https://youtu.be/Hc48OFEemHs Result https://github.com/crayon-code/websi...
Feb 5, 202110 min read
3 Ways to create a Navbar (CSS Grid Layout)
Today let's build three different navbar layouts using the CSS grid layout and I'll show you, how easy it is to change the arrangement of the items without actually touching the markup. Read the full article or watch me code this on Youtube (TL;DW): ...
Jan 29, 202111 min read
Shiny Glass Hover Effect (Glassmorphism)
Today let's work with the backdrop-filter property and a skewed ::before element, to create a nice shiny glass hover effect. Read the full article or watch me code this on Youtube (TL;DW): https://youtu.be/RbwhHvu1xlM Result https://codepen.io/crayon...
Jan 24, 20217 min read
CSS Day Night Switch (CSS/HTML only) [PART 2]
Now let's get this finished by implementing the night state of our nice day-night-switch by implementing a moon, day-night transitions and a few sparkling stars as a bonus. Read the full article or watch me code this on Youtube: https://www.youtube.c...
Jan 17, 20218 min read
CSS Day Night Switch (CSS/HTML only) [PART 1]
See also Part 2 Today let's build a nice little day night switch with sunset and sunrise and a lot of CSS transitions. In this first part we're going to take care of the day phase of the switch, so we start with a checkbox in checked state. Read the...
Jan 17, 20219 min read
CSS Download Loading Animation (@keyframes, clip-path)
Today let's work with CSS animations & clip-path to create a nice little download animation with an indefinite and a definite mode. Read the full article or watch me code this on Youtube: https://youtu.be/DpXj8xsTyAo Result https://codepen.io/crayon-...
Jan 15, 20215 min read