理解CSS Clip屬性及用法

標籤：style   class   code   http   ext   color   

應用Clip屬性實現的一個簡單：

 樣式寫法：

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. } 

屬性解析：

clip : { shape |  auto  | inherit } ;auto 即瀏覽器預設解析，無clip效果，inderit 繼承父層clip樣式 shape 設定clip 形狀，目前只支援 rect 即：矩形。 參數範例為：

1. clip: rect(<top>, <right>, <bottom>, <left>); 

 有點不足的是 clip 屬性只能使用於 位置屬性設定為 absolute 或 fixed的元素

使用Clip實現的範例：

 

1. <style> 
2. img { 
3.   position: absolute; 
4.   left: 10px; 
5.   top: 60px; 
6.   display: block; 
7.   clip: rect(200px, 0, 0, 400px); 
8.   -webkit-transition: all 0.5s ease-out; 
9.   -moz-transition: all 0.5s ease-out; 
10.   transition: all 0.5s ease-out; 
11. } 
12.  
13. span:hover ~ img { 
14.   clip: rect(0, 400px, 200px, 0); 
15. } 
16.  
17. span { 
18.   display: inline-block; 
19.   padding: 10px; 
20.   margin: 10px; 
21.   background: #08C; 
22.   color: white; 
23.   font-family: "Helvetica", "Arial", sans-serif; 
24.   font-weight: bold; 
25.   text-shadow: 0 -1px rgba(0,0,0,0.3); 
26.   text-align: center; 
27.   cursor: pointer; 
28. } 
29.  
30. span:hover { 
31.   background: #09C; 
32. } 
33. </style> 
34. <span>Hover me</span> 
35. <img src="http://lorempixel.com/400/200/"> 

 2

1. <style> 
2. body {   
3.   overflow: hidden; 
4. } 
5.  
6. ul { 
7.   padding: 0; 
8.   margin: 10px; 
9.   list-style: none; 
10.   width: 300px; 
11.   height: 300px; 
12.   box-shadow: 0 0 10px rgba(0,0,0,0.5); 
13. } 
14.  
15. ul:after { 
16.   clear: both; 
17.   content: ""; 
18.   display: table; 
19. } 
20.  
21. li { 
22.   position: relative; 
23.   float: left; 
24.   width: 100px; 
25.   height: 100px; 
26.   background: url(‘ http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/pw_maze_white.png‘); 
27.   cursor: pointer; 
28. } 
29.  
30. li:nth-of-type(3n+1) { 
31.   clear: both; 
32. } 
33.  
34. img { 
35.   position: absolute; 
36.   display: block; 
37.   clip: rect(0, 100px, 100px, 0); 
38.   -webkit-transition: all 0.2s ease-out, z-index 0s; 
39.   -moz-transition: all 0.2s ease-out, z-index 0s; 
40.   transition: all 0.2s ease-out, z-index 0s; 
41.   opacity: 0.9; 
42. } 
43.  
44. li:hover img { 
45.   clip: rect(0, 300px, 300px, 0); 
46.   z-index: 2;  
47.   opacity: 1; 
48. } 
49.  
50. li:nth-of-type(3n+1):hover img { 
51.   left: 310px; 
52. } 
53.  
54. li:nth-of-type(3n+2):hover img { 
55.   left: 210px; 
56. } 
57.  
58. li:nth-of-type(3n):hover img { 
59.   left: 110px; 
60. } 
61.  
62. li:nth-of-type(n+4):nth-of-type(-n+6):hover img { 
63.   top: -100px; 
64. } 
65.  
66. li:nth-of-type(n+7):nth-of-type(-n+9):hover img { 
67.   top: -200px; 
68. }  
69. </style> 
70. <ul> 
71.   <li><img src="http://lorempixel.com/300/300/sports/"></li> 
72.   <li><img src="http://lorempixel.com/300/300/animals/"></li> 
73.   <li><img src="http://lorempixel.com/300/300/abstract/"></li> 
74.   <li><img src="http://lorempixel.com/300/300/nightlife/"></li> 
75.   <li><img src="http://lorempixel.com/300/300/city/"></li> 
76.   <li><img src="http://lorempixel.com/300/300/food/"></li> 
77.   <li><img src="http://lorempixel.com/300/300/people/"></li> 
78.   <li><img src="http://lorempixel.com/300/300/nature/"></li> 
79.   <li><img src="http://lorempixel.com/300/300/fashion/"></li> 
80. </ul> 

關於Clip屬性應用的進階使用範例: http://tympanus.net/codrops/2013/01/17/putting-css-clip-to-work-expanding-overlay-effect/

參考網址: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/