Geek asks and answers

CSS box-shadow, top insert and bottom standard

I have an element pand I want to place the upper frame with shadows and the lower standard. Can this be done using CSS or is it better to use images for this effect?

.mali_oglas_text:before{
    content: "";
    width: 100%; height: 20px;
    top:0; left:0;    
    z-index: -1;
     box-shadow: inset 0 0 5px 0 5px rgba(0, 0, 0, 0.4);
     -moz-box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 0.4);
}
.mali_oglas_text {clear: both; margin: 0 5px; padding: 7px; background: white; position: relative;
-webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow:    0px 3px 10px rgba(0, 0, 0, 0.4);
box-shadow:         0px 3px 10px rgba(0, 0, 0, 0.4);
}
<p class="mali_oglas_text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. 
 </p>
Run code

+4
source share
3 answers

Here is the beginning, just play around with numbers and colors to suit your needs: http://jsfiddle.net/h7ge7/

+4
source

Try it.

.shadow
{
-webkit-box-shadow: inset 0px 8px 4px -4px #0f0, 
-moz-box-shadow: inset    0px 3px 10px #0f0;

-webkit-box-shadow: 0px 3px 10px #2a2a2a;
-moz-box-shadow:    0px 3px 10px #2a2a2a;
}
0
source

You can use this code

body {
            margin: 0px;
            padding: 0px;
        }
        .mali_oglas_text:before{
            content: "";
            width: 100%;
            height: 164px;
            top:0;
            left:0;    
            z-index: 9999;
            box-shadow: 0px 10px rgba(221,221,221);
            position: absolute;
        }
        .mali_oglas_text {
            clear: both;
            margin: 30px;
            padding: 30px;
            font-size: 18px;
            line-height: 26px;
            background: white;
            position: relative;
            -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
        }
        h1 {
            clear: both;
            margin: 30px;
            padding: 30px;
            font-size: 18px;
            line-height: 26px;
            background: white;
            box-shadow: inset 0 10px 5px #dbdbdb, 0 6px 0px #dbdbdb;
        }
<p class="mali_oglas_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis.</p>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mauris, egestas ut luctus sit amet, gravida et libero. Morbi mollis nisi vitae urna rhoncus tristique. Vivamus egestas ornare facilisis.</h1>
Run code

0
source

More articles:


All Articles