Wydzielenie konkretnej części z obrazu i nadanie bordera + manipulacja obiektem

Question

Witam,

Mam taki problem, że chciałbym z obrazu wyciąć konkretną postać i ostylować ją. Ta "postać" znajdowałaby się nadal w tym samym miejscu obrazu na stronie, ale chciałbym nadać jej border, hover, który ją powiększy i zmieni kolor tła i akcje on-click.

W Gimpie wyciąłem tę postać, zrobiłem transparent background, zapisałem jako .png (.gif też) po czym starałem się wstawić ją do HTMLa i nadać border. Niestety, border obrysowuje mi pierwotne ramy oryginalnego zdjęcia a nie wycięty content. Próbowałem już na kilka sposobów i dowiedziałem się, że właściwość border w taki sposób nie zadziała. W takim razie, jak mogę uzyskać taki efekt i manipulować takim wyciętym obiektem?

Answer 1

Mógłbyś użyć czegoś w stylu: 

 -webkit-filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);
    filter:drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black);

Dla twojego obrazu w PNG. Jednakże kompatybilność tego rozwiązanie nie jest 100% z przeglądarkami http://caniuse.com/#feat=css-filters 

Comments

To dobry pomysł, żeby dodać border. Działa.

Ale nadal nie potrafię znaleźć rozwiązania dzięki któremu, gdy najadę myszką TYLKO na wycięty kształt (bo linia cięcia postaci nie jest boxem), to zmieniają się właściwości. CSS traktuje wyciętą postać z transparentnym tłem zawsze jako czworokąt, którego granica znajduje się tam, gdzie są najbardziej wysunięte "części" postaci.