Tutorial Membuat Bingkai Border dengan CSS - Bingkai dengan CSS di blogspot ini menggunakan fungsi border-corner yang ada dalam CSS. Bingkai Border ini didalamnya bisa kita isi text maupun Foto, anda tinggal mengisi dengan tulisan atau dengan URL Image anda. Sesuaikan dengan kebutuhan saja.
Membuat Bingkai Border dengan CSS bisa kalian lihat contoh imagenya dibawah ini :
Membuat Bingkai Border dengan CSS |
Seperti itulah contohnya dari Membuat Bingkai Border dengan CSS
DEMO :
TEXT silahkan Anda disini, silahkan anda isi misalnya "Membuat Bingkai Border dengan CSS" atau yang lain juga bisa. Bisa dijadikan modifikasi untuk template blog kamu, tinggal gimana kamu mengkreasikan ini. Membuat Bingkai Border dengan CSS ada 4 kertas dipojok yang digunakan untuk mengapit pigora ini, seperti ditempeli dengan Kertas.
1. HTML
<div class="tucked-corners top-corners">2. CSS
<span class="tucked-corners bottom-corners">
Textmu atau Url Image </span>
</div>
div.tucked-corners {Oke sekian dulu cara membuat Bingkai dengan CSS, tunggu tutorial selanjutnya.
background: #f6f6f6;
height: 380px;
margin: 50px auto;
padding: 10px;
position: relative;
width: 580px;
-webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
-moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
}
span.tucked-corners {
background: #999;
font-family: Arial, Helvetica, Sans-serif;
font-size:14px;
color:#FFF;
display: block;
height: 380px;
position: relative;
width: 580px;
-webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
-moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
}
/* Top Corner Effect */
.top-corners:after,
.top-corners:before {
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
top: -25px;
width: 100px;
z-index: 10;
-webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
-moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.top-corners:after {
left: -50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.top-corners:before {
right: -50px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Bottom Corner Effect */
.bottom-corners:after,
.bottom-corners:before {
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
bottom: -25px;
width: 100px;
-webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
-moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
}
.bottom-corners:after {
left: -50px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.bottom-corners:before {
right: -50px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
Salam Blogger Donomulyo.