DEV Community

loading...
Cover image for 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

astrit profile image Astrit Updated on ・1 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.

Source:

https://github.com/astrit/youtube

Demo:
https://css.gg/epic/index.html

Discussion (0)

pic
Editor guide