Kaskadowe arkusze stylów CSS: kadrowanie









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







Strona główna kursu
Style
Wstęp
Narzędzia
Budowa stylu
Selektory
Kaskadowość i dziedziczenie
Wstawianie stylów
Jednostki miary
Własności czcionek
Własności tekstu
Kolor i tło
Marginesy i odstępy
Obramowania
Wykazy
Tabele
Rozmiary
Pozycjonowanie
Wyświetlanie
Obrys
Własności drukowania
Zawartość generowana
Suwaki







Kadrowanie



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)







<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);">







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 7, Firefox, Opera






_uacct = "UA-593904-1";
urchinTracker();