Как реализуется такой эффект background-a?

Question

[Фёдор]

Здравствуйте! Хотел бы узнать, как реализовать такой эффект или же проще вырезать из макета?

Answer 1

[Андрей]

Answer 2

[bituke]

Это просто готовое изображение. А кнопка 'learn More' просто имеет эффект прозрачности.

Comments

[Фёдор]

Вопрос касательно кругов. То есть, если это готовое изображение, то его просто надо вырезать из макета?!

Я думал, это как-то реализуется силами CSS.

[bituke]

Фёдор, Да, это готовая картинка, эти круги не реализуются через css. Это можно сделать, но так никто не делает:) Намного проще сделать это в том же фотошопе.

[bituke]

Фёдор, Если интересно, то через фш это делается просто: Создаете один круг с прозрачностью в 80%, такой же второй круг, только с большим радиусом и с прозрачностью в 60%, и по алгоритму

Answer 3

[Иван]

Не совсем понимаю, а в чем проблема?

Comments

[Фёдор]

Вопрос в понимании того, это делается путём объединения слоёв и последующем вырезанием из макета, либо такое можно сделать силами CSS.

[Иван]

Фёдор, а какие там слои с какими картинками?
можно просто слои объединить и вставить бэком, а если там подразумевается какое-то перемещение или что-то подобное, то лучше разбить

[Иван]

а вообще если это простой лендос, то пили объединение и вставляй бэком, норм будет. просто иногда на адаптиве картинки меняются для бэка, в таких случаях надо нарезку иметь.

[Фёдор]

Иван, телефон (2 слоя) и далее идут круги. Думаю, пока нет ни каких действий. Поэтому буду вырезать.

Answer 4

[Андрей Суровцев]

если радиалы должны пульсировать, то скорее всего это jquery с bounce эффектом, вообще реализовать такое можно разными способами.

Но если речь идёт о статическом элементе, то скорее всего это просто фоновая картинка.

Comments

[Фёдор]

Можно пару примеров на будущее?