Краплі!

Дізнайтеся про розвиток на Frontend Masters

css-хитрощі

Нещодавно я був запрошеним редактором випуску Bizarro Devs. Це чудова розсилка новин! Йди підписуйся! Я помістив купу посилань навколо крапель. Як ті дивні мляві випадкові фігури, які зараз такі “в”. Ось ці посилання. Я завжди шанувальник видавничої справи, яку пишу;)

Краплі! Краплі входять! Краплі - хим - трохи химерні. Я цілий день буду грітися за дизайном, подібним до цього щорічного звіту від Метта Памера. Мені подобається спостерігати за дизайнерським напрямком, подібним до цього, який проявляється в дизайнерських інструментах і застосовується у багатьох творчих та хитрих різних способах.

Ми могли б розпочати і намалювати власну крапку за допомогою інструменту «Перо», який є значним запасом у кожному додатку для векторного дизайну. Хоча я шахрай, і, мабуть, закінчив би перевіряти The Noun Project на деякі приклади краплин і викрасти звідти SVG. Але, на жаль, там не так багато, принаймні, що стосується крапель.

Слава Богу за… (зачекайте)… БЛЕБМЕЙКЕР:

Після того, як ми отримаємо крапельку, це просто благає, щоб нас рухали. Моніка Дінкулеску показує, як зробити саме це за допомогою чистого CSS та ліберального використання різних перетворень CSS в анімації ключових кадрів:

Або ми можемо використати бібліотеку JavaScript, як KUTE.js, щоб отримати все morph-y, як Heartbeat зробив тут:

Бібліотека, така як Greensock, може допомогти рухатись та перетворювати краплі навколо. Greensock навіть має плагін, який є, мабуть, найпотужнішим інструментом для перетворення. Ця ручка використовує Greensock, але додає деякі власні SVG-фільтри, щоб краплі задовільно хлюпалися один в одного. Ми могли б назвати це неприємним ефектом:

Наразі ми розглядали лише SVG, але не виключайте! Ліам Іган зробив цю капелю на основі полотна прямо хитро:

Чому б не додати трохи фізики до вечірки, як гравітація, і нехай їм краплі стають млинними таким чином! Хакім Ель Хаттаб зробив це тут:

Дивіться Перо
Blob від Hakim El Hattab (@hakimel)
на CodePen.

І краплі не повинні бути самотніми! Краплі, які мляться, схожі на рідину. Можливо, вам вдасться викинути статтю Піка Куперса про імітацію крапель рідини.