Membuat Text Box Cantik Dengan CSS

Sebuah kotak teks, bidang teks atau kotak entri teks adalah semacam widget yang digunakan ketika membangun sebuah antarmuka pengguna grafis. Tujuan Sebuah kotak teks adalah untuk memungkinkan pengguna untuk informasi input teks yang akan digunakan.

Mungkin diantara sobat blogger ada yang pernah menjumpai sebuah text box yang menarik namun belum tau cara pembuatannya....!!!

Text box ini mungkin tidak terlalu penting tapi mungkin juga sangat penting bagi sebagian orang, untuk itu tidak ada salahnya jika Kolom Tutorial™ kali ini memberikan sebuah tutorial tentang bagaimana pembuatan sebuah Text Box Cantik Dengan CSS.

texbox, css, Text Box cantik


Pasang Di Postingan:-

  1. Seperti biasa sobat Login ke akun Blogger sobat
  2. Klik Buat Entri Baru Klik >>>> HTML Dan Kopas Kode dibawah ini.

Pasang Di Page:-

  1. Seperti biasa sobat Login ke akun Blogger sobat
  2. Klik Laman Klik >>> Laman Baru Klik >>> laman Kosong >>>> Klilk HTML
  3. Kopipaste Kode Dibawah ini.

Pasang Di Widget:-

  1. Seperti biasa sobat Login ke akun Blogger sobat
  2. Klik Add Widget Klik >>>> HTML/Javascript Dan Kopas Kode dibawah ini.

UNTUK KODE CSS NYA
 <style type='text/css'>
/* basic styling first By : www.alexjoen.web.id  */

.lifted_content_box {
    display: block;
    width: 500px;
    margin: 0 auto;
    position: relative;
}

.lifted_content_box h1 {
    font-size: 14px;
    font-weight: bold;
    line-height: 2em;
    margin: 0; /* for the triangular shape/cut */
    height: 0;
    border-bottom: 25px solid #505050; /* kinda acts as the height */
    border-right: 15px solid transparent; /* adjust to change the angle */
    display: inline-block;
    color: #fff;
    text-shadow: 1px 1px 0 #585858;
    padding: 0 10px;
    vertical-align: bottom; /* fixes the mysterious gaps bug */
}

.lifted_content_box div {
    padding: 10px;
    background: #fff;
    border-top: 5px solid #505050; /* was just experimenting. gives a nice look and feel: D */;
    -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);
}

.lifted_content_box p {
    margin: 0 0 10px;
    color: #555;
    line-height: 1.5em;
}

/* lifted shadows  */

.lifted_content_box::before,
.lifted_content_box::after {
    content: '';
    position: absolute;
    width: 50%; /* maybe we could set a max-width for larger content boxes ? */
    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;
}

.lifted_content_box::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);
}

</style>

UNTUK KODE HTML NYA

<article class="lifted_content_box">
	<h1>JUDUL BOX</h1>
	<div>
		<p>Paragrap Pertama Texbox</p>
		<p>
	ISI DENGAN TEXT SOBAT
		</p>
	</div>
</article>

Kemudian Klik Save and Enjoy.

Demikain artikel tentang Cara Pembuatan Texbox cantik Dengan CSS, semoga bermanfaat.

37 Responses to "Membuat Text Box Cantik Dengan CSS"

  1. tutorial anda sangat bermanfaat,salam blogger tetap semangat dan sukses

    ReplyDelete
    Replies
    1. Terimaksih mas atas supporrt serta kunjungannya.

      Delete
  2. wah bagus sekali ini sob..baerhasil terpasang di blog saya. hehehe. terimakasih sudah berbagi sobat..

    #Kunjungan perdana. Follow sukses !!

    ReplyDelete
    Replies
    1. sip mantap sukurlah kalau berhasil.

      FB sukses, thank banget sob

      Delete
  3. okee nih mas teks boxnya mantapss..
    mas alex emang kreativ banget :) hehe
    terimaksih sudah berbagi mas,

    ReplyDelete
    Replies
    1. terimakasih mas, masih belajar mas, tapi sambil beragi. terimakasih kunjungannya.

      Delete
  4. wah keren nih sob, thanks dah share...

    ReplyDelete
  5. berkunjung kang alex,,,lagi" sy dibikin klepek" nih sama postingannya kang alex :D nice post kang

    ReplyDelete
    Replies
    1. wah tu kata2 berlebihan mas, hehheh, terimakasih banyak atas kunjungannya.

      Delete
  6. cakep kang, tapi berat gak ya ^_^

    ReplyDelete
    Replies
    1. terimakasih, engga ko mas, karena ini cuman CSS sama HTML yang bikin berat biasanya Javascript, tapi kalau ragu dikompres aja dulu CSS nya. terimakasih atas kunjungannya.

      Delete
  7. Owh java itu trnyta lbh berat ya gan??sya pake java smua :)

    ReplyDelete
    Replies
    1. hehheh kata orang sih begitu...

      tapi ane juga masih belajar gan.

      Delete
  8. Salam Sukses....

    Sekedar informasi untuk sahabat blogger smuanya,
    Kontes Review untuk mendukung penghijauan bumi tinggal 2 minggu lagi.
    Berhadiah JUTAAN rupiah lho....
    Kontes ini bukan kontes SEO murni jadi dapat diikuti oleh siapapun....
    Info Selengkapnya:
    www.MitraBibit.com

    ReplyDelete
  9. Postingan yang banyak membantu sahabt bloger semua sobat, tutorial ini benar^ berguna, terima kasih sudah berbagi

    ReplyDelete
    Replies
    1. Sama2 mas, terimakasih kembali atas support serta kunjungannya.

      Delete
  10. sangat keren neh sob ...
    bisa jadi keren neh blognya

    ReplyDelete
    Replies
    1. Alhamdulillah, mudah2an mas, terimakasih atas kunjungannya.

      Delete
  11. mau tanya cara ngilangin garis batas antar widget gimana ya.

    ReplyDelete
    Replies
    1. Mis maaf baru blogging lagi.
      Coba Cari Kode seperti dibawah ini :
      .sidebar .widget{border-bottom:1px dotted
      Kemudian ubah 1px menjadi opx

      Delete
    2. oya garis itu juga muncul di batas antar postingan.

      Delete
    3. tampilan settingan templatenya berubah, jadi bingung.. dicari kode itu gak ada.

      Delete
    4. Coba Cari lagi kode itu lebih jeli :
      Untuk Menghilangkan garis antara postingan:
      .post{margin:.5em 0 .5em;border-bottom:1px dotted #cccccc;padding-bottom:.5em}

      Untuk Menghilangkan garis antara Widget:
      .sidebar .widget{border-bottom:1px dotted #cccccc;margin:0 0 .5em;padding:0 0 .5em}

      Keduanya sama rubah 1px menjadi 0px

      Delete
    5. kok gak ada semua ya..
      ehh tampilan settingan templatenya gnati nih jadi bingung, cara makenya gimana.

      Delete
    6. bingung aja.. tampilannya beda di dasbor .. coba deh. apa ada yg beda. mangkanya bingung mau ngedit, terus nyari kode itu gak ada.
      aku kirim SS-nya ke e-mail ya.

      Delete
  12. Bos ane mau membuat tempat atau box bagi backlink di blog agar ngak begitu panjang dan menghabiskan halaman ada scriptnya ngak...coba deh liat backlink di blog ku : www.agentasdotcom.blogspot.com panjangan banget dan menganggu pemandangan

    ReplyDelete
    Replies
    1. Maaf maksud mas maunya texbox yang kaya gimana. apa backlinknya banyak...??? sehingga harus berderet lagi kebawah...???

      Delete
  13. keren mass
    nyoba ya
    http://thumber-kreatif.blogspot.com

    ReplyDelete
  14. met siang mas wah kelihatan'y mas kalu kita memake. tekx box trmksih mas dah berbagi

    ReplyDelete
    Replies
    1. iya mas, terimakasih banyak atas kunjungannya.

      Delete
  15. salut deh...selalu ada yg terbaru. save dulu mas....

    ReplyDelete
    Replies
    1. terimakasih banyak mis atas support serta kunjungannya.

      Delete
  16. mantap gan, thankyou bangetttt nih infonya.

    ReplyDelete
  17. keren sob :D kunbal yuk di pusatrik.blogspot.com

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami M. Alex Joenaedi

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Visit Kabar Sehat