Страницы

Поиск по вопросам

среда, 13 марта 2019 г.

Как улучшить верстку тестового задания

Оцените пожалуйста! Какие ошибки допущены? Как можно улучшить верстку?
Задание | Реализация
h3, p { margin: 0; } .box { font-family: sans-serif; position: relative; width: 100%; min-height: 35px; } .box_title { position: relative; display: inline-block; max-width: 250px; padding: 5px 15px; min-height: 35px; border: 2px solid #93d81c; border-bottom: none; border-radius: 10px 10px 0 0; background: #c9e39c; } .box_title::before { position: absolute; content: ''; z-index: -10; top: 0; left: 0; display: block; width: 100%; height: 100%; border-radius: 10px 10px 0 0; box-shadow: 0 0 6px 1px rgba(0, 0, 0, .7); } .box_text { position: absolute; z-index: -5; top: 100%; left: 0; width: 100%; box-sizing: border-box; min-height: 150px; margin-top: -2px; padding: 10px 15px 0; border: 2px solid #93d81c; border-radius: 0 0 10px 10px; background: #c9e39c; box-shadow: 0 0 6px 0 rgba(0,0,0, .5); }

Заголовок

Содержание блока



Ответ

Спасибо за пример! Отлично попрактиковался на нем. Твой пример в IE11 не идеально смотрится(под header border/тень виднеется) Почти идеально получилось у меня, можно делать заголовок и параграф в несколько строк и все отлично смотрится! Отрицательного z-index не использую!
body { font-family: sans-serif; } .block { color: #510000; } .block h2 { position: relative; display: inline-block; background-color: #C9E39C; max-width: 250px; padding: 7px 10px 13px; font-size: 17px; border-top-left-radius: 10px; border-top-right-radius: 10px; border: 1px solid #A3D869; margin-bottom: 0; -webkit-box-shadow: 0px 1px 7px -1px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 1px 7px -1px rgba(0, 0, 0, 0.75); box-shadow: 0px 1px 7px -1px rgba(0, 0, 0, 0.75); } .block h2:after { content: ''; display: block; position: absolute; width: 100%; left: 0; bottom: 0; height: 10px; background-color: #C9E39C; color: #C9E39C; z-index: 10; } .block p { position: relative; z-index: 5; top: -3px; display: block; background-color: #C9E39C; margin-top: 0; padding: 10px 11px; font-size: 14px; line-height: 1.5; min-height: 105px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-right-radius: 10px; border: 1px solid #A3D869; -webkit-box-shadow: 0px 1px 7px -1px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 1px 7px -1px rgba(0, 0, 0, 0.75); box-shadow: 0px 1px 7px -1px rgba(0, 0, 0, 0.75); }

Заголовок

Содержание блока


Вот он на codepen

Комментариев нет:

Отправить комментарий