![Blurry Header](https://img.cssmix.net/img/2022/9/3154_blurry-header.webp)
![Footer Design](https://img.cssmix.net/img/2022/8/3158_footer-design.webp)
![Just A Simple Header Bar](https://img.cssmix.net/img/2022/7/just-a-simple-header-bar_3155.webp)
![Css Goey Footer](https://img.cssmix.net/img/2022/9/3159_css-goey-footer.webp)
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
![Footer Always At The Bottom - Flexbox](https://img.cssmix.net/img/2022/7/footer-always-at-the-bottom--flexbox_3160.webp)
Hover Effect For Headers
8 hover effects for header in HTML and CSS.
Made with: HTML (Pug),CSS (SCSS)
![Hover Effect For Headers](https://img.cssmix.net/img/2022/9/3150_hover-effect-for-headers.webp)
![Header / About Page](https://img.cssmix.net/img/2022/7/header-about-page_3151.webp)
![Sticky Headers](https://img.cssmix.net/img/2022/9/3156_sticky-headers.webp)
Animated Footer Toggle
Expand/collapse footer with animations.
Made with: HTML (Pug),CSS (SCSS),JavaScript (Babel)
![Animated Footer Toggle](https://img.cssmix.net/img/2022/9/3161_animated-footer-toggle.webp)
Footer With Css Grid
Evenly space links with CSS Grid. No margin or padding needed!
Made with: HTML,CSS
![Footer With Css Grid](https://img.cssmix.net/img/2022/9/3162_footer-with-css-grid.webp)
Non Rectangular Headers
Non-Rectangular header with inline SVG.
Made with: HTML (Pug),CSS (SCSS)
![Non Rectangular Headers](https://img.cssmix.net/img/2022/7/non-rectangular-headers_3144.webp)
![Header For Landing Page](https://img.cssmix.net/img/2022/7/header-for-landing-page_3152.webp)
Flexbox Sticky Footer
A simple example of using flexbox to create a sticky footer page layout.
Made with: HTML (Pug),CSS (SCSS)
![Flexbox Sticky Footer](https://img.cssmix.net/img/2022/7/flexbox-sticky-footer_3163.webp)
![Curve Header](https://img.cssmix.net/img/2022/7/curve-header_3145.webp)
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
![Header Image Parallax Scrolling Effect With Css](https://img.cssmix.net/img/2022/7/header-image-parallax-scrolling-effect-with-css_3146.webp)
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
![Fixed Angled Header](https://img.cssmix.net/img/2022/7/fixed-angled-header_3147.webp)
![Skewed Header](https://img.cssmix.net/img/2022/7/skewed-header_3148.webp)
![Sexy Animated Rainbow Waves Header](https://img.cssmix.net/img/2022/7/sexy-animated-rainbow-waves-header_3153.webp)
Curve Svg Background Animation
Curve SVG background animation for header.
Made with: HTML
![Curve Svg Background Animation](https://img.cssmix.net/img/2022/7/curve-svg-background-animation_3149.webp)
Sticky Header On Scroll
High performance sticky header with shadow on scroll.
Made with: HTML
![Sticky Header On Scroll](https://img.cssmix.net/img/2022/7/sticky-header-on-scroll_3157.webp)