Wyrażając

Dlaczego chcę to zrozumieć?? Humm ...!!

Większość pisarzy CSS zgodzi się, że nieruchomość Klip CSS to chyba jedna z najbardziej nie-używanych właściwości CSS. To było tak prawdziwe dla mnie i był najbardziej szczęśliwy zaniedbywać go, dopóki nie zacząłem modyfikacji mootools DWA pokrętło (Pin) składnika Slider (ze wskaźnikiem odległości) .

Nie było dobra propozycja od jednego z użytkowników składowych do modyfikacji składnika Slider używając przycięte backgroud zdjęcia (przed podziałem zmiennej szerokości), aby wskazać zakres suwaka. Tak więc przyszedł mój czas, aby wejść do zabawy, ale nie-biegłego (dla mnie ofcourse) Wody własności CSS Clip.

Dobrze! jak trudne to może być? Nie bardzo w ogóle ... TAK i NIE. Składnia do dysponowania nieruchomością Klip CSS jest dość prosto, ale sens / usuage jest nieco croocked. Z pamięcią jak moja, za każdym razem siadam do przerobienie na mojego skryptu Slider ... Mam tokeep nawiązując do wykorzystania tej właściwości CLIP, aby przypomnieć sobie logikę, że stworzyłem w moim skrypcie .... Stąd! Uważa się, że pióro go, z nadzieją na jego zapamiętanie, przyszłość (a także dla dobra tych, którzy wydają przekraczały przez właściwość CSS FILMU)

Co Klip CSS zrobić?

Klip jest częścią wizualnego module efektów CSS 2.1. Po prostu, jej zadaniem jest umieszczenie widocznym oknie na górze obiektu, który jest przycięty, stąd obcinania zdjęć i tworzenie miniatur bez konieczności tworzenia dodatkowych plików (mam już umieścić tę funkcję do lepszego wykorzystania w składniku Slider )

Korzystanie z własności CSS Clip można utworzyć wycinek za pomocą kształt prawidłowy. Podobnie jak wiele innych właściwości CSS (jak marży itp padding), z wykorzystaniem rect wymaga cztery współrzędne Góra, Prawo, Dół, Lewo (TRBL). Croocked charakter tego majątku odzwierciedla kiedy przyjrzeć się bliżej, jak klip oblicza region przycinania, używając tych czterech (wysyła mózg do wrzucić na chwilę). Teraz mylić cię dół rozpoczyna się od góry, a prawo zaczyna się od lewej strony. . Widzisz to, co powiedziałem? .... Stąd ten post ...

To małe zamieszanie może łatwo zniknąć, z tego wizualnego wyjaśnienia Klip / rect CSS nieruchomości jak poniżej!!

Wymagania CSS Klips

Zadaniem zaczęliśmy jest klip następujące miniatury do kwadratowy obrazu w przyszłość (i również szerokokątny obraz)

Oryginalny Thumbnal / Grafika	Wymagania Klip do Sqaure Thumbmail

Wyniki CSS Klips

Zobacz demo | DLA Pobierz sourcefiles

Ten post może być dobrym przykładem dla wyrażenie "babcia Nauczanie ssać jaja" ... Bo to tylko podstawowe rzeczy CSS. Ale dla tych, podobnie jak Oblivious mnie, to może być błogosławieństwem w przebraniu. Zawsze myślałem (mógłbym stracić moją pracę za to co mówię), to tylko możliwe, aby utrzymać jakąś część zawartości HTML strony statyczną (sens, jego pozycja pozostaje AS IS na przewiń okno), za pomocą kilku mądrych skrypty, Robienie tych wszystkich naukowych Obliczenia znaleźć dynamiczną pozycję, zatrzymując wydarzenia Window.scroll i ustawienie limitu czasu itp.

Nigdy nie myślał, że to tak proste, jak to .... Tutaj w CSS / HTML poniżej, mam cztery statyczne bloki, jeden przymocowane do każdej extrimities strony, góra, prawo, dołu i od lewej ... trzeba powiedzieć ... możesz wybrać jedno lub więcej jeśli trzeba być ...

CSS
. Static {display: block; z-index: 10; color: # ffffff; overflow-x: hidden; overflow-y: hidden; stanowisko: ixed;
}
Zawartość # {margin: 100px 150px 0px 160px; border: 1px solid # e6e6e6}

# Wrap-t {top: 0px; background: # 33CC66; szerokość: 100%; wysokość: 55 x;}

# Wrap-l {top: 80px; background: # FF9966; height: 300px; width: 150px; border: 2px solid # e6e6e6;}

# Wrap-b {bottom: 0px; background: # 3333CC; szerokość: 100%; wysokość: 55 x;}

# Wrap-r {top: 80px; background: # 6666FF; height: 300px; width: 140px; border: 2px solid # e6e6e6; prawo: 0;}

HTML
id="contents"> <div You strona główna treść </ div>
<div id="wrap-b" class="static">
Statyczny na dole strony
</ Div>
<div id="wrap-t" class="static">
Statyczny na strony Początek
</ Div>

<div id="wrap-l" class="static">
Statyczny na stronie lewej
</ Div>
<div id="wrap-r" class="static">
Statyczny na prawej stronie
</ Div>

Zobacz próbkę wroking tutaj

Kiedy przeczytałem ten artykuł na A List Apart " Faux Absolute Positioning
Eric Sol ", byłem nie mniej niż pod wrażeniem. Byłem też w depresji majorly, bo, szczerze mówiąc zastanawiałem się, dlaczego nie mogę wymyślić coś wspaniałego jak ten.

Zazwyczaj, gdy tworzymy układów CSS, używamy "POSITION" lub "unosi" lub bardzo złe połączenie obu. Eric Sol i jego zespół określić obok doskonałej technice nowego rodzaju techniki CSS układu, których ochrzczono jako "Faux Absolute Positioning" po faux techniki kolumn symulujący obecność kolumnie.

Znasz ten problem nas wszystkich programistów CSS mieć z układami rozpadających się w Nieoczekiwane zmiany treści, które powodują całe kolumny do opasania, kiedy używamy płynęły układów) ... No cóż! Wydaje się historia!!
Ta technika układ jest wciąż bardzo młody i ma do kosza przez tych wszystkich guru CSS tam, zanim stanie się un napisany standard. Jestem zadowolony z niego korzystać TERAZ! ... I jestem już w połowie konwersji moich wcześniej problematycznych / pływająca un-niekoniecznie układów w układzie FAP już ... i cieszę się powiedzieć "my już używają Faux Absolute Positioning na tym blogu serwisu, jak również" ... GO spróbować, TERAZ!

Kudos Eric!