Szukaj na tym blogu

sobota, 22 stycznia 2011

CSS3 - odsłanianie obrazka

W specyfikacji CSS3 jest narzędzie do rozszerzania widocznego na ekranie pojemnika. Niestety, jak się wydaje, działa obecnie tylko w przeglądarce Chrome - próbowałem je zastosować z rozmaitymi prefiksami, ale udało mi się tylko w programie Google’a.

Załóżmy, że tworzę pojemnik DIV, którego tłem jest jakaś ilustracja. Styl użyty w definicji pojemnika miałby przykładową postać:

style="width: 100px; height: 50px; background-image: url('http://www.designingbeautyacademy.com/images/01_beautiful_woman.jpg')"

Mogę teraz zastosować dodatkowy styl wprowadzający rozciąganie pojemnika:

style=”resize:both; overflow: auto;”

(możliwe wartości resize to both, horizontal lub vertical)

W prawym dolnym rogu obrazka pojawia się wówczas znaczek rozszerzania pojemnika - gdy go przeciągniesz w prawo i w dół, pojemnik odsłoni zawartość. Jednak gdy nie ograniczysz szerokości i wysokości pojemnika, obrazek w tle będzie powielany. Możemy jednak zastosować dodatkowy styl ograniczający maksymalną wielkość pojemnika do zadanej wielkości, równej rozmiarom obrazka, np.:

max-width: 310px; max-height: 475px;

Ostatecznie definicja stylu może mieć postać:

style=”width: 100px; height: 50px; resize:both; overflow: auto; max-width: 310px; max-height: 475px; background-image: url('http://www.designingbeautyacademy.com/images/01_beautiful_woman.jpg')"

Utwórzmy teraz tak zdefiniowany pojemnik:

Uchwyć teraz myszką prawy dolny róg (przypominam, tylko w Chrome) i rozciągnij do maksymalnej dopuszczalnej wysokości i szerokości - zobaczysz pewną ładną panią.

Brak komentarzy:

Prześlij komentarz