Css Parallax Hero

10.04.2020

Parallax effect created with CSS transforms and perspective properties.

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

View Code

PlaceholderCss Parallax Hero

Easter Hero

10.04.2020

Made with: HTML,CSS (SCSS)

View Code

Easter Hero

Website Hero

8.04.2020

Just playing around with position sticky for some fun scrolling effects.

Made with: HTML,CSS (SCSS)

View Code

PlaceholderWebsite Hero

Heroes In The Spotlight

8.04.2020

Made with: HTML,CSS (SCSS)

View Code

Heroes In The Spotlight

Hero - 3 Designs

7.04.2020

Made with: HTML,CSS (SCSS)

View Code

PlaceholderHero - 3 Designs

Dual Picture Hero

1.01.2020

Made with: HTML,CSS

View Code

Dual Picture Hero

Hero Waves

16.10.2019

Made with: HTML,CSS

View Code

PlaceholderHero Waves

Hero Animation

17.09.2019

Made with: HTML,CSS (SCSS)

View Code

PlaceholderHero Animation

Hero Article

27.07.2018

Using Grid to layout an article hero card.

Made with: HTML,CSS (SCSS)

View Code

Hero Article

Hero Module With Flexbox And The 'Vh' Unit

1.12.2017

The hero is a widely used module. This version is created with modern techniques like flexbox and the vh unit. Flexbox and the vh unit makes it possible to create this module with less code.

Made with: HTML,CSS (SCSS)

View Code

Hero Module With Flexbox And The 'Vh' Unit

Css Star Animation For Hero

19.06.2017

Diagonal hero div with CSS star animation background.

Made with: HTML,CSS (SCSS)

View Code

Css Star Animation For Hero

Stripe Hero

4.10.2016

CSS stripe hero from stripe.com.

Made with: HTML,CSS

View Code

Stripe Hero

Animated Hero Background

21.05.2016

An animated hero background, that can be used for portfolio sites.

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

View Code

Animated Hero Background

Animated Hero Image With Css Clipping

7.03.2016

Animated with CSS and applied CSS fixed item clipping to get subtle animation.

Made with: HTML,CSS (PostCSS)

View Code

Animated Hero Image With Css Clipping

Hero Experiment

7.01.2016

Mix gradients with some colourful background – have yourself some cool hero.

Made with: HTML,CSS (SCSS)

View Code

Hero Experiment

Hero Image And Css Gradient

10.05.2015

Hero image with CSS gradient animation.

Made with: HTML,CSS

View Code

Hero Image And Css Gradient

Headings/Hero Image Typography Playground

24.01.2015

Explanation is at the top of CSS file. Just some typefaces, helper classes and few presets for easily testing headings typography.

Made with: HTML,CSS

View Code

Headings/Hero Image Typography Playground

Tinted Hero

6.12.2013

A quick way to tint a typical hero in websites. Just use a pseudo class instead of another div.tint: .hero:before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 7, 100, .6); }.

Made with: HTML,CSS

View Code

Tinted Hero