Two simple CSS🍉 tips and a piece of love this Saturday.
Tags: css, html, webdev, beginners
Published: 2022-03-19 13:20:57

Hello, and thank you for choosing this article. I bring to you three amazing items, two for CSS and a piece of love from Twitter. I tried to include even links for further reading.
 
>Though the title of the article favors beginners, anyone can read this; those interested to refresh their skills, or those paving their journey to senior developers. It depends on how you feel and the contents I have organized.

Now let's dive in and get started.

### The `inset` CSS property

Well, not a word so peculiar but a CSS property with abilities so fascinating. I have been passing it lately. I have had no intentions of learning what it does not until after the tweet below.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Damn i love the CSS inset property, it&#39;s short hand for top, left, bottom and right:<br><br>stick to bottom:<br> position: absolute;<br> inset: auto 0 0 0;<br><br>full screen:<br> position: absolute;<br> inset: 0;<a href="https://t.co/fCcmDbRcgM">https://t.co/fCcmDbRcgM</a></p>&mdash; Ada Rose Cannon (@AdaRoseCannon) <a href="https://twitter.com/AdaRoseCannon/status/1471855546580049925?ref_src=twsrc%5Etfw">December 17, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

I just said to myself, let me give it a try and this is what I found:

Just like the tweet states, it's a shorthand that corresponds to the `top`, `right`, `bottom`, and/or `left` properties. 

It accepts numeric values in a clockwise direction, in the order _top_ _right_ _bottom_ and _left_, meaning it has the same syntax as the _margin_ and _padding_ shorthand. 

It is part of the <a href="https://adrianroselli.com/2019/11/css-logical-properties.html">CSS Logical Properties</a> but it does not define logical offsets. It defines physical offsets, regardless of the element's writing mode, directionality, and text orientation.

Before inset, the hack was to declare each inset sub-property separately, as shown below:

```
.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
``` 

Now, we can simplify that to a single line of CSS: 

```
.box {
  position: absolute;
  inset: 0; /* 🎉 */
}
``` 

#### Syntax:


```
inset:length|percentage|auto|inherit|initial|unset;

/* <length> values */
inset: 10px;   /* value applied to all edges */
inset: 4px 8px;   /* top/bottom left/right */
inset: 5px 15px 10px;   /* top left/right bottom */
inset: 2.4em 3em 3em 3em;   /* top right bottom left */

/* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */
inset: 10% 5% 5% 5%;

/* Keyword value */
inset: auto;

/* Global values */
inset: inherit;
inset: initial;
inset: revert;
inset: unset;
```


- `length`: It sets a fixed value defined in px, cm, pt, etc. Negative values are also allowed. Its default value is 0px.
- `percentage`: It is the same as length but it set the size in terms of the percentage of the window size.
- `auto`: It is used when it is desired that the browser determines the inset size.
- `initial`: It is used to set the value of the inset property to its default value.
- `inherit`: It inherits the inset property value from its parent element.
- `unset`: It is used to unset the inset property and it is the default value.

More about the inset property <a href="https://css-tricks.com/almanac/properties/i/inset/">here.</a> 

### Animating clip-paths

One of the cool things we can do with clip-paths is animation.

But only when the shapes are compatible can we animate our `clip-paths`. That is keeping the same amount of points to animate with. 
For example, if we use a polygon as the first shape, then all the other shapes must be polygons with the same amount of coordinates(x y points). <a href="https://codepen.io/portious_banda/pen/RwjYMBy">Here</a> is a pen I made to demonstrate that. 

There are tons of situations on the web that require `clip-path` CSS and it is just worth learning. Besides, animations are just so cool for users. Learn more about clip-path if you desire so by clicking <a href="https://css-tricks.com/animating-with-clip-path/">here.</a>

<hr>
### Today's advice is so simple and it's from one of the famous people on twitter.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">&quot;If you aren’t curious about it, you’ll never be good at it.&quot;<a href="https://twitter.com/naval?ref_src=twsrc%5Etfw">@naval</a></p>&mdash; Navalism (@NavalismHQ) <a href="https://twitter.com/NavalismHQ/status/1498553624456138754?ref_src=twsrc%5Etfw">March 1, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

_Check your curiosity. Start learning!_

A million thank you mate for making it this far. I'm so glad! However, I can only keep writing such articles if you like them so let me know what you think in the comments section below. I'll appreciate and take note of your reactions.