Как нарисовать тень для круглого изображения только с одной стороны (снизу)?

Question

[DarkMiike]

Заранее извиняюсь за вопрос, может решение простое, но это мой второй макет, и задача поставила меня в ступор. Есть блок, в котором идут четыре изображения, фото работников. Изображение круглые, сохранял в png, белый фон убрал. И вокруг каждого фото идет тень (или рамка) полукругом, размытая в середине и более толстая снизу. Или может я неправильно понял, и это не тень, а что-то другое имел ввиду дизайнер (кликабельность и т.п.)? Я уже несколько часов пытаюсь что-то придумать, экспериментирую с box-shadow и border, но все равно ничего не получается. Вот фрагмент кода (знаю что костыли, сорри, я всего 3 недели как начал изучать html/css).

Comments

[ArkKing]

для начала убери имя и професию с блока с картинкой или как ты абсолютом будешь их тягать не пойдет. блоку с картинкой пропишы border-radius: 100%; так же бордер в 5 пикселей белый а дальше бокс шадов без свойства inset ибо ето внутреняя тень чтоб тень била светлей можешь прописать в rgba с прозрачностью, картинку на фон блока с радиусом ставишь только так. Что к чему дальше разбирешса. Главное на твоем пути всегда самому искать ответ, без помощи сидеть искать, изучать в просторах интернета, а не просить, ибо ето пустяк потом будет намного куда сложней если так привыкнеш. Ну вот и все, удачи тебе.

Answer 1

[Ankhena]

https://jsfiddle.net/6s1ahzwu/
размеры сами подберите

Comments

[DarkMiike]

Огромное спасибо! Единственный нюанс - в макете похоже тень/граница идет на равномерном расстоянии от изображения, только меняется прозрачность обводки (почти невидима сверху и жирнее снизу). А у меня получается полукруг снизу..

Макет:



У меня:



Код:
.div {
width: 90px;
height: 90px;
border-radius: 50%;
box-shadow: 0 2px 2px 0 rgba(204, 204, 204, 0.6);
}

[Ankhena]

DarkMiike, заберите стили слоя из фотошопа.
Поиграйте в размытость тени и сдвиг, но вообще, это вполне достаточное совпадение.

[DarkMiike]

Ок, понял, еще раз большое вам спасибо за помощь и потраченное на ответ время!)

Answer 2

[Sergey]

Предлагаете потратить время, вашу верстку перепечатать в песочницу с картинки, чтобы вам помочь ответить?

Идите на codepen.io и сделайте приблизительную верстку, добавьте верстку в ответ и тогда можно быстро посмотреть ваши ошибки и предложить где исправить/поправить/добавить...

Вы поймите, тут помогают, а не делают за вас. Если вы предоставили максимально возможную информацию, то вам красиво и понятно подскажут. У опытных своей работы полно, чтобы еще тратить время на то, что должны были сделать вы изначально...

По вопросу в кратце:
Это box-shadow и border-radius