Make Beautiful Tag Input - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Beautiful Tag Input, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article CSS3, Article HTML, Article Informasi, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make Beautiful Tag Input
link : Make Beautiful Tag Input

Make Beautiful Tag Input

Koben akan melakukan update artikel dengan tema seputaran the input tag! Jika diperhatikan dengan seksama tag input ternyata memiliki kelebihan tersendiri. Dengan majunya bahasa style-sheet, telah jebol banjir trik tutorial menggunakan tag input itu sendiri :) Silahkan searching pd kotak pencarian dengan keyword input maka akan tampak tutorial full stylish punya :D So, are you ready to start the adventure today :)) Anda ingin memasang plugin jQuery add clear skorecky.github.io/Add-Clear Ketika mengetikan sesuatu di dalam kotak, tombol ✖ (clear) akan muncul. Full menggunakan CSS how to make CSS form validation codepen.io/benschwarz/pen/HBrDJ, sobat dapat mengcustomize kode yg sudah ada agar lebih keren.

Fancy text imputs use CSS. Coba ketikan apapun di dalam kotak!Source by: codepen.io/abergin/pen/jIplf
Itu di buat dengan bahasa CSS modus SASS! Lakukan klik tombol mirip gambar mata dgn title Toggle Compiled View pada kotak kode tujuan. Kalau pusing disini ajah.

.kotax button, .kotax .question label, .kotax .question input[type="text"] {
-o-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
-webkit-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
}
.kotax {
position: relative;
display: inline-block;
max-width: 700px;
min-width: 500px;
box-sizing: border-box;
padding: 30px 25px;
background-color: white;
border-radius: 10px;
border: 1px solid #aaa;
margin: 40px 0;
left: 50%;
-ms-transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.kotax button {
margin-top: 35px;
background-color: white;
border: 1px solid #ff4a56;
line-height: 0;
font-size: 17px;
display: inline-block;
box-sizing: border-box;
padding: 20px 15px;
border-radius: 10px;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
}
.kotax button:hover, form button:focus {
color: white;
background-color: #ff4a56;
}
.kotax .question {
position: relative;
padding: 10px 0;
}
.kotax .question:first-of-type {
padding-top: 0;
}
.kotax .question:last-of-type {
padding-bottom: 0;
}
.kotax .question label {
transform-origin: left center;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
font-size: 17px;
box-sizing: border-box;
padding: 10px 15px;
display: block;
position: absolute;
margin-top: -40px;
z-index: 2;
pointer-events: none;
}
.kotax .question input[type="text"] {
appearance: none;
background-color: none;
border: 1px solid #ff4a56;
line-height: 0;
font-size: 17px;
width: 100%;
display: block;
box-sizing: border-box;
padding: 10px 15px;
border-radius: 10px;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
}
.kotax .question input[type="text"]:focus {
outline: none;
background: #ff4a56;
color: white;
margin-top: 30px;
}
.kotax .question input[type="text"]:valid {
margin-top: 30px;
}
form .question input[type="text"]:focus ~ label {
-ms-transform: translate(0, -35px);
-webkit-transform: translate(0, -35px);
transform: translate(0, -35px);
}
.kotax .question input[type="text"]:valid ~ label {
text-transform: uppercase;
font-style: italic;
-ms-transform: translate(5px, -35px) scale(0.6);
-webkit-transform: translate(5px, -35px) scale(0.6);
transform: translate(5px, -35px) scale(0.6);
}

<form class="kotax">
  <div class="question">
    <input type="text" required/>
    <label>First Name</label>
  </div>
  <div class="question">
    <input type="text" required/>
    <label>Last Name</label>
  </div>
  <div class="question">
    <input type="text" required/>
    <label>Email Address</label>
  </div>
  <div class="question">
    <input type="text" required/>
    <label>Email Confirm</label>
  </div>
  <button>Submit</button>
</form>

Bonusnya bray:

• Text input love.
codepen.io/MichaelArestad/pen/ohLIa
• Single input 3D form.
thecodeplayer.com/walkthrough/single-input-3d-form
• Animating float labels using jQuery and CSS3.
thecodeplayer.com/walkthrough/animating-float-labels-jquery-css3
• Create fancy contact form with CSS 3 and jQuery.
youhack.me/2010/07/22/create-a-fancy-contact-form-with-css-3-and-jquery

Segitu saja informasi tentang dunia tag input. Sebenarnya banyak sekali rujukan yg bisa kalian lihat. Karena keterbatasan niat gue, jadi cuman itu lah 3:-O

Happy input \m/

Thus articles Make Beautiful Tag Input

that is all articles Make Beautiful Tag Input This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Beautiful Tag Input with the link address https://autopostingblogspot.blogspot.com/2014/06/make-beautiful-tag-input.html