#ui

Articles tagged with #ui

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 read103
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 read128
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 read78
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 read46
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 read43
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 read71