How to use the CSS "inset" Property to create styling effects.

Having control over the positioning and styling of elements is an important part of creating visually appealing and responsive web pages in CSS. Fortunately, the inset property helps us achieve this by giving developers precise control over positioning.

Inset offers a level of precision ranging from adjusting the spacing between elements, styling box shadows, or strategically positioning elements, and this helps to enhances user interfaces with visually appealing effect.

In this tutorial, you will learn how to use inset property to position elements and improve styling. We would also look at its syntax, various use cases, and best practices to use when styling web pages

Understanding the inset Property

Inset is a versatile property used in styling elementsin CSS. It is usually used with the 'position' property but can also be used alone to style and add effects to elements in css.

When used in combination with the “position” property it allows you to precisely control the position of an element within its containing parent. Inset can take up to four depending on the effect you’re looking to achieve. It can be declared using this syntax

inset: value;

How to use inset to position elements.

Inset can be used to set the top, left, tight, and bottom properties simultaneously. This means, instead of using separate properties like top, bottom, right, and left to specify the distances, inset allows you to declare all these values in a single line of code. For instance;

body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: rgb(95, 99, 100);
  height: 200px;
  width: 400px;
  position: relative;
}

.inner {
  background-color: rgb(150, 230, 230);
  position: absolute;
  top: 90px;
  right: 90px;
  left: 90px;
  bottom: 90px;
  height: 30px;
  text-align: center;
}

In this code we positioned the .inner box 90px away from the top, bottom, right, and left to achieve this. This effect can be achieved in just a line of code using inset

.inner {
  background-color: rgb(150, 230, 230);
  position: absolute;
  inset: 90px;
  height: 30px;
  text-align: center;
}

Here, we replaced the top, right, left, and bottom properties with inset. This has the same effect which is to position the element 90px away from the box on all four sides.

When using inset in place of the traditional method, the position property must be set to either “absolute” or “relative”. Each of these positions has different effects;

Using inset with position: absolute

The position: absolute; positions the .inner element relative to the closest ancestor which is .box in this case. If the box has a relative positioning, it will act as a reference for positioning the .inner element just like in the previous example.

Using inset with position: relative

When an element is positioned as “relative,” it stays within the normal document flow, and its original space is preserved. The inset values define the distance the element should be moved from its original position within the document flow.
For example, if we are to change the position to relative, we would have;

.inner {
  background-color: rgb(150, 230, 230);
  position: relative;
  inset: 10px 2px; /* This moves the element 10px down and 2px to the right from its original position */
  text-align: center;
}

In this snippet, we moved the .inner element 10 pixels down and 2 pixels to the right from its original position within the document flow.

P.S. If the inset property is given one value, it applies to all four sides, however, it can accept more than one value;

• When given two values the first value would represent the top and bottom, and the second value represents left and right.

.inner {
  inset: 10px 20px; /* This applies 10px top and bottom, 20px right and left */
}

• With three values, the first value sets the top, the second value sets the right and left distances, and the third value sets the bottom distance.

.inner {
  inset: 10px 20px 30px; /* Applies 10px top, 20px right and left, 30px bottom */
}

• When you provide four values, they are applied to the top, right, bottom, and left distances, respectively.

.inner {
  inset: 10px 20px 30px 40px; /* This applies 10px top, 20px right, 30px bottom, 40px to the left */
}

With this method, you can have more control over stylings while still achieving a cleaner code.

You can also use inset with other elements such as box shadow to add effects to your styles. This can be applied when styling buttons, Icons, card-based layouts, etc

How to use inset with box-shadow property.

The box-shadow property in CSS is used to add a shadow effect to an element. It can take multiple values, including the horizontal offset, vertical offset, blur radius, spread radius, color, and inset

horizontal offset: This value controls the horizontal distance that the shadow will be offset from the element
vertical offset: controls the vertical distance that the shadow will be offset from the element.
blur radius: The blur radius determines how blur the shadow should appear.
spread radius: Spread radius controls the size of the shadow.
color: The color of the shadow.

By default, the shadow is placed outside the element, creating an outer shadow effect. For example,

body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: rgba(192, 192, 192, 1);
  height: 200px;
  width: 400px;
  position: relative; 
  box-shadow: 0px 2px 25px 15px rgba(195, 155, 211, 1);
}

.inner {
  background-color: rgb(150, 230, 230);
  position: absolute;
  top: 90px;
  right: 90px;
  left: 90px;
  bottom: 90px;
  height: 30px;
  text-align: center;
}

However, when you use the inset property, the shadow is applied inside the element, resulting in an inner shadow effect.

body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: rgba(192, 192, 192, 1);
  height: 200px;
  width: 400px;
  position: relative;
  box-shadow: inset 0px 2px 25px 15px rgba(195, 155, 211, 1);
}

.inner {
  background-color: rgb(150, 230, 230);
  position: absolute;
  top: 90px;
  right: 90px;
  left: 90px;
  bottom: 90px;
  height: 30px;
  text-align: center;
}

We can also have multiple inner shadows using this syntax;

.box {
  background-color: rgba(192, 192, 192, 1);
  height: 200px;
  width: 400px;
  position: relative;
  box-shadow: inset 0px 2px 25px 15px rgba(195, 155, 211, 1), inset 0px 2px 25px 15px rgba(231, 76, 60, 1);
}

You can experiment with different combinations of inset box shadows to achieve your desired design outcome.

Creating a Stylish Call to Action (CTA) Button using inset

A call to action button is arguably one of the most important buttons on a webpage, they therefore have to stand out and capture the reader's attention. With the inset property, we can make a CTA button visually appealing to audiences and encourage user engagement. For instance;

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <button>Done</button>
  <div class="box">
    <h2>Hi there</h2>
    <div class="inner">
      <h3>Hi there!!!</h3>   
    </div>
  </div>

  <button>Sign up</button>
</body>
</html>

CSS code

button {
  background-color: rgb(19, 187, 238);
  position: absolute;
  inset: 90px;
  width: 95px;
  height: 50px;
  border-radius: 15px;
  box-shadow: inset 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
  border-color: antiquewhite;
  font-size: 20px;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

In the code snippet, we used position: absolute; to position the button absolutely within its closest positioned ancestor. Since there’s no parent element with position: relative;the positioning will be relative to the entire document based on the inset values for positioning and inset for defining the position and an inner shadow effect.

We also used inset: 90px; to set the position of the button from all four sides (top, right, bottom, left) to 90 px, effectively creating a 90-pixel gap from each side of the document.

The box-shadow property also applies an inner shadow effect to the button using the inset property with the box-shadow property. This would make the button to be styled as;

Browser compatibility

nset was not initially fully supported by most browsers apart from Firefox, However, as of the time of writing it is now accepted in all major browsers as shown in this table;

This table is based on MDN's documentation on inset

Best Practices

1. Provide Fallback Styles to support multiple browsers:

Although inset is widely supported by most browsers, it’s good practice to provide fallback styling using traditional CSS properties. For example, use individual positioning properties like top, right, bottom, and left, or create similar effects using background gradients or SVG filters in place of inset

2. Cross-Browser and Device Testing:
Different browsers interpret CSS properties differently and this can lead to layout or styling issues. Therefore, it's important to test your program on multiple devices and browsers to identify any styling issues related to the inset property. You can do this using responsive design testing tools and browser developer tools

3. Vendor Prefixes for Experimental Support:
You can also use vendor prefixes like -webKit-, -moz-, and -ms- to ensure that your styling works as intended across different browsers. Go through the latest browser support documentation to know if these prefixes are still necessary for your styles.

Conclusion

As you have seen, inset is a versatile property in CSS and can be used to achieve various effects when styling. It can be used with the position property to position elements and can also be used with the box-shadow property, to create inner shadow effects.

With the knowledge gained from this guide, you can now leverage the use of inset to create visually appealing designs that improve the user experience of your web pages.