Многие разработчики добиваются эффекта трехмерности на своих вебсайтах, используя изображения (особенно на заднем фоне), линии и некоторые
CSS техники, помогающие создать иллюзию объемного пространства. Мы постараемся это реализовать используя только
CSS и
HTML.
В этом уроке я хочу вам рассказать как создать
CSS ленты, без каких-либо изображений и минимальной
HTML разметки. Это может помочь вам, добавив
3D-эффект для вашего сайта.
Код
<div class="lenta">
<div class="bvl_lenta">Kamorka.uCoz.com</div>
</div>
В
CSS:
Код
.lenta {
margin: 50px auto;
width: 250px;
height: 370px;
background: #e1e1e1;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
padding: 15px;
z-index: 90;
}
.bvl_lenta {
text-align: center;
position: relative;
font-family: 'OpenSans2', Arial, sans-serif;
font-size: 16px;
color: #FFF;
padding: 15px 0;
text-shadow: 0 1px rgba(0,0,0,1);
background: #123;
margin: 0px -25px 10px -25px;
clear: both;
}
.bvl_lenta::before, .bvl_lenta::after{
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
bottom: -10px;
}
.bvl_lenta::before{
border-width: 0 10px 10px 0;
border-right-color: #5d5d5d;
left: 0;
}
.bvl_lenta::after{
border-width: 0 0 10px 10px;
border-left-color: #5c5c5c;
right: 0;
}