2009 17 Tháng 2, 2009

Understandng Các tài sản Clip CSS

Tại sao tôi muốn hiểu được điều này? ... Humm!!

Hầu hết các nhà văn CSS sẽ đồng ý rằng CSS Clip tài sản có lẽ là một trong những tài sản chưa được sử dụng hầu hết CSS. Đó là thực sự cho tôi và hạnh phúc nhất để bỏ qua nó, cho đến khi tôi bắt đầu sửa đổi Knob trượt các phần MooTools HAI (Pin) (với Dải Chỉ số) .

Có một gợi ý tốt từ một trong những người sử dụng thành phần để sửa đổi phần trượt bằng cách sử dụng cắt bớt hình ảnh backgroud (chống lại một bộ phận biến chiều rộng) để chỉ ra phạm vi thanh trượt. Như vậy đến thời gian của tôi để vui vẻ, nhưng un-điều lệ (đối với tôi ofcourse) vùng biển của tài sản Clip CSS.

Vâng! nó có thể được khó khăn như thế nào? Không có nhiều ở tất cả các ... YES và NO. Cú pháp để sử dụng tài sản Clip CSS là khá ngay thẳng, nhưng ý nghĩa / usuage là một chút croocked. Với một bộ nhớ của tôi như thế, mọi lúc tôi ngồi để làm lại trên Script trượt của tôi ... Tôi có tokeep đề cập trở lại để sử dụng tài sản CLIP này, để nhắc nhở bản thân mình logic mà tôi đã tạo ra trong kịch bản của tôi .... Do đó! cho bút xuống, với một hy vọng để ghi nhớ nó trong tương lai (và cũng vì lợi ích của những người có vẻ boggled Sở hữu Clip CSS)

CSS Clip làm gì?

Clip là một phần của mô-đun hiệu ứng hình ảnh của CSS 2.1. Đơn giản chỉ cần đặt, công việc của nó là để đặt một cửa sổ có thể nhìn thấy trên đầu trang của một đối tượng đang bị cắt bớt, do đó cắt hình ảnh và tạo hình thu nhỏ mà không cần phải tạo ra các tập tin bổ sung (tôi đã đặt tính năng này để sử dụng tốt hơn trong phần trượt :) )

Sử dụng tài sản Clip CSS, bạn có thể tạo ra một clipping bằng cách sử dụng hình dạng rect. Giống như nhiều thuộc tính CSS khác (như lợi nhuận đệm, ...), sử dụng rect yêu cầu bốn tọa độ Top, Right, Bottom, Left (TRBL). Bản chất croocked của tài sản này phản ánh khi bạn xem xét kỹ hơn ở đoạn tính toán khu vực cắt, bằng cách sử dụng các tọa độ (gửi não vào một quăng trong một thời gian). Bây giờ để gây nhầm lẫn bạn phía dưới bắt đầu từ phía trên, và phải bắt đầu từ bên trái. :) . Bạn thấy những gì tôi nói? .... Do đó này bài ...

Sự nhầm lẫn chút này có thể dễ dàng biến mất, với điều này giải thích hình ảnh của tài sản Clip / rect CSS như dưới đây!!!

CSS Clip Yêu cầu

Nhiệm vụ chúng tôi đã bắt đầu là clip hình ảnh Hình thu nhỏ sau đây thành một hình ảnh squarer tìm kiếm (và cũng là một hình ảnh góc rộng)

original_image clip_demo
Thumbnal / Hình ảnh ban đầu Clip Yêu cầu đối với sqaure Thumbmail

CSS Clip Kết quả

clip_results

Demo | Tải về sourcefiles


NDK nhà | Bày tỏ IT | Diễn đạt Palate | Diễn đạt Penmenship | Bày tỏ nỗi sợ hãi | Diễn đạt Myself