Membuat Bingkai Border dengan CSS

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">
    <span class="tucked-corners bottom-corners">
             Textmu atau Url Image    </span>
</div>

2. CSS

div.tucked-corners {
    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);
}

Oke sekian dulu cara membuat Bingkai dengan CSS, tunggu tutorial selanjutnya.

Salam Blogger Donomulyo.

Share this

Share on FacebookPlus on Google+