Membuat Bingkai Catatan Dengan CSS

Membuat Bingkai Catatan Dengan CSS | Ini adalah kreasi pertama saya bersama CSS. Note Box, mungkin itu namanya, tapi entahlah. Anda bisa memakai ini, untuk :

1. Memberikan pengumuman kepada pengunjung
2. Membuat puisi / kata mutiara di dalam web
3. Menampilkan foto

DEMO BOX NOTE

Ini bukanlah serta merta ide saya, ini adalah berawal dari tutorial membuat link list dari mas zhinto. Saya berfikir gimana caranya bisa diubah ke dalam teks dengan porsi yang hampir mirip. Nah, akhirnya dengan asisten saya, dreamweaver cs6, jadilah.

CSS, Box Note With CSS

<style type="text/css">
.boxnotew {
    width: 40%; /*Ukuran kotak*/
    padding: 5px;
    background-color: rgba(215, 40, 40, 0.9);;
    border-bottom: 1px solid rgb(51, 51, 51);
    border-top: 1px solid rgb(51, 51, 51);
    box-shadow: 0px 1px rgb(0, 0, 0), 0px 2px 1px rgba(0, 0, 0, 0.4);
    margin: 5px auto;
    border: 1px solid rgba(0, 0, 0, 0.4);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.4);
    }
.boxnotew .judul {
    text-align: center;
    font-size: 1.5em;
    background: none repeat scroll 0% 0% rgba(64, 68, 203, 1);
    border-bottom: 1px solid rgb(51, 51, 51);
    border-top: 1px solid rgb(51, 51, 51);
    box-shadow: 0px 1px rgb(0, 0, 0), 0px 2px 1px rgba(0, 0, 0, 0.4);
    padding:5px;
    color: #FFF;
    font-family: Coda;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
    }
.boxnotew .isi {
    background: none repeat scroll 0% 0% rgba(64, 68, 203, 1);
    margin-top:5px;
    height: 220px; /*tinggi kotak dalam*/
    overflow: auto;
    border: 1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
    }
.boxnotew p {
    list-style: none;
    color: #FFF;
    margin:0px;
    text-decoration: none;
    background: none repeat scroll 0% 0% rgba(64, 68, 203, 1);
    padding: 5px; /*jarak teks dari garis*/
    color: #BBB; /*warna huruf*/
    text-transform: capitalize; /*bentuk huruf (besar semua, normal, kapital*/
    font-size: 12px; /*ukuran huruf*/
    font-weight: bold; /*kondisi huruf*/
    font-family: Coda; /*jenis huruf*/
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    }
</style>

HTML, Box Note With CSS

<div class="boxnotew">

<div class="judul">Kebijakan Admin Wammy</div>

<div class="isi">

<p>Teks / foto anda disini</p>

<p>Saya paham rasanya jadi blogger. Sebagaimana anda begitu, tapi bagaimana pun juga tetap saling mengharagai di bidang apapun dan dengan alasan apapun. <br /><br />Salam Admin Wammy</p>

</div>

<small><div style='font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;'><a href="http://www.bocahit.com/2013/06/membuat-bingkai-catatan-dengan-css.html" target="_blank" title='Box Note With CSS'>+ Get This Widget Here</a></div></small>

</div>

Gunakan <p> sebagai pembuka kalimat dan </p> sebagai penutup. Jika anda ingin memasukkan foto, berikan action widht dan height. Sebagai contoh berikan <img src="URL GAMBAR" width="300" height="250". Selamat mencoba..