CSS crossbrowser div mask

Как думаете, как можно сделать вот так, как на картинке ниже (хоть и без градиента, черт с ним), только чтоб кроссбраузерно было (IE6 не в счет):

Linux Nix Web Development - http://linuxoids.org/ image

Tagged with →  

29 Responses to CSS crossbrowser div mask

  1. NeDaTa:

    Нашел только вот такой вариант:

    behavior: url(border-radius.htc); -moz-border-radius: 196px; /* Firefox */ -webkit-border-radius: 196px; /* Safari and Chrome */ -khtml-border-radius: 196px; /* Linux browsers */
    border-radius: 196px;

    Но он не очень подходит, так как картинки не всегда буду квадратными (в конечном итоге маску надо наложить именно на img).

  2. NeDaTa:

    196px заменить на 50%, естественно.
    ну и луч поноса парсеру.

  3. D05Good:

    Положить сверху на картинку прозрачный пнг с нужной маской и w,h:100%?

  4. Nigblack:

    Дык Css3PIE пощупай, IE его хавает прекрасно.

  5. NeDaTa:

    метод с css3PIE описан в первом комменте — я говорю, фотки не всегда квадратные. В основном они прямоугольные. А мне нужен именно круг, а не скругление углов.

  6. NeDaTa:

    маска работает же только для вебкит браузеров, нет?

  7. Kkebad:

    нет, во всех приличных, плюс в неприличных, если проделать кое-какие телодвижения

  8. NeDaTa:

    а можно пример, или хотя бы подсказку какую-нибудь?

  9. Kkebad:

    не очень понятно, какой ты результат хочешь в случае с прямоугольными картинками, скажу про случай на картинке из поста. рисуешь нужного размера квадрат в фотошопе, заливаешь белым цветом, любым удобным способом (Marquee + Feather например) вырезаешь пиксели по центру, сохраняешь как PNG-24 с галкой Transparency. потом эту картинку фоном в блок поверх фотографии, спозиционировать, наверно, знаешь как, z-index, position:relative, position:absolute. как угодно.

  10. NeDaTa:

    не катит, фон-то не всегда будет белый. Я бы и пост не стал создавать, если бы все было так просто.

  11. CebRain:

    на сколько я понимаю из прямоуголных картинок получится максимум овал, а не круг

  12. SpoSm:

    VML для колек вполне можно использовать, тот же PIE его и вкручивает в дом. Кстати насколько помню он отлично справлялся с резиной и скруглёнными углами.
    Так же вариант где нет css3 сделать это в svg 🙂 Ваще везде работать будет 🙂

  13. NeDaTa:

    вот с svg можно поподробнее? Или где почитать? Я на svg сделал вот такую штуку, и в ие она не отображается.

  14. SpoSm:

    А для IE как уже сказано выше есть VML. Который потом стал частично основой svg в новых браузерах.
    http://www.w3.org/TR/NOTE-VML почитать вот тут наверное, но честно если жалко времени то либо используй PIE, либо обрезай на сервере, либо вообще не делай их круглыми для старых осликов им и так уже плохо, дай им спокойно умереть.

  15. Kkebad:

    предупреждать надо.

  16. Xuagreen:

    SVG + VML (через конвертер) и твоя проблема решена.

  17. NeDaTa:

    изъебством попахивает, но сейчас попробую.

  18. D05Good:

    Canvas? (рафаэль, например)

  19. 01pSpb:

    лол, рафаель — не канвас

  20. Xuagreen:

    да какое там изьебство? SVG для того и думато изначально, чтобы такие фишки мутить. Это потом часть функционала переехала в CSS3 в виде изьебства, потому как макаки SVG не осилили.

  21. NeDaTa:

    то что решение более правильно, тут я согласен. Я просто недоговариваю — тупая привычка такая: дело в том, что для поставленной задачи это слишком большие трудозатраты, с учетом того, что с svg я не знаком. а svg изучу, да, спасибо за совет.

  22. Xuagreen:

    ставишь http://inkscape.org/ рисуешь кружочек, открываешь в ноутпаде, чутка правишь под свои нужды. Задача выполнена (:

  23. D05Good:

    «или Rapha?l, например», извините, был взволнован 🙂

  24. 01pSpb:

    а тебя не смущает ситуация, когда на странице будет пару десятков таких свгшек и браузер внезапно станет раком?

  25. D05Good:

    под маской я имею в виду белый пнг с прозрачной серединой

  26. Xuagreen:

    браузер скорее станет раком от CSS3.

  27. Ylfer:

    градиент можно через box-shadow:inset 0 0 30px #fff

  28. 01pSpb:

    но скорее всего, он не станет раком от грамотной маски на канвасе, я вот к чему

  29. Xuagreen:

    от канваса он умрёт в стопицот раз быстрее, например.

Добавить комментарий