Top 20 CSS3 And HTML Techniques You Must Know

Written by astrit | Published 2021/03/20
Tech Story Tags: css | html | html5 | css3 | css-animation | animation | css-transitions | css-tricks

TLDRvia the TL;DR App

Hello 👋
I have been for a while collecting on a single place some of the most advanced CSS features out there like Houdini API @propert and also strangest stuff you can do with position sticky and compiled all those into a single 2hr long video.
Where I 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 such as font-size with ch, ex and also aspect-ratio
We are going to build an entire landing page with a hero, gallery, list, object rotation and the final section position sticky horizontally.
Without going any deeper into what is included there I would invite you guys to watch the video
And if you wish to play with it go ahead and check the source and the demo down below

Written by astrit | Front-end Developer, creator of CSS.GG
Published by HackerNoon on 2021/03/20