Beginner's Add-ons

Hello, and thank you for choosing this article. Today I bring to you three amazing items, two for CSS and a piece of love. I tried this time 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.

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 CSS Logical Properties 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 theinset property here.

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).

Below is a pen I made to demonstrate this:

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 here.

Today's advice is so simple and it's actually from myself🙂

It's just about the happenings in Ukraine and anywhere else where human dignity and peace is getting uprooted. I know you're aware. I believe if there is anything worth doing now is preaching peace and love for humanity.

Life in times like this needs no war. My thoughts and prayers go to the people of Ukraine and all affected.

A million thank you mate for making it this far. I'm so glad! However, I can only keep writing these 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.