The headers and footers are Essential elements when creating a new page web or a blog, or if nothing else we need to update them to meet the current standards of web design. They are spaces to which the visitor to our website usually pays great attention, so we have to take care of them and pamper them enough so that they are pleasing to the eye, apart from being functional.
For that reason we are going to share 29 CSS headers and footers that you can use on your blog or website, and thus give it that point of quality that you were looking for. This list is made up of full screen article headers, as well as the standard size, fixed or fixed headers, footers and some video headers to give another point of perspective to your website.
Curved header
A header that is identified by its curved style at the bottom which makes it a very special header for a website or blog. It is pure CSS, so it is already taking time to test in your web staging how it will look if you include it in your blog.
Header image Parallax
With a great Parallax image effect, this header identifies itself by use CSS background-image position. The header image would be positioned at the top of the page for great effect code.
Header fixed angled
This header is well fixed at the top of the web page to differentiate with that diagonal line that crosses the entire horizontal of the user's view. It shows how CSS pseudo-elements can be used to create a fixed header with a background image.
Skewed header
CSS and HTML for this header that in the given example is characterized along that diagonal line that crosses the entire screen from one side to the other.
Header with SVG animation
A very simple header, although it uses an SVG animation to distinguish yourself of which we have in this list. You can access a large list of web pages with SVG animations from here.
Fixed header with Div
With Parallax image effect, a fixed header that stands out for the great effect achieved with the fixed background image while the rest scrolls as we scroll with the mouse.
Parallax multi-layer illustration
A header of great finish in Multi-layered HTML, CSS and JavaScript and that can be used perfectly for a website related to the world of video games. Great finish throughout.
Fixed post header
A fixed header for each post made in HTML, CSS and JavaScript. The moment we roll down, the header is minimized and fixed at the top.
Full screen header with animation
A header that provides an animation that moves laterally and that produces a relaxing effect on the viewer.
Hero image full screen
With a zoom effectThis header full screen it is revealed as one of great originality. Perfect for a website in which the visitor is going to make great use of scrolling to move around it.
Flexbox with button
A header that takes the entire width of the screen to display a button. Perfect for landing pages with CSS flexbox.
Flexbox Hero Header
A header with effect parallax and flexbox quite simple that stands out for the elegance of its design mainly.
Sticky Header on scroll
As its name suggests, a fixed header when we scroll with the mouse when moving to see the rest of the web page.
Responsive Scrolling Sticky
Another fixed header of great effect when the menu reaches the top of the page, whyand at that moment it remains fixed and we can keep scrolling the site.
Scroll Header
It differs from the rest by proper and delicate animation as we move. At the end of it, the headboard remains fixed at the top.
Responsive Scroll Header
Another great animation for distinguish this header from the rest with HTML, CSS and JavaScript.
Header In / out
A header that is distinguished by the effect In / out after scrolling and that produces the sensation of rebound.
header fade
Another animation effect curious and very elegant in HTML, CSS and JavaScript.
Header that is hidden
A different header when hiding according to we use scrolling with an animation that goes unnoticed but of great quality.
parallax footer
A fixed or fixed footer with HTML, CSS and JavaScript. From great quality with shading in effect.
Footer with content scale
A high quality and original footer for astonish the visitor for the graceful way of displaying this web space.
Social media footer
A footer that stands out for the buttons that lead to social networks best known. The animation that occurs when you leave the mouse pointer over each of the social networks stands out.
Animated mobile footer menu
By reducing the web browser window to view this footer, you will be able to find the 2-3 sections that the user can find on a mobile device. It is displayed at 767px.
Simple Fixed Footer
Made in HTML and CSS is a simple footer without much fanfare and flourish.
React Video Header
A header with simple video React.js.
Video Header
Other header with simple video and of great quality.
Full Screen Video Header with Mix-Blend
Show a full screen video with text on layer using mix-blend mode.
Video Header animation
The animation was customized with Adobe After Effects to be compatible with all browsers. It does not work on mobile.
Responsive video header with gradient
El gradient is what stands out to this video header from the rest.
They all convinced me. Thank you
You're welcome!