Эффект капельного преобразования в CSS

Original author: Chris Coyier
  • Translation
Недавно мы рассказывали про морфинг форм в SVG, когда одна форма преобразуется в другую. А теперь давайте взглянем как формы могут перетекать друг в друга. Этот липкий тянучий амебный эффект многим знаком из видео c каплями ртути на поверхности.

image


Я точно не уверен, кто первый открыл этот способ применения в вебе, но изначально я ориентировался на демо от Lucas Bebber:

CodePen


Затем я увидел демо от Felix Hornoiu (GIF низкого качество для большей производительности в вебе):

image

Идея довольная проста — применить свойство filter для элемента одновремено со значениями blur и contrast.

Blur, что очевидно, производит эффект размытия, в то время как contrast придает очертание пятну в центре. При правильном балансе в итоге получается «достаточно острая» форма.

image
Основная же фишка заключается в том, что когда два заблюреных элемента расположены близко друг к другу, то при контрастировании они начинают выглядеть как единое целое.

image

Важный момент — контрастирование необходимо применять для родительского элемента.

.stage {
  /* обязательно должно быть указано для работы contrast */
  background: white;
  
  /* странным образом помогает при соединении границ, скрывает переполнение */
  padding: 30px;
  
  -webkit-filter: contrast(20);
  filter: contrast(20);
}
.dot {
  border-radius: 50%;
  width: 50px;
  height: 50px;

  /* также необходимо для корректной работы contrast */
  background: black;

  -webkit-filter: blur(15px);
  filter: blur(15px);
}


Финальный результат вы получите после того как анимируете ваши «капли». Вот демо на CodePen, где можно поиграться со значениями.

Поддержка браузерами

Радует, что теперь это работает не только на WebKit/Blink! Firefox 35 полностью поддерживает фильтры без флажков и прочих нюансов. Бета Aurora уже v35 и я проверил, что там работает все отлично.

Таким образом демо работает в Chrome / Safari / Opera / Firefox / iOS / Android. Не плохо. Не поддерживается только IE.

Предсказания по комментариям


Это не для практического применения!!! Успокойтесь.

Лично я просто без ума от данного трюка. Да, аналогичная реализация со множеством элементов прилично нагружает CPU, но с двумя окружностями все работает отлично.

Я уверен, существуют более совершенные способы реализации данной идеи.
Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 25

    0
    Выглядит круто!
      +2
      В почти каждой старой демке из 90х -нулевых был такой эффект, только в 3d )
        0
        Типа вот
          +2
          А вот более современная вариация на тему
            0
            и назывался он metaballs если не ошибаюсь этот эффект
              0
              Если судить по названию видео выше — Вы не ошибаетесь.
          • UFO just landed and posted this here
              +1
              Очень эмоционально и по-разговорному красноречиво… Но пардон, вы о чем?)
              • UFO just landed and posted this here
              0
              В After Effects так же делал: блюрил, а потом levels у alpha channel крутил.

              Таких эффектов на дриббле много дизайнеры мутят.
                +2
                Я уверен, существуют более совершенные способы реализации данной идеи.


                На том же css-tricks есть реализация той же идеи через SVG фильтры: css-tricks.com/gooey-effect/
                Этот вариант значительно лучше, так как он не ограничен только черным и белым цветами, его можно использовать на любом фоне и все вокруг не блюрится в отличие от решения, что представлено в статье.

                  0
                  Первая демка впечатлила.
                  • UFO just landed and posted this here
                    • UFO just landed and posted this here
                      +1
                      Тут подобный эффект реализован:
                      www.somethinghitme.com/2012/06/06/2d-metaballs-with-canvas/
                        0
                        Точняк, это называется Metaballs
                        • UFO just landed and posted this here
                          +1
                          Главное — не перебарщивать, а то иной «веб-дизайнер» на такое насмотрится, встроит на страницу, а с мобильника потом фиг походишь по ссылкам, когда все варианты меню у него на hover появляются :)

                          В общем, content first, красоты все же уже потом. А эффект крут особенно тем, что неожиданен от CSS.
                            0
                            За отсутствие нормальной мобильно-планшетной версии, к сожалению, чаще всего надо пинать заказчика сайта — дизайнер играет так, как умеют менеджеры, а заказчик всегда прав. И это меня удручает в попытках использовать некоторые поделия сайты с не-десктопных устройств.
                              0
                              Видел обратное: дизайнер, «вдохновившись» чужим сайтом, говорит «я знаю, как сделать красиво», после верстка делается уже по новомодному, заказчик счастлив (но на планшете не удосужился все протестировать). На выходе имеем вроде как всех по цепочке разработки довольных и счастливых, и никто порой даже не вспоминает, что бывают в мире тач-устройства.

                              Заказчик не каждый день сайты заказывает, он как раз не имеет опыта приемки и даже вменяемых техтребований. ТЗ должны бы внятно написать (и все предусмотреть) менеджеры проекта, но им как раз чем проще, тем лучше. Верстальщики, программисты, дизайнеры — им вообще удобство фиолетово (возьмем Gmail как пример — «квадратно-гнездовой» дизайн и «эстетика программистского мозга» в ярком виде).

                              Получаем, что заказчик по уму должен к себе на должность (чтобы играл на его стороне) нанять менеджера создания сайта, дать ему кучу власти (чтобы его никто не мог послать), а тот уже, со всем своим опытом, толкал бы проект в выгодном для компании и посетителей направлении. Одно плохо — менеджеру этому, кроме как совесть, ничто не мешает делать не отлично, а как быстрее завершить проект…

                              Старая сказочка про белого бычка :)
                            +2
                            Если выделить получается вот такой забавный эффект:

                            В движении выглядит довольно интересно.
                              0
                              Можно еще некоторым элементам назначить background-color, тоже интересно получается.
                              0
                              Проще метод чем блюрить и контрастить:
                              www.angelcode.com/dev/metaballs/metaballs.html
                                0
                                Да ладно, пацаны, не изобретайте велосипед =)
                                paperjs.org/examples/meta-balls/
                                  0
                                  Случайно заминусовал.

                                Only users with full accounts can post comments. Log in, please.