Оцените пожалуйста!
Какие ошибки допущены? Как можно улучшить верстку?
Задание | Реализация
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
Комментариев нет:
Отправить комментарий