sombras css

Esta es mi solucion a ponerle sombras a una capa dentro de una página web.

Tiene buena presentacion.  y es apto para IE7 y Firefox.

HTML:

Sombras Css

Titulo de pagina

Titulo de capa

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eleifend nisl quis nulla. Nulla lacinia bibendum risus. Vivamus faucibus tellus non felis. Donec in lorem at mauris hendrerit eleifend. Phasellus neque est, tempor vitae, facilisis quis, mattis a, mauris. Sed fermentum. Sed sed purus a odio lobortis ullamcorper. Integer mollis, nunc sed auctor congue, orci ligula ultricies mauris, et dictum neque est ut lectus. Quisque ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Maecenas eros. Etiam diam. Quisque sed mi. Maecenas congue felis id arcu. Pellentesque pellentesque porta mauris. Duis egestas vehicula metus. Nam lacus. Duis eros sapien, egestas nec, accumsan a, pellentesque nec, nunc. Vivamus libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tincidunt blandit nulla. Phasellus ac enim.

Nunc ullamcorper elit a ligula. Phasellus pede metus, ullamcorper vulputate, sodales in, posuere sed, leo. Etiam imperdiet ullamcorper metus. Nunc semper nisl et odio. Etiam congue, dui venenatis rutrum elementum, leo risus aliquam ante, aliquet pharetra felis nunc sit amet ligula. In mattis ullamcorper arcu. Curabitur lacinia ipsum eget enim. Integer in lectus. Donec pharetra bibendum tortor. Aliquam justo. Nullam sit amet justo. Ut tincidunt.

Pellentesque ut purus eget nisl sodales dapibus. Cras posuere, quam eget tristique condimentum, tortor arcu euismod lacus, non euismod metus pede volutpat elit. Maecenas interdum, justo et ultrices mollis, odio nibh condimentum justo, quis sodales erat mi sed est. Curabitur quis sapien. Duis aliquet. Integer vestibulum magna vitae mi. Vestibulum libero risus, eleifend eu, tempor id, tempor id, est. Phasellus vel leo in nibh bibendum varius. Morbi et libero. Phasellus ac nibh.

Nam lacus ligula, interdum ultricies, feugiat id, bibendum a, lectus. Nam erat justo, suscipit quis, iaculis sit amet, mattis non, massa. Etiam pellentesque auctor dui. Sed bibendum, urna in convallis facilisis, dolor turpis tempus neque, et dictum ligula quam non nibh. Praesent sapien quam, dictum nec, gravida non, commodo non, dui. Nunc sagittis sapien sit amet erat. Morbi mattis. Nam elit sem, feugiat eu, porttitor at, consectetur sit amet, pede. Etiam ut ante. Nunc placerat lorem ultrices nulla.

CSS:

body{
background: #EEE;
}
/*Sheet with Shadow */
.withShadow{
background: #FFF;
position: relative;
margin: 10px;
padding: 10px;
width: 300px; /* El tamaños que gustes */
}
.shadow{
display: block;
position: absolute;
}
.corner{
width: 8px;
height: 8px;
}
.topShadow{
top: -6px;
left: 2px;
right: 2px;
height: 8px;
background: url(images/topSheet.png) repeat-x;
}
.bottomShadow{
bottom: -6px;
left: 2px;
right: 2px;
height: 8px;
background: url(images/bottomSheet.png) repeat-x;
}
.leftShadow{
top: 2px;
bottom: 2px;
left: -6px;
width: 8px;
background: url(images/leftSheet.png) repeat-y;
}
.rightShadow{
top: 2px;
bottom: 2px;
right: -6px;
width: 8px;
background: url(images/rightSheet.png) repeat-y;
}
.leftTopCornerSheet{
top: -6px;
left: -6px;
background: url(images/leftTopSheet.png) no-repeat;
}
.rightTopCornerSheet{
top: -6px;
right: -6px;
background: url(images/rightTopSheet.png) no-repeat;
}
.leftBottomCornerSheet{
bottom: -6px;
left: -6px;
background: url(images/leftBottomSheet.png) no-repeat;
}
.rightBottomCornerSheet{
bottom: -6px;
right: -6px;
background: url(images/rightBottomSheet.png) no-repeat;
}
/*Sheet with Shadow end */


Images:

Advertisement