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

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: https://github.com/astrit/youtube/tre... Demo: https://css.gg/epic/index.html Links: https://github.com/astrit   / astritmalsija   https://codepen.io/astrit Timestamps: 0:00:00 - 0:00:26 - intro 0:00:26 - 0:05:46 - project walkthrough 0:06:13 - 0:27:00 - mac - scrollbar, :is(), --var 0:27:30 - 0:52:40 - stripes - animation, clip-path 0:52:46 - 1:07:30 - headline, blend-mode, vertical sticky, fadein background 1:07:30 - 1:36:36 - gallery, aspect-ratio, rotate, landscape 1:37:00 - 1:47:00 - list, background-clip, gradient text, sticky list 1:47:00 - 2:01:50 - horizontal - position sticky, rotation, backdrop-filter 2:01:50 - 2:02:47 - outro #css #csshtml #advancedcss Me: My name is Astrit, a self-taught front-end developer from Stockholm, English is not my first language and you can probably notice 😂 . I love to push CSS to its limits and share it with the community in the process. The developer behind CSS.GG (700 icons in pure CSS) https://css.gg Setup: Logi MX Master 3 -https://amzn.to/2Zl8NSn Sony XM3 - https://amzn.to/2NCbxIb Anne Pro 2 - https://amzn.to/3ug7GSe Samsung Space 32" - https://amzn.to/3pUK6rC MacBook Pro 16" - https://amzn.to/3bfjM55 Neue Chair - http://bit.ly/2ZlXjOz VS Code Extensions: Bookmarks: http://bit.ly/37lf5G0 Bracket Highlighter: http://bit.ly/2LVJ93l Bracket Padder: http://bit.ly/2Zkw1ba Browser Preview: http://bit.ly/3qu1YcT Color Highlight: https://bit.ly/37lfxEc ESLint: http://bit.ly/3qrEGEN GitHub Dark Classic theme: http://bit.ly/3jU4lTS HEX to RGBA: https://bit.ly/3ug7bHQ Highlight Matching Tag: http://bit.ly/3asVGoC Live Server: http://bit.ly/3pl8Aco Todo Tree: http://bit.ly/3jVXzxd Images: http://bit.ly/3sVFHpu Remarks: Position: Sticky The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements. Mix Blend Mode: The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background. Aspect Ratio: The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions. Grid Template: The grid-template CSS property is a shorthand property for defining grid columns, rows, and areas. Custom Variables: Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function. calc() The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a length, frequency, angle, time, percentage, number, or integer is allowed. :is(),:matches(), :any(): The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form. @property: The @property CSS at-rule is part of the CSS Houdini umbrella of APIs, it allows developers to explicitly define their css custom properties, allowing for property type checking, setting default values, and define whether a property can inherit values or not.The @property CSS at-rule is part of the CSS Houdini umbrella of APIs, it allows developers to explicitly define their css custom properties, allowing for property type checking, setting default values, and define whether a property can inherit values or not.