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 Source: https://github.com/astrit/youtube Demo: https://css.gg/epic/index.html Also published at https://dev.to/astrit/full-page-20-advanced-css-html-techniques-clip-path-property-aspect-ratio-and-blend-mode-1ee7

YouTube

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

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Top 20 CSS3 And HTML Techniques You Must Know

Too Long; Didn't Read

Company Mentioned

Astrit

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Top 20 CSS3 And HTML Techniques You Must Know

Too Long; Didn't Read

Company Mentioned

Astrit

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES