Membuat Text Box Menarik dengan CSS

Membuat Text Box Menarik dengan CSS
Pada artikel kali ini Saya pengen kasi tutorial untuk Membuat Text Box menarik dengan CSS. Untuk text box ini akan Saya modifikasi dengan efek bayangan dan dengan warna judul yang gelap dan disisipi tempat paragraf berwarna putih jadi terkesan agak atau mungkin menurut Saya sudah cukup profesional lah, hehe.. Saya juga akan memberikan Demonya biar temen-temen bisa paham tentang tutorial yang Saya kasi ini buat temen-temen.

Okelah gak usah mengulur waktu, langsung Saya akan kasi tutorialnya buat temen-temen :

LIHAT DEMO KLIK DISINI

  • Tentunya harus login dulu ke blogger betul??
  • Silahkan pilih menu Template
  • Saya ingatkan lagi untuk BackUp Template dulu
  • Pilih Edit HTML
  • Expand juga jangan lupa (klik tanda panah kecil di sisi kiri tampilan kode templatenya)
  • Tekan tombol CTRL + F dan cari kode ]]></b:skin>
  • Silahkan taruh kode berikut ini sebelum kode ]]></b:skin> tersebut

    • 
/* Text Box Bagus */
body {
    font-family: 'lucida grande', helvetica, arial, sans-serif;
    font-size: 76%;
}
/* Dasarnya  */
 
.mistert_kotak_konten {
    display: block;
    width: 500px;
    margin: 0 auto;
    position: relative;
}
.mistert_kotak_konten h1 {
    font-size: 14px;
    font-weight: bold;
    line-height: 2em;
    margin: 0;
 /* Bentuknya */
    height: 0;
    border-bottom: 25px solid #505050;
 /* Tingginya */
    border-right: 15px solid transparent;
 /* Sudutnya */
    display: inline-block;
    color: #fff;
    text-shadow: 1px 1px 0 #585858;
    padding: 0 10px;
    vertical-align: bottom;
 /* Perbaikan Bugs */;
}
.mistert_kotak_konten div {
    padding: 10px;
    background: #fff;
    border-top: 5px solid #505050;
 /* Eksperimen pribadi ngasi sentuhan dikit bro */
    ;
    -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.20);
    -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.20);
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.20);
}
.mistert_kotak_konten p {
    margin: 0 0 10px;
    color: #555;
    line-height: 1.5em;
}
/* Efek Bayangan  */
 
.mistert_kotak_konten::before,
.mistert_kotak_konten::after {
    content: '';
    position: absolute;
    width: 50%;
 /* Bisa diedit untuk box konten yang lebih besar */
    height: 20px;
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(-5deg) skew(-10deg);
    -moz-transform: rotate(-5deg) skew(-10deg);
    -o-transform: rotate(-5deg) skew(-10deg);
    -ms-transform: rotate(-5deg) skew(-10deg);
    transform: rotate(-5deg) skew(-10deg);
    left: 10px;
    bottom: 13px;
    z-index: -1;
}
.mistert_kotak_konten::after {
    left: auto;
    right: 10px;
    -webkit-transform: rotate(5deg) skew(10deg);
    -moz-transform: rotate(5deg) skew(10deg);
    -o-transform: rotate(5deg) skew(10deg);
    -ms-transform: rotate(5deg) skew(10deg);
    transform: rotate(5deg) skew(10deg);
}
  • Simpan
Untuk Penerapannya :


<article class="mistert_kotak_konten"> 
<h1>MISTER TAURUZ - Contoh Text Box</h1> 
<div> 
<p>Heading Paragrafnya</p> 
<p>Disini isi kontennya atau dengan kata lain isinya :p</p> 
</div>
</article>

Catetan :
Temen-temen bebas mengubah warna, lebar, font, paddingnya atau apanya kek yang ada di CSSnya, meskipun begitu Saya ingetin lagi kalau ada yang gak dimengerti silahkan tanyakan lewat kolom komentar di bawah Artikel Membuat Text Box Menarik dengan CSS ini karena pertanyaan, komentar dan saran temen-temen sangat berharga buat Saya.

Semoga tutorial ini bermanfaat buat temen-temen Mister Tauruz.
Terima Kasih

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Disqus Comments