Top community members
All Wiki Articles Create Wiki Article

Many years me and my friends we were volunteers on my university doing programming classes for young people.

I got main conclusion: Young people are awesome, especially students, because they always bring new and fresh ideas :)
* I loved to do it but my time is limited

  I decided to create something that will help millions of students

Now I am here

co-founder

CSS - clip: rect() style property example

0 contributions
10 points

In this article clip: rect() style property is described.

The most important things are:

  • clip: rect()¬†hides unwanted part of element - something like¬†visibility: hidden for part of element,
  • clip property works with position:¬†absolute and¬†position:¬†fixed properties, so it is necessary to use¬†too,
  • after clipping it is necessary set position of clipped element,
  • container element (if is used) should have¬†position: relative,¬†position: sticky,¬†position:¬†absolute¬†or¬†position:¬†fixed¬†properties¬†because of clipped element position property.

Main concept of how clip property cutting has been described below:

clip: rect() style property explanation.
clip: rect() style property explanation.
// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    body {
    	position: relative;
        border: 1px solid black;
        height: 150px;
    }

    .oryginal-image {
    	width:  150px;
      	height: 150px;
    }
    
    .cropped-image {
        position: absolute; /* required property for clip */
        left: 150px;
        width:  150px;
      	height: 150px;
      
        /* edges:  top_edge,  right_edge,  bottom_edge,  left_edge */
        clip: rect(65px,      142px,       142px,        36px);
    }

  </style>
</head>
<body>
  <img class="oryginal-image" 
       src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
  <img class="cropped-image" 
       src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
</body>
</html>

Used resources:

Used image with clip property.
Used image with clip property.
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more