Bày tỏ IT

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)

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

CSS Clip Kết quả

Demo | Tải về sourcefiles

Bài này có thể là một ví dụ tốt cho các cụm từ "Dạy bà để hút trứng" ... Nguyên nhân này là Stuff CSS chỉ BASIC. Nhưng đối với những, như tôi không biết gì, điều này có thể là một phước lành trong ngụy trang. Tôi luôn luôn nghĩ (tôi có thể rời công việc của tôi để nói rằng điều này), nó chỉ có thể để giữ một số phần của nội dung trang HTML STATIC (ý nghĩa, vị trí của nó vẫn còn AS IS Di chuyển cửa sổ), bằng cách sử dụng một số kịch bản thông minh, Làm tất cả những khoa học tính toán để tìm vị trí năng động, bẫy sự kiện Window.scroll và thiết lập thời gian chờ.

Không bao giờ nghĩ rằng nó có thể đơn giản như sau .... Ở đây dưới đây CSS / HTML, tôi có bốn khối tĩnh, cố định cho mỗi extrimities trang, TOP, RIGHT, BOTTOM và trái ... không cần thiết để nói ... bạn có thể chọn bất kỳ một hoặc nhiều hơn nếu cần có ...

CSS
Tĩnh {display: block; z-index: 10; color: # ffffff; overflow-x: hidden; overflow-y: ẩn; vị trí: ixed;
}
# Nội dung {margin: 100px 150px 0px 160px; border: 1px solid # e6e6e6}

# Wrap-t {top: 0px; background: # 33CC66, chiều rộng: 100%; chiều cao: 55px;}

# Wrap-l {top: 80px; background: # FF9966; chiều cao: 300px; width: 150px; biên giới: 2px solid # e6e6e6;}

# Wrap-b {dưới: 0px; background: # 3333CC; chiều rộng: 100%; chiều cao: 55px;}

# Wrap-r {top: 80px; background: # 6666FF; chiều cao: 300px; width: 140px; biên giới: 2px solid # e6e6e6; quyền: 0;}

HTML
<div id="contents"> nội dung trang chính </ div>
<div id="wrap-b" class="static">
Nội dung tĩnh ở phía dưới trang
</ Div>
<div id="wrap-t" class="static">
Nội dung tĩnh trên Top Page
</ Div>

<div id="wrap-l" class="static">
Nội dung tĩnh trên trang còn lại
</ Div>
<div id="wrap-r" class="static">
Nội dung tĩnh bên phải trang
</ Div>

Xem mẫu wroking ở đây

Khi tôi đọc bài viết này vào Danh mục A Ngoài " Faux Absolute Định vị
Eric Sol ", tôi đã không có gì ít hơn so với ấn tượng. Tôi cũng đã chán nản majorly, gây ra, một cách trung thực tôi đã tự hỏi, tại sao không thể đến với một cái gì đó tuyệt vời như thế này.

Thông thường, khi chúng tôi tạo ra CSS bố trí, chúng tôi sử dụng "VỊ TRÍ" hoặc "nổi", hoặc một sự kết hợp rất xấu của cả hai. Eric Sol và nhóm của ông xác định một kỹ thuật hoàn hảo của một loại mới của kỹ thuật bố trí CSS, mà họ đã christened là "Định vị tuyệt đối Faux" sau khi các kỹ thuật cột giả mô phỏng sự hiện diện của một cột.

Bạn biết rằng vấn đề tất cả chúng ta CSS các nhà phát triển có với bố trí phân hủy (thay đổi nội dung bất ngờ gây ra cột toàn bộ bọc, khi chúng tôi sử dụng bố trí lưu hành) ... Vâng! Có vẻ như lịch sử!!!
Kỹ thuật bố trí này vẫn còn rất trẻ, và để vào thùng rác bởi tất cả những người rất kinh nghiệm CSS ra khỏi đó, trước khi nó trở thành một tiêu chuẩn bỏ bằng văn bản. Tôi đang hạnh phúc để sử dụng nó NOW! ... Và tôi đã vào giữa chuyển đổi trước đó vấn đề nổi của tôi / chưa nhất thiết phải bố trí vào FAP bố trí đã được ... và tôi vui mừng để nói "chúng ta đã sử dụng định vị tuyệt đối Faux cho trang blog này là tốt" ... GO thử nó, NOW!

Kudos Eric!