Please rate!
What mistakes are made? How can you improve the layout?

Task | Implementation

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); } 
 <div class="box"> <h3 class="box-item box_title">Заголовок</h3> <p class="box-item box_text"> Содержание блока </p> </div>

  • one
    the next item is not fulfilled - the “rubber” block, i.e. stretches across the width of the browser window - soledar10
  • Corrected. How can you improve? - A. Gr
  • 2
    border-top , border-left and border-right carry in one border, and then write border-bottom: 0 . It is pure, that instead of three, there were two lines :) And it is advisable not to assign anything to z-index negative. In some browsers it does not look correct - Yuri
  • one
    indents are very important for you to have good perception and it looks very bad. Heading - left and right, the content of the block at the top and sides - binliz
  • Corrected. But everything breaks down when using positive values ​​of z-index. How to be? - A. Gr

1 answer 1

Thanks for the example! Excellent practice on it. Your example in IE11 does not look perfect (under the border / shadow you can see) I almost got perfect, you can make a heading and paragraph in a few lines and everything looks great! Negative z-index do not use!

 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); } 
 <div class="block"> <h2>Заголовок</h2> <p>Содержание блока</p> </div>

Here it is on the codepen

  • It remains only to add a frame. "Around the block is a dark green frame." - A. Gr
  • one
    Missed this moment. Added, done! - Alexander Kazakov
  • Good decision, and I got into the jungle! - A. Gr