Blurry Header

1.07.2020

Progressive backdrop blur experiment.

Made with: HTML (Pug),CSS (Sass)

View Code

PlaceholderBlurry Header

Footer Design

2.04.2020

Made with: HTML,CSS

View Code

PlaceholderFooter Design

Just A Simple Header Bar

27.01.2020

Just a really simple pure CSS header bar.

Made with: HTML,CSS

View Code

Just A Simple Header Bar

Css Goey Footer

28.12.2019

Made with: HTML (Pug),CSS (SCSS)

View Code

PlaceholderCss Goey Footer

Footer Always At The Bottom - Flexbox

13.08.2019

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

View Code

Footer Always At The Bottom - Flexbox

Hover Effect For Headers

25.02.2019

8 hover effects for header in HTML and CSS.

Made with: HTML (Pug),CSS (SCSS)

View Code

PlaceholderHover Effect For Headers

Header / About Page

12.02.2019

A simple header.

Made with: HTML,CSS (SCSS)

View Code

Header / About Page

Sticky Headers

9.02.2019

Made with: HTML (Pug),CSS (SCSS),JavaScript

View Code

PlaceholderSticky Headers

Animated Footer Toggle

8.02.2019

Expand/collapse footer with animations.

Made with: HTML (Pug),CSS (SCSS),JavaScript (Babel)

View Code

PlaceholderAnimated Footer Toggle

Footer With Css Grid

3.01.2019

Evenly space links with CSS Grid. No margin or padding needed!

Made with: HTML,CSS

View Code

PlaceholderFooter With Css Grid

Non Rectangular Headers

27.06.2018

Non-Rectangular header with inline SVG.

Made with: HTML (Pug),CSS (SCSS)

View Code

Non Rectangular Headers

Header For Landing Page

27.02.2018

Header for landing page using clip-path.

Made with: HTML,CSS

View Code

Header For Landing Page

Flexbox Sticky Footer

24.02.2018

A simple example of using flexbox to create a sticky footer page layout.

Made with: HTML (Pug),CSS (SCSS)

View Code

Flexbox Sticky Footer

Curve Header

18.01.2018

Pure CSS curve header.

Made with: HTML

View Code

Curve Header

Header Image Parallax Scrolling Effect With Css

8.01.2018

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

View Code

Header Image Parallax Scrolling Effect With Css

Fixed Angled Header

6.01.2018

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

View Code

Fixed Angled Header

Skewed Header

20.09.2017

Skewed header with HTML and CSS.

Made with: HTML/Pug

View Code

Skewed Header

Sexy Animated Rainbow Waves Header

4.09.2017

Just a little front-end UI experiment.

Made with: HTML

View Code

Sexy Animated Rainbow Waves Header

Curve Svg Background Animation

16.07.2017

Curve SVG background animation for header.

Made with: HTML

View Code

Curve Svg Background Animation

Sticky Header On Scroll

1.07.2017

High performance sticky header with shadow on scroll.

Made with: HTML

View Code

Sticky Header On Scroll