An Introduction to CSS Logical Properties | FREE COURSE

Channel:

Envato Tuts+

Subscribers:

1,620,000

Published on September 8, 2021 3:00:13 PM ● Video Link: https://www.youtube.com/watch?v=YtasvnnlV6I

Game:

Counter-Strike: Source (2004)

Category:

Vlog

Duration: 34:53

3,507 views

198

In this course, you’ll learn how to use CSS logical properties so that you can switch the writing direction of your website and everything will display correctly. ► Download unlimited creative assets for your web design projects: https://elements.envato.com/?utm_campaign=yt_tutsplus_YtasvnnlV6I&utm_medium=referral&utm_source=youtube.com&utm_content=description

If you’ve never heard of CSS logical properties, don’t worry—they’re pretty new, but they’re also pretty awesome! The basic idea behind them is that we can create layouts that automatically adapt to the writing direction of the document. Learn all about them with Adi Purdila:

0:00 Introduction
2:23 Content Direction and Logical Properties
11:43 Text Alignment
16:01 Margin, Padding, and Border
22:35 Width and Height
27:14 Position and Float

Links:

* CodePen Collection https://codepen.io/collection/mrVoyo
* Illustration on Envato Elements https://elements.envato.com/2-options-asking-for-directions-vector-artwork-EQYZF8L?utm_campaign=yt_tutsplus_YtasvnnlV6I&utm_medium=referral&utm_source=youtube.com&utm_content=description
* direction property https://developer.mozilla.org/en-US/docs/Web/CSS/direction
* writing-mode property https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
* How to Use CSS Logical Properties https://webdesign.tutsplus.com/tutorials/how-to-use-css-logical-properties--cms-33024?utm_campaign=yt_tutsplus_YtasvnnlV6I&utm_medium=referral&utm_source=youtube.com&utm_content=description
* CSS Logical Properties https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties#reference
* Browser Support https://caniuse.com/css-logical-props
* CodePen Demo https://codepen.io/tutsplus/pen/yLbWjbL
* CodePen Demo 1 https://codepen.io/tutsplus/pen/NWjVMjJ
* CodePen Demo 2 https://codepen.io/tutsplus/pen/yLbWjXL

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_YtasvnnlV6I&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_YtasvnnlV6I&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Other Statistics