Footer Always At The Bottom - Flexbox
When a web page doesn't have enough content to fit the screen, the footer doesn't stay at the bottom so it ends up looking weird. Solution: Do the layout using flex columns. In addtion to that either, add flex-grow: 1 to the content area, here it is the section. Or add margin-top: auto to the element you you wish for it to always stay at the bottom, here it is footer.
Made with: HTML,CSS
Hover Effect For Headers
8 hover effects for header in HTML and CSS.
Made with: HTML (Pug),CSS (SCSS)
Animated Footer Toggle
Expand/collapse footer with animations.
Made with: HTML (Pug),CSS (SCSS),JavaScript (Babel)
Footer With Css Grid
Evenly space links with CSS Grid. No margin or padding needed!
Made with: HTML,CSS
Non Rectangular Headers
Non-Rectangular header with inline SVG.
Made with: HTML (Pug),CSS (SCSS)
Flexbox Sticky Footer
A simple example of using flexbox to create a sticky footer page layout.
Made with: HTML (Pug),CSS (SCSS)
Header Image Parallax Scrolling Effect With Css
Create a parallax scrolling effect using CSS background-image position. This script works when the header image is positioned at the top of the page.
Made with: HTML
Fixed Angled Header
This pen shows how CSS pseudo-elements and transforms can be used to create a fixed, angled header with an image background.
Made with: HTML
Curve Svg Background Animation
Curve SVG background animation for header.
Made with: HTML
Sticky Header On Scroll
High performance sticky header with shadow on scroll.
Made with: HTML
