Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Wyświetlanie

Kadrowanie

Email Drukuj PDF

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

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V