Full Page: 20 Advanced CSS & HTML techniques: clip-path, @property, aspect-ratio and blend-mode

Full Page: 20 Advanced CSS & HTML techniques: clip-path, @property, aspect-ratio and blend-mode

·

2 min read

Today I am sharing with you this advanced CSS & HTML tutorial where we are going to go through some of the best techniques to achieve the effect that you see on this landing page like mix-blend-mode, clip-path, position: sticky, css grid and what not.

This is a 2hr long tutorial where I explain how I build that demo landing page start to finnish and along the way you can find some very interesting things.

We are going to build an entire landing page with a hero, gallery, list, object rotation and the final section position sticky horizontally.

Note that time to time I might have mixed the words but please don't mind me this has been a very long tutorial and just my second video.

Otherwise check the source for the preloader and Houdini API which has been cut from this video as it already got too long.

Don't forget to subscribe ✌️

Source:
github.com/astrit/youtube/tre...​

Demo: css.gg/epic/index.html