Two simple CSS🍉 tips and a piece of love this Saturday.

Portious Banda — Sat, 19 Mar 2022 13:20:57 +0000

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.

Damn i love the CSS inset property, it's short hand for top, left, bottom and right:

stick to bottom:
position: absolute;
inset: auto 0 0 0;

full screen:
position: absolute;
inset: 0;https://t.co/fCcmDbRcgM
— Ada Rose Cannon (@adarosecannon) December 17, 2021

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 the inset 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). Here 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 here.

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

"If you aren’t curious about it, you’ll never be good at it."@naval
— Navalism (@NavalismHQ) March 1, 2022

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.

DEV Community: Portious Banda

Two simple CSS🍉 tips and a piece of love this Saturday.

The inset CSS property

Syntax:

Animating clip-paths

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

The `inset` CSS property