Jump to content
  • 0

Как сделать прозрачную маску?


Dokea
 Share

Question

Привет! Не первый раз сталкиваюсь с довольно серьезной проблемой... как сделать прозрачную маску. Что я под этим понимаю: Это маска любой формы которая скрывает часть содержимого выбранного <div>. Например в форме круга. Да можно сделать маску в цвет фона. Но если фон неоднородный из этого ничего не выйдет. Да и для JS анимации такие маски нужны сплошь и рядом.

Гуру верстки, подскажите решение. =) Интересует конкретно: как сделать произвольную (нами обозначенную и любой формы) часть DIV прозрачной.

Edited by Dokea
Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Маску можно сделать только квадратной формы. Да и то не для всех элементов. Читайте про clip.

Так как в о флеше или фотошопе сделать нельзя, они дурно на вас (или на вашего дизайнера) влияют <_<

В web надо быть проще и люди к тебе потянутся.

P.S. По крайней мере webkit-браузеры поддерживают маски (ссылка).

Link to comment
Share on other sites

  • 0
Маску можно сделать только квадратной формы. Да и то не для всех элементов. Читайте про clip.

Так как в о флеше или фотошопе сделать нельзя, они дурно на вас (или на вашего дизайнера) влияют <_<

В web надо быть проще и люди к тебе потянутся.

P.S. По крайней мере webkit-браузеры поддерживают маски (ссылка).

По поводу clip мне известно.

Кроме того, что оно квадратное, оно ещё и не везде корректно работает.

Да, я имею ввиду маску, как в Photoshop или Flash или в том же inDesign. Именно такой тип маски.

То что нет ОЧЕВИДНОГО решения, я и сам знаю. Иначе бы не спрашивал.

Может кто из опытных товарищей сталкивался с такой задачей. Те же углы у превью при условии сложного фона.

Link to comment
Share on other sites

  • 0
Кроме того, что оно квадратное, оно ещё и не везде корректно работает.

Это неправда - работает во всех современных браузерах и ИЕ6+.

Да, я имею ввиду маску, как в Photoshop или Flash или в том же inDesign. Именно такой тип маски.

Как я уже написал, решение есть только для webkit-браузеров (Safari, Chrome), может быть что решение есть для Firefox 4. Может быть этот эффект и можно эмулировать при помощи SVG/VML...

UPD: http://www.netzgesta.de/edge/

Link to comment
Share on other sites

  • 0
Это неправда - работает во всех современных браузерах и ИЕ6+.

Как я уже написал, решение есть только для webkit-браузеров (Safari, Chrome), может быть что решение есть для Firefox 4. Может быть этот эффект и можно эмулировать при помощи SVG/VML...

Касаемо первого, тут спорить не буду. Так как я сам не работал с данным свойством, но читал о нём в каких-то блогах, то есть инфа у меня не проверенная лично. Тут извиняйте. =)

А вот касаемо второго, категорически не согласен. То что Вы или я ещё не знаем решения, не значит что оно вообще не возможно.

UPD, кажется неплохая ссылка (не встречал ранее такой пример). Большое спасибо, сейчас приступлю к изучению)))

Edited by Dokea
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy