Wyświetlanie

Kadrowanie

wtorek, 12 styczeń 2010 07:41 Administrator
Drukuj

Tematy: kadrowanie | kursory | sposób wyświetlania elementów | wypływanie zawartości | widzialność elementów

Dane w pigułce
Zastosowanie obcinanie fragmentów elementu
Dziedziczenie nie
Wartości wartości w pikselach, auto
Wartość domyślna auto
Przykład clip:rect(15px 210px 32px 0px)
Uwagi
Odpowiednik w HTML brak

Aby przyciąć element, należy wpisać w definicji stylu clip:rect(wartość).

Polecenie kadrowania pozwala przycinać obraz, kolejno - góry, prawej strony, dołu i lewej strony (pozycje linii tnących liczone zawsze od góry, od lewej). Jest to obecnie możliwe jedynie dla pozycji absolutnej - position:absolute. Wycinkiem może być jedynie prostokąt rect. Na ilustracjach pokazujemy oryginał i obraz wykadrowany. Wartości określają de facto rogi prostokąta: górny-prawy i dolny-lewy.

<img src="../grafika/ami.gif" width="80" height="114" alt="Ami" style="position:absolute; top:px;">
<img src="../grafika/ami.gif" width="80" height="114" alt="Ami" style="position:absolute; top:0px; left:100px; clip:rect(20px 60px 114px 0px);">

Jak widzimy niżej, prawy górny róg ma koordynaty 20px (od góry) i 60px (od lewej), oczywiście w odniesieniu do absolutnej pozycji kadrowanej ilustracji, a lewy dolny róg ma koordynaty 114px (od góry) i 0px (od lewej)

Ami Ami

<img src="../grafika/car1.gif" width="376" height="188" alt="autko" style="position:absolute; top:0px;">
<img src="../grafika/car1.gif" width="376" height="188" alt="autko" style="position:absolute; top:0px; left:380px; clip:rect(0px 160px 100px 0px);">

autko autko

Przycinać można nie tylko grafiki, ale i inne elementy.

<h1 style="position:absolute; clip:rect(15px 210px 32px 0px)">Przycięty tytuł stopnia 1</h1>

Przycięty tytuł stopnia 1

Praktyczna rada: jeśli chcesz przycinać ilustracje, umieszczaj je wewnątrz bloku div pozycjonowanego relatywnie, wówczas pozycjonowanie absolutne kadrowanej ilustracji będzie się odnosić do tego bloku, jako jego rodzica w drzewie dokumentu, i nie dojdzie do niekontrolowanego zaburzenia w wyświetlaniu tego elementu na stronie. Właśnie tę technikę zastosowaliśmy w tej sekcji, ilustrując problem kadrowania. Porównaj uwagi dotyczące pozycjonowania absolutnego elementów.


Interpretacja: Internet Explorer, Firefox, Opera, Chrome