Ivo Bogucki

Ivo Bogucki Grafik, Koder
HTML/CSS/JS /
tanieprojektowanie.c
om / avan...

Temat: Maska za pomocą HTML (?)

Witam.

Mam dość nietypowe pytanie...

Czy jest możliwość utworzenia maski dla elementu IMG (jpg) za pomocą kodu html, ewentualnie jQuery? Może jakoś się da za pomocą <map>, ale chyba nie bardzo bo to tworzy tylko 'outline', a nie maskuje?

Chodzi o to, że obraz PNG będzie służył mi jako kolejna pod-maska. Chcę 'okroić' zdjęcie IMG(jpg) do określonych kształtów i umieścić w obrębie pliku PNG, a boks o tle PNG będzie animowane na tle.

Proszę o pomoc.

konto usunięte

Temat: Maska za pomocą HTML (?)

Niestety zrozumiałem tak trochę piąte przez dziesiąte, co masz na myśli :)

Co masz na myśli mówiąc: "a boks o tle PNG będzie animowane na tle"?

konto usunięte

Temat: Maska za pomocą HTML (?)

też nie zrozumiałem mimo czytania na głos
Ivo Bogucki

Ivo Bogucki Grafik, Koder
HTML/CSS/JS /
tanieprojektowanie.c
om / avan...

Temat: Maska za pomocą HTML (?)


Obrazek
Ivo Bogucki edytował(a) ten post dnia 22.01.11 o godzinie 22:18

konto usunięte

Temat: Maska za pomocą HTML (?)

ale chcesz z tego zrobić button? bo tak wynika z określenia "href"

konto usunięte

Temat: Maska za pomocą HTML (?)

Nic takiego wczesniej nie widzialem, ale jak dokladniej opiszesz problem to moze znajdziemy inne rozwiazanie.
Ivo Bogucki

Ivo Bogucki Grafik, Koder
HTML/CSS/JS /
tanieprojektowanie.c
om / avan...

Temat: Maska za pomocą HTML (?)

Ach, no tak, nie napisałem, że chciałem żeby to był link-przepraszam. Tak, chodzi o takie coś jak sie robi za pomocą area map poly. Z tym dodatkiem, że to co jest po za mapą linka zostało ukryte i było nieaktywne.
Kamil Szalewski

Kamil Szalewski myślę, projektuję i
staram się tworzyć

Temat: Maska za pomocą HTML (?)

Zrób sobie trzy warstwy, w najwyższej link (warstwa z divem i np. mapą albo wieloma mniejszymi divami dopasowanymi, żeby było jak najdokładniej), poniżej filiżanka ze zdjęciem, na samym dole sama filiżanka wyczyszczona.

I po najechaniu na ktorys kwadracik z ostatniej warstwy wyłączaj warstwę środkową, np. z użyciem jQuery:
$("#Map div").mouseover(function() {
$("#link").css("display", "none");
});


I wsio.

A no i zamiast tych malutkich divów mogą byc a - które będą linkami od razu ;-) Chociaż lepiej też to można jsowo zrobić klikalne.

Pozdro,
KamilKamil Szalewski edytował(a) ten post dnia 22.01.11 o godzinie 22:56

konto usunięte

Temat: Maska za pomocą HTML (?)

Jesli chodzi o probe robienia prawdziwego maskowania - nie pseudo rozwiazan z milionem warstw i kombinacji, ktore ciazko nazwac "maska" to troche spedzilem nad tym czasu... i ostatecznie sie poddalem.

1. Najlatwiejsza opcja jest po prostu obrazek i na nim div, ktory ma np zaaokraglone rogi czy jakis tam wzorek w kolorze tla - cos takiego juz Ci tutaj zaproponowali. Problem zaczyna sie pojawiac kiedy tlo jest losowe, polprzezroczyste i zalezne od czegos innego itd itp.

2. Mozesz poszukac czegos takiego jak edge.js. Dzieki temu mozesz stosowac maski - prawdziwe maski! takie jak sobie wyobrazasz w fotoszopie czy flashu. Problem polega na tym ze IE potrafi nalozyc taka maske tylko w postaci pligu .gif - wiec nie masz antialliasingu, krawedzie sa ostre i pixelowate.
W przypadku reszty przegladarek mozesz zastosowac .png z polprzezroczystociami i wszystkim co tam Ci trzeba - dziala pysznie.
Problem? Dosc czesto IE sie wysypuje, zawiesza na dluzej i cholera wie co jeszcze jak masz do nalozenia wiecej masek na obrazki.
Dziala ale topornie i w moim przypadku nie moglem nazwac tego "rozwiazanien".

3. Sa takze ciutke inne rozwiazania, ktore np. pozwalaja na zaaokraglanie rogow, ale tylko to. Uwazam to rozwiazanie za pomylke, bo ostatnie w DOM z jednego diva, powstaje ci milion innych, ktore maja w srodku poprzesuwane tlo, pixel po pixelku i w efekcie powstaje DOMowa Masakra :) Nic tak pieknie nie morduje IE jak dodanie w locie do 20 divow z obrazkami, nastepnych 50 ;)

W moim przypadku chodzilo oto, zeby zrobic zaokraglone rogi i troche przekadrowac obrazki, ktore zostaly wygrywane przez ludzi zajmujacych sie contentem i nie majacych pojecia o PSie. Wgrywali kwadratowe obrazki a ja musialem na to zaaplikowac hlighlighty, cienie i najgorsze - zaaokraglone rogi z cieniem i borderem.
Ostatecznie - poddalem sie, zmarnowalem dobrze ponad tydzien pracy nad tym ale nigdy nie udalo mi sie osiagnac zadowalajacych rezulatatow.

Generalnie sprawa maskowania jest przerabana, a glownie z powodu IE.
Aczkolwiek - jesli masz gdzies IE, polecam skorzystanie z opcji numer 2.

ps. kolega sie dobrze wyrazil i tekst jest zrozumialy jesli sie wie "co to jest maska na obrazku" ;)Andrzej Winnicki edytował(a) ten post dnia 22.01.11 o godzinie 23:52

konto usunięte

Temat: Maska za pomocą HTML (?)

zawsze można się pokusić o flasha w <div></div> do takiego czegoś, a dla ludzi bezflashowych pod spodem przycisk...
Ivo Bogucki

Ivo Bogucki Grafik, Koder
HTML/CSS/JS /
tanieprojektowanie.c
om / avan...

Temat: Maska za pomocą HTML (?)

Andrzej Winnicki:
(...)

Dziękuje gorąco Andrzeju! Konkretna odpowiedź.

Dokładnie tak chodzi o maskę ala PS, bo pod 'tą' maską będzie jeszcze grafika PNG z przeźroczystością w innym kształcie, a całość na tle, gdzie BODY ma obrazek w tle. Kolejno całość animowana via jQuery. Oczywiście sprawdzę plik edge.js z rozwiązania nr2.

Odezwę się jeszcze jak mi poszło.

Odnośnie zaokrąglania rogów, czasem używam JS do wykonania ładnych zaokrągleń, tyle że w niektórych browserach to nie wychodzi jak powinno... Generalnie wydaje mi się, iż najlepszym rozwiązaniem jest umieszczenie elementów w DOM za pomocą jQ tworząc do tego odpowiednie grafiki i odpowiednio stalowane CSS. Dla tła jednolitego, można by 4 grafiki w każdy róg, a dla tła zróżnicowanego 2 poziome + przeźroczystość (gora i doł). Lepsze to niż dodatkowy kilometrowy JS do generowania rogów.

Wstyd się przyznać, ale nie wiem jak wygląda wywołanie CSS3 za pomocą jQ. To zaokrąglanie nie powinno stanowić większych problemów...

EDIT:

Sprawdziłem edge.js. COŚ PIĘKNEGO! Czuję się zobowiązany Andrzeju :)Ivo Bogucki edytował(a) ten post dnia 23.01.11 o godzinie 12:31

konto usunięte

Temat: Maska za pomocą HTML (?)

Ivo Bogucki:

Uwierz mi ze same zaokraglone rogi to nie problem.
Zabawa sie zaczyna jak ma byc jeszcze cien, border, maska i cholera wie co jeszcze :)
Zawsze IE jest problemem, wszedzie ;)
Ivo Bogucki

Ivo Bogucki Grafik, Koder
HTML/CSS/JS /
tanieprojektowanie.c
om / avan...

Temat: Maska za pomocą HTML (?)

Andrzej Winnicki:
Ivo Bogucki:

Uwierz mi ze same zaokraglone rogi to nie problem.
Zabawa sie zaczyna jak ma byc jeszcze cien, border, maska i cholera wie co jeszcze :)
Zawsze IE jest problemem, wszedzie ;)
Ano tak, zgadzam sie całkowicie.

Następna dyskusja:

Poszukiwany koder (X)HTML, ...




Wyślij zaproszenie do