A photo

Guys, tell me how to make such a bulge of sections so to speak? There is news, dating.

And how is the color at the bottom of the block? That is, not the entire unit, but, as it were, the spraying proceeded.

  • there is no bulge, but the background is a picture with color smeared vertically - Igor
  • And where can I find this picture? - mnweb
  • one
    jqueryui.com/themeroller - Igor
  • as for me it is not very beautiful ... Read about the pseudo element hover. I think it is ideal for the menu and all that. - darkwoolf

2 answers 2

This effect is obtained using a vertical gradient. Here is an example:

.line { position: relative; padding: 10px; background: -webkit-linear-gradient(#cfe7fa 0%, #6393c1 100%); background: -moz-linear-gradient(#cfe7fa 0%, #6393c1 100%); background: -o-linear-gradient(#cfe7fa 0%, #6393c1 100%); background: linear-gradient(#cfe7fa 0%, #6393c1 100%); } 
 <div class="line"> 123 </div> <div class="line"> 123 </div> <div class="line"> 123 </div> <div class="line"> 123 </div> 

     .div { height: 200px; position: relative; width: 100%; border: 1px solid black; } .div:after { content: ''; height: 30px; width: 100%; position: absolute; bottom: 0; left: 0; background: -webkit-linear-gradient(#cfe7fa 0%, #6393c1 100%); background: -moz-linear-gradient(#cfe7fa 0%, #6393c1 100%); background: -o-linear-gradient(#cfe7fa 0%, #6393c1 100%); background: linear-gradient(#cfe7fa 0%, #6393c1 100%); } 
     <div class="div"> </div>

    This is if you want the background was not the entire width of the block. If against this background there should still be content, then you can arrange it in a separate block.