Kurs języka HTML i CSS

Poradnik webmastera

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

Efekty wizualne

Email Drukuj PDF

Tematy: Kadrowanie | Ukrywanie elementów | Sterowanie wymiarowanymi elementami

Druga specyfikacja kaskadowych arkuszy stylów wprowadza kilka ciekawych możliwości związanych z dodawaniem efektów wizualnych na stronie. Dzięki odpowiednim stylom można kadrować elementy, ukrywać je lub sterować tymi elementami, które nie mieszczą się w zadanym obszarze.

Kadrowanie

clip

Dostępne wartości:

rect (top, right, bottom, left) | auto | inherit

Wartość domyślna:

auto

Przykład:

p {clip:rect(10px, 150px, 150px, 10px,)}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Kadrowanie można inaczej nazwać przycinaniem. Przycinać na stronie można np. obrazy. Za przycinanie odpowiada polecenie clip. Poniżej zamieściłem schemat zapisu wraz z wartościami.

clip:rect(top, right, bottom, left);

Pora na konkretny przykład kadrowania obrazka.

W części wartości stylu clip występuje polecenie rect, które jest obowiązkowe, natomiast zawartość nawiasu stanowią słowa określające poszczególne krawędzie. W praktyce należy je zastąpić wartościami liczbowymi.

IMG

{

position:absolute;

left:100px;

top:100px;

clip:rect(0px, 150px, 150px, 0px); 

}

<<przykład>>

<div class="przyklad">

<div style="width:500px;">

<img src="kula.jpg" style="border:solid 1px black;" />

<img src="kula.jpg" style="position:absolute;left:250px;clip:rect(0px, 150px, 150px, 0px);" />

</div>

</div>

<</przykład>>

Oczywiście za pomocą clip można również przycinać inne elementy — przykład takiego działania znajduje się poniżej.

P.przyciety

{

position:absolute;

left:100px;

top:100px;

width:100px;

height:100px;

clip:rect(10px, 80px, 80px, 10px);

}

<<przykład>>

<div class="przyklad">

<p style="position:absolute;left:100px;top:100px;width:100px;height:100px;clip:rect(10px, 80px, 80px, 10px);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu libero quis est tincidunt venenatis. Donec vitae lacinia diam. Proin blandit adipiscing quam a viverra. Vestibulum eu nisl non justo porta suscipit eget eu felis. Integer porta ullamcorper pulvinar. Duis purus urna, porta et rutrum sed, vehicula quis turpis. Aenean euismod nisi nec nisl faucibus semper. Pellentesque sollicitudin felis in eros tristique sed rhoncus lectus sagittis. Suspendisse eget odio justo, et faucibus arcu. Proin tincidunt placerat urna, quis elementum velit porta vitae. Quisque vitae rutrum odio. Vestibulum sed rhoncus libero. Aliquam ultrices, elit at aliquam scelerisque, mi nisi placerat nisi, eget dictum nibh nisi ac sapien. Donec placerat mauris vel dolor malesuada tincidunt eget et justo. Cras purus nibh, egestas eget lobortis cursus, euismod quis libero. Suspendisse vulputate, elit vel consectetur consequat, velit ipsum eleifend elit, a auctor ligula sapien vitae magna. </p>

 

<p style="position:absolute;left:250px;top:100px;width:100px;height:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu libero quis est tincidunt venenatis. Donec vitae lacinia diam. Proin blandit adipiscing quam a viverra. Vestibulum eu nisl non justo porta suscipit eget eu felis. Integer porta ullamcorper pulvinar. Duis purus urna, porta et rutrum sed, vehicula quis turpis. Aenean euismod nisi nec nisl faucibus semper. Pellentesque sollicitudin felis in eros tristique sed rhoncus lectus sagittis. Suspendisse eget odio justo, et faucibus arcu. Proin tincidunt placerat urna, quis elementum velit porta vitae. Quisque vitae rutrum odio. Vestibulum sed rhoncus libero. Aliquam ultrices, elit at aliquam scelerisque, mi nisi placerat nisi, eget dictum nibh nisi ac sapien. Donec placerat mauris vel dolor malesuada tincidunt eget et justo. Cras purus nibh, egestas eget lobortis cursus, euismod quis libero. Suspendisse vulputate, elit vel consectetur consequat, velit ipsum eleifend elit, a auctor ligula sapien vitae magna. </p>

</div>

<</przykład>>

Ukrywanie elementów

visibility

Dostępne wartości:

visible | hidden | collapse | inherit

Wartość domyślna:

visible

Przykład:

p {visibility:hidden;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer (bez collapse), Chrome, Safari

Kolejna funkcja kaskadowych arkuszy stylów pozwala na ukrywanie wybranych elementów np. tekstu. Efekt taki można uzyskać za pomocą stylu visibility, który występuje do pary z następującymi wartościami: visible, hidden oraz collapse. Poniżej zamieściłem przykład zapisu stylu oraz efekt działania.

P.jeden SPAN

{

visibility:visible;

}

P.dwa SPAN

{

visibility:hidden;

}       

P.trzy SPAN

{

visibility:collapse;

}

<<przykład>>

<div class="przyklad">

<h3>Przykład: visibility:visible</h3>

<p>Kurs został opracowany <span style="visibility:visible;">przez Bartosz Danowskiego</span> dla helion.pl - wartość <strong>visible</strong></p>

 

<h3>Przykład: visibility:hidden</h3>

<p>Kurs został opracowany <span style="visibility:hidden;">przez Bartosz Danowskiego</span> dla helion.pl - wartość <strong>hidden</strong></p>

 

<h3>Przykład: visibility:collapse</h3>

<p>Kurs został opracowany <span style="visibility:collapse;">przez Bartosz Danowskiego</span> dla helion.pl - wartość <strong>collapse</strong></p>

</div>

<</przykład>>

Ostatnia z wartości — collapse — nie jest obsługiwana przez przeglądarkę MS Internet Explorer. Natomiast w pozostałych przeglądarkach efekt uzyskany za pomocą tego stylu jest taki sam, jak w przypadku hidden.

Sterowanie wymiarowanymi elementami

overflow

Dostępne wartości:

visible | hidden | scroll | auto | inherit

Wartość domyślna:

visible

Przykład:

p {overflow:scroll;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Za pomocą polecenia overflow oraz atrybutów visible, hidden, scroll i auto można kontrolować sposób prezentacji zwymiarowanych elementów. Mówiąc dokładnie, dzięki stylowi overflow możemy określić zachowanie danego elementu w sytuacji, gdy na przykład nie mieści się on w wyznaczonym obszarze.

P.jeden

{

position:absolute;

top:50px;

width:200px;

height:200px;

overflow:auto;     

}

P.dwa

{

position:absolute;

left:220px;

top:50px;   

width:200px;

height:200px;

overflow:visible;  

}

P.trzy

{

position:absolute;

top:50px;

left:440px;

width:200px;

height:200px;

overflow:hidden;   

}

P.cztery

{

position:absolute;

top:50px;

left:660px; 

width:200px;

height:200px;

overflow:scroll;   

}

<<przykład>>

<div class="przyklad">

 

<span style="color:red;font-weight:bold;width:200px;text-align:center;position:absolute;">overflow:auto</span>

<span style="color:red;font-weight:bold;width:200px;text-align:center;position:absolute;left:220px;">overflow:visible</span>

<span style="color:red;font-weight:bold;width:200px;text-align:center;position:absolute;left:440px;">overflow:hidden</span>

<span style="color:red;font-weight:bold;width:200px;text-align:center;position:absolute;left:660px;">overflow:scroll</span>

<p style="border:solid 1px black;width:200px;height:200px;top:30px;position:absolute;overflow:auto;">Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:auto. Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:auto. Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:auto. Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:auto. Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:auto. </p>

 

<p style="border:solid 1px black;width:200px;height:200px;top:30px;position:absolute;overflow:auto;left:220px;overflow:visible;">Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:visible. Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:visible. Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:visible. Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:visible. Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:visible. </p>

 

<p style="border:solid 1px black;width:200px;height:200px;top:30px;position:absolute;overflow:auto;left:440px;overflow:hidden;">Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:hidden. Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:hidden. Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:hidden. Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:hidden. Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:hidden. </p>

 

<p style="border:solid 1px black;width:200px;height:200px;top:30px;position:absolute;overflow:auto;left:660px;overflow:scroll;">Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:scroll. Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:scroll. Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:scroll. Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:scroll. Przykład bloku tekstu, który docelowo ma być pokazany w obszarze o wymiarach 200x200 pikseli i overflow:scroll. </p>

 

</div>

<</przykład>>

 

 

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

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15276568