Clip

clip, elementin məzmunun müəyyən bir hissəsinin göstərilməsi üçündür.
 
Quruluşu: clip: rect(<üst>,<sağ>,<alt>,<sol>)
Aldığı dəyərlər: rect(top, right, bottom, left) | auto | initial | inherit
Başlanğıc dəyəri: auto
Tətbiq oluna bilən elementlər: Blok elementlər
İrsilik: Yoxdur

Əgər dəyəri clip: rect(Y1, X1, Y2, X2) olaraq qəbul etsək, onda aşağıdakı şəkildən göründüyü kimi hər hansı bir şəklin və ya mətnin istənilən hissəsini görünən etməyimiz mümkündür. Yəni bir növ o hissəni bizə "kəsib" göstərir.
 

Clip

 
Aldığı dəyərləri bir-bir nəzərdən keçirək:
rect(top, right, bottom, left) - Yuxarıda qeyd etdiyimiz kimi, koordinatlara görə məzmunu göstərir.
auto - Heç bir kəsmə olmayacağını bildirir.
initial - Default (varsayılan) dəyəri qəbul edir.
inherit - Valideyn (üst element) elementin dəyərini alır.
 
Qeyd: "overflow:visible" vəziyyətində clip xüsusiyyəti işləməyəcəkdir.
 
İndi isə bir neçə nümunəyə nəzər yetirək:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>clip</title>
</head>
<body>
<style>
img {
    position: absolute;
    clip: rect(67px,368px,255px,61px);
}
</style>
<img src="http://xpert.az/uploads/posts/2015-01/1421661318_porsche-cajun.jpg" width="460" height="300">
</body>
</html>
 
Brauzerdə nəticə belə görünəcəkdir:
 

clip

Göründüyü kimi, daxil etdiyimiz koordinatlarla şəklin istədiyimiz hissəsini göstərə bilərik.
Nəticəyə buradan da baxa bilərsiniz.
 
Digər bir nümunə:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>clip</title>
</head>
<body>
<style>
  #layer {
   position: absolute; /* Mütləq yerləşmə */
   clip: rect(40px, auto, auto, 40px); /* Lazım olan hissələri göstəririk */
   width: 200px; /* Blokun eni */
   color: white; /* Mətnin rəngi */
   background: #7f4c3e; /* Fon rəngi */
   border: 1px solid black; /* Çərçivə parametrləri */
   padding: 10px; /* Mətn ətraflı boşluqlar */
  }
</style>
<div id="layer">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
   nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
   Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
   lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
 
Brauzerdə nəticə belə görünəcəkdir:
 

clip

 
Bu dəfə isə yaratdığımız #layer div elementindəki məlumatın müəyyən etdiyimiz hissəsini kəsib göstərmiş olduq.
Nəticəyə buradan da baxa bilərsiniz.
CSS3