Understanding CSS Clip Properties and usage

A simple implementation of the clip attribute:

Style notation:

1. . my-element {
2. position: absolute;
3. clip:rect (10px 350px 170px 0); / * IE4 to IE7 * /
4. Clip:rect (10px, 350px, 170px, 0); / * ie8+ & other browsers * /
5. }

Attribute parsing:

clip : { shape |  auto | inherit } ;Auto is the browser default parsing, no clip effect, inderit inherit the parent layer clip style shape 设置clip 形状，目前只支持 rect 即：矩形。 参数样例为：

1. Clip:rect (<Top>, <Right>, <Bottom>, <left>);

A bit of a disadvantage is that the clip property can only be used to set the Position property to absolute or fixed elements

Examples of using clip implementation:

2. <style>
4. IMG {
6. Position:absolute;
8. left:10px;
10. top:60px;
12. Display:block;
14. Clip:rect (200px, 0, 0, 400px);
16. -webkit-transition:all 0.5s ease-out;
18. -moz-transition:all 0.5s ease-out;
20. Transition:all 0.5s ease-out;
22. }
26. Span:hover ~ img {
28. Clip:rect (0, 400px, 200px, 0);
30. }
34. span {
36. Display:inline-block;
38. padding:10px;
40. margin:10px;
42. Background: #08C;
44. Color:white;
46. font-family: "Helvetica", "Arial", Sans-serif;
48. Font-weight:bold;
50. text-shadow:0 -1px Rgba (0,0,0,0.3);
52. Text-align:center;
54. Cursor:pointer;
56. }
60. Span:hover {
62. Background: #09C;
64. }
66. </style>
68. <span>hover me</span>
70. <img src="Http://lorempixel.com/400/200/">

2

2. <style>
4. Body {
6. Overflow:hidden;
8. }
12. UL {
14. padding:0;
16. margin:10px;
18. List-style:none;
20. width:300px;
22. height:300px;
24. box-shadow:0 0 10px Rgba (0,0,0,0.5);
26. }
30. Ul:after {
32. Clear:both;
34. Content: "";
36. display:table;
38. }
42. Li {
44. position:relative;
46. Float:left;
48. width:100px;
50. height:100px;
52. Background:url (' http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/pw_maze_white.png ');
54. Cursor:pointer;
56. }
60. Li:nth-of-type (3n+1) {
62. Clear:both;
64. }
68. IMG {
70. Position:absolute;
72. Display:block;
74. Clip:rect (0, 100px, 100px, 0);
76. -webkit-transition:all 0.2s ease-out, z-index 0s;
78. -moz-transition:all 0.2s ease-out, z-index 0s;
80. Transition:all 0.2s ease-out, z-index 0s;
82. opacity:0.9;
84. }
88. Li:hover img {
90. Clip:rect (0, 300px, 300px, 0);
92. Z-index:2;
94. Opacity:1;
96. }
100. Li:nth-of-type (3n+1): hover img {
102. left:310px;
104. }
108. Li:nth-of-type (3n+2): hover img {
110. left:210px;
112. }
116. Li:nth-of-type (3n): hover img {
118. left:110px;
120. }
124. Li:nth-of-type (n+4): Nth-of-type (-n+6): hover img {
126. Top: -100px;
128. }
132. Li:nth-of-type (n+7): Nth-of-type (-n+9): hover img {
134. Top: -200px;
136. }
138. </style>
140. <ul>
142. <li><img src="http://lorempixel.com/300/300/sports/"></ li>
144. <li><img src="http://lorempixel.com/300/300/animals/"></ Li>
146. <li><img src="http://lorempixel.com/300/300/abstract/"> </li>
148. <li><img src="http://lorempixel.com/300/300/nightlife/"></ li>
150. <li><img src="http://lorempixel.com/300/300/city/"> </li>
152. <li><img src="http://lorempixel.com/300/300/food/"></li >
154. <li><img src="http://lorempixel.com/300/300/people/"> </li>
156. <li><img src="http://lorempixel.com/300/300/nature/"></ Li>
158. <li><img src="http://lorempixel.com/300/300/fashion/"> </li>
160. </ul>

Advanced usage Example for clip attribute application: http://tympanus.net/codrops/2013/01/17/putting-css-clip-to-work-expanding-overlay-effect/

Reference URL: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/