GoldenLine
Zaloguj się

konto usunięte

Temat: Mask Image w innych przeglądarkach

Witam!

Pilnie poszukuję rozwiązania, w obojętniej jakiej technologii, aby osiągnąć efekt podobny do:

-webkit-mask-box-image: url(adres obrazka);

Sposób ten jedynie działa w przeglądarkach Chrome i Safari, a zależy mi by działało na wszystkich popularnych.

Potrzebuje tego by przyciąć wyświetlany obrazek w określony kształt.

Z góry dziękuję za odpowiedzi.Rafał Osiński edytował(a) ten post dnia 20.04.12 o godzinie 22:43
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Mask Image w innych przeglądarkach

Jeśli tło dookoła Twojego obrazka jest jednolite lub stałe, to możesz wrzucić wewnątrz div'a który ma ustawione position: relative swój obrazek i przykryć go maską (grafiką png z przeźroczystością) którą wypozycjonujesz absolutnie nad obrazkiem. Coś w tym stylu: http://jsfiddle.net/BNQL7/

Plusy:
* Działa wszędzie

Minusy:
* Nie zadziała gdy tło pod obrazkiem nie jest jednolite lub stałe,
* Problemy w przypadku maska będzie nakładana na obrazy o różnej wielkości (do obejścia poprzez użycie większej grafiki i ustawienie overflow: hidden dla kontenera z obrazkiem)
* Jeśli ktoś będzie chciał zapisać na dysku obrazek poprzez kliknięcie prawym i "Zapisz jako" to zapisze maskę bez obrazka ;)Marcin Gościcki edytował(a) ten post dnia 19.04.12 o godzinie 17:04
Link do wypowiedziLink

konto usunięte

Temat: Mask Image w innych przeglądarkach

Myślałem też o takim rozwiązaniu, ale właśnie problemem jest, że tło za obrazkiem nie jest niejednolite, choć stałe. Sposób, który podałem w pierwszym poście ucina obrazki o różnej wielkości w dokładny kształt jaki został określony.
Link do wypowiedziLink

konto usunięte

Temat: Mask Image w innych przeglądarkach

javascript canvas? ale skoro pytasz to domyslam sie ze nie wiesz jak to napisac, a chwilke to zajmie ;) ... jako gotowe rozwiazanie, mozesz uzyc edge.js. Dziala pysznie we wszystkich przegladarkach, nawet IE7.

Aczkolwiek jesli bawisz sie w animacje tego obiektu przy uzyciu jQuery, to nie polecam.

http://www.netzgesta.de/edge/
Link do wypowiedziLink

konto usunięte

Temat: Mask Image w innych przeglądarkach

Z użyciem canvas znalazłem jeden sposób, ale niestety nie działał pod IE.

Narzędzie edge.js na pierwszy rzut oka wygląda fajnie, lecz podstawowa licencja nie przewiduje wykorzystania komercyjnego.
Link do wypowiedziLink

konto usunięte

Temat: Mask Image w innych przeglądarkach

Rafał Osiński:
Z użyciem canvas znalazłem jeden sposób, ale niestety nie działał pod IE.

Narzędzie edge.js na pierwszy rzut oka wygląda fajnie, lecz podstawowa licencja nie przewiduje wykorzystania komercyjnego.

Rozwiazanie warte wydania pieniedzy... ;)
Albo musisz zmienic pomysl na strone... cos za cos...
Link do wypowiedziLink
Marcin Skiba

Marcin Skiba Budowanie stron
internetowych

Temat: Mask Image w innych przeglądarkach

Jak obojętnie jakie rozwiązanie to może po stronie serwera skorzystać z phpthumb ?
http://phpthumb.sourceforge.net/demo/demo/phpThumb.dem...
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj