Как можно сделать такой блок?

Question

[a16a]

Всем привет.
Возможно ли? Если да то как можно сделать такой блок?

Answer 1

[Сергей Горячев]

Обычный блок с тенью.
Два задних элемента через псевдоэлементы, с z-index ниже, чем у основного.
https://jsfiddle.net/webirus/j85931f5/2/

Comments

[a16a]

не находили где ни будь коды примера?

[Сергей Горячев]

a16a: Дополнил ответ примером.

[a16a]

Sergey Goryachev: Спасибо большое.

Answer 2

[Андрей Токмаков]

Немного модернизировал ответ Sergey Goryachev :

Похоже? :)

https://jsfiddle.net/j85931f5/5/

Comments

[Сергей Горячев]

Похоже, только я не ставил целью сделать "как в макете".
Да и вообще, этот сайт не для готовый работ %) Для готовых есть фриланс)
А тут достаточно пинка в нужную сторону)
Но молодец, не поленился допилить)))

[Сергей Горячев]

PS: С тенью еще поработай, чтобы прям совсем похоже было)
В макете она мягче и меньше)

[Андрей Токмаков]

Sergey Goryachev: Тень я не трогал, я просто взял ее с примера выше, да и цвета и размеры не подгонял, просто на глаз делал, на скорую руку, так сказать просто для себя :)

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

[Андрей Токмаков]

я еще и авторскому написал вместо ораторского - это вообще сильно было :) только сейчас заметил

[Сергей Горячев]

Андрей Токмаков:

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

Честно, пытаюсь с этим бороться %))))

[Андрей Токмаков]

Sergey Goryachev: Ну порой самому интересно это сделать, не профессионал всё таки, а опыт пригодится. Тем кто профессионалы может быть это не сильно хочется и нудно это для них, так как это их постоянная рутинная работа. Но опять же, если заходят сюда, значит сами хотят помогать. А есть думаю и такие как я, которые делают с интересом

[Сергей Горячев]

Андрей Токмаков: Да мне самому иногда интересно, если задача не типичная, а такого рода конечно простые не хочтся делать, тем более, что подобные вопросы, с решением на псевдоэлементах, тут нередкие гости)

[Андрей Токмаков]

Sergey Goryachev: Ну вот опять, я только сейчас заметил, что Вы автор первого ответа, до этого думал что общаюсь с автором вопроса и не мог понять откуда такие рассуждения у него, теперь все стало на свои места :)
А то думаю спрашивает как сделать, а потом еще и сам же учить пытается :)

[a16a]

Sergey Goryachev: да верно средний блок имеет 90% ширины от первого, и самый крайный 80%
Размер баттона высота 34px. тень кажется жеский а так все хорошо :D