CSS - Clip

Syntax and Usage

The clip property in CSS lets you define a visible part of an element while hiding the rest. Note that the clip property only works on absolutely positioned elements. The basic syntax of the clip property is:

clip: shape | auto | initial | inherit;

The clip property accepts several values that determine the clipping region:

1. shape: Specifies the shape and size of the clipping region. The most common shape used with the clip property is rect(), which defines a rectangular clipping region.

2. auto: This is the default value, meaning no clipping is applied to the element. The entire element is visible.

3. initial: Sets the clip property to its default value, which is auto.

4. inherit: Inherits the clip value from its parent element.

The most commonly used value with the clip property is the rect() function, allowing you to define a rectangular clipping region by specifying coordinates for top, right, bottom, and left edges:

clip: rect(top, right, bottom, left);

Here's what each parameter represents:

• top: Distance from top edge of element to top edge of clipping region.
• right: Distance from left edge of element to right edge of clipping region.
• bottom: Distance from top edge of element to bottom edge of clipping region.
• left: Distance from left edge of element to left edge of clipping region.

You can specify values for these parameters using length units like pixels (px), percentages (%), or auto. The auto value allows corresponding edges to extend as needed for content.

.clipped-element {
  position: absolute;
  clip: rect(20px, 200px, 100px, 50px);
}

• Clipping starts 20 pixels from top,
• 200 pixels from left,
• Ends at 100 pixels down,
• And extends up to 50 pixels inward on both sides.

Any content outside this rectangle will be clipped and not visible.

Using clip and rect(), you can create various shapes and control visibility in your web designs effectively.

Clipping with the rect() Function

The rect() function is a common value used with the clip property in CSS. It lets you define a rectangular clipping region for an element by specifying the coordinates of the top, right, bottom, and left edges.

The rect() function takes four parameters:

rect(top, right, bottom, left)

• top: The distance from the top edge of the element to the top edge of the clipping region.
• right: The distance from the left edge of the element to the right edge of the clipping region.
• bottom: The distance from the top edge of the element to the bottom edge of the clipping region.
• left: The distance from the left edge of an element to its own left clipping region.

You can use length units like pixels (px), percentages (%), or auto for these values. Using auto allows that side to extend as needed.

.clipped-image {
  position: absolute;
  clip: rect(20px, 300px, 200px, 50px);
}

• Clipping starts 20 pixels from above.
• It extends 300 pixels from one side.
• Clipping ends 200 pixels downwards.
• It extends inward by 50 pixels.

Any content outside this rectangle will be clipped and not visible.

You can also create more complex shapes by combining multiple regions.

.complex-clip {
  position: absolute;
  clip: rect(0px, 200px, 150px, 0) rect(50px, 250px, 200px, 150px);
}

• The first area starts at one corner and goes up to another point (200x150).
• The second area starts at (50x150) and goes up to another point (250x200).

By using these functions creatively, you can control what parts are visible on your web page.

Practical Applications

The clip property in CSS has several uses that can improve the visual presentation of your web pages. Here are some ways you can use clipping in your web designs:

.circular-image {
  position: absolute;
  clip: rect(0px, 100px, 100px, 0px);
  border-radius: 50%;
}

.highlighted-area {
  position: absolute;
  clip: rect(100px, 300px, 200px, 200px);
}

.animated-clip {
  position: absolute;
  clip: rect(0, 0, 100px, 0);
  transition: clip .5s ease-in-out;
}

.animated-clip:hover {
  clip: rect(0, 200px, 100px, 0);
}