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.

VIEW A DEMO

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.

M. Alex Joenaedi

Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.

Share this post