Ketikkan teks atau alamat situs web atau terjemahkan dokumen. Batal Contoh penggunaan "": diterjemahkan oleh Google secara otomatis Bahasa Indonesia Inggris Arab Login Slick formulir dengan HTML5 & CSS3

Kita sudah tahu bahwa CSS3 memiliki kemampuan untuk menciptakan banyak kemungkinan baru untuk merancang dan mengimplementasikan bentuk web yang lebih baik. Juga, HTML5 memiliki peran penting ketika datang tentang menciptakan bentuk yang lebih berguna, tanpa benar-benar perlu kode Javascript.
Mengetahui bahwa, periksa preview di bawah ini untuk melihat form login kita akan menciptakan dalam artikel ini:
Lihat demoMarkup
<form id="login">
    <h1> Log In </ h1>
    <fieldset id="inputs">
        <input type="text" id="username" placeholder="Username" autofocus required>
        <input id="password" type="password" placeholder="Password" required>
    </ Fieldset>
    <fieldset id="actions">
        <input type="submit" id="submit" value="Log in">
        <a href=""> Lupa kata sandi Anda </ a>? <a href=""> Daftar </ a>
    </ Fieldset></ Form>
The HTML5 hal
New HTML5 atribut deskripsi, sesuai dengan spesifikasi terbaru:

    * Placeholder - Sebuah petunjuk singkat (satu kata atau frase pendek) dimaksudkan untuk membantu pengguna ketika memasukkan data ke kontrol diwakili oleh unsur.
    * Diperlukan - Menentukan bahwa elemen adalah bagian yang diperlukan dari pengiriman formulir.
    * Autofocus - Menentukan bahwa elemen merupakan kontrol yang UA yang dimaksudkan untuk memberikan fokus secepat dokumen tersebut dimuat.
    * Type = "password" - Menentukan bahwa elemen input adalah satu-baris teks biasa mengedit kontrol untuk memasukkan password. (Tidak HTML5 tertentu)
CSS
Untuk artikel ini, saya tidak akan menyisipkan baris penuh di sini. Sebaliknya, saya hanya akan menambahkan orang-orang yang membantu menciptakan beberapa efek dingin.Kertas tumpukan efek
Kotak-shadow akan membantu kita menciptakan efek yang bagus dengan mendefinisikan bayangan beberapa yang benar-benar tumpang tindih.
# Masuk{
    box-shadow:
          0 0 2px RGBA (0, 0, 0, 0,2),
          0 1px 1px RGBA (0, 0, 0, .2),
          0 0 3px # fff,
          0 0 4px RGBA (0, 0, 0, .2),
          0 6px 0 # fff,
          0 0 7px RGBA (0, 0, 0, .2);}
Stitch efek
Efek ini ditambahkan dengan menggunakan pseudo-elemen. Menggunakan pseudo-elemen membantu Anda menghindari markup tambahan dan ini adalah contoh sempurna: menjaga markup bersih dan membiarkan CSS melakukan keajaiban.
# Masuk{
    position: absolute;
    z-index: 0;}
# Login: sebelum{
    isi:'';
    position: absolute;
    z-index: -1;
    border: 1px dashed # ccc;
    top: 5px;
    bottom: 5px;
    kiri: 5px;
    kanan: 5px;
    -Moz-box-shadow: 0 0 0 1px # fff;
    -Webkit-box-shadow: 0 0 0 1px # fff;
    box-shadow: 0 0 0 1px # fff;}
Gaya kutipan.Halus gradien garis
Saya pertama kali melihat efek ini pada halaman Gene Locklin dan saya pikir ini cukup keren. Jadi, saya memutuskan untuk menggunakannya untuk menyoroti "Login" pos. Menggunakan pseudo-elemen (lagi) dan CSS3 gradien beberapa baris dingin ditambahkan untuk mensimulasikan efek Coret.
h1{
    text-shadow: 0 1px 0 RGBA (255, 255, 255, .7), 0px 2px 0 RGBA (0, 0, 0, .5);
    text-transform: uppercase;
    text-align: center;
    color: # 666;
    margin: 0 0 30px 0;
    letter-spacing: 4px;
    Font: normal 26px / 1 Verdana, Helvetica;
    position: relative;}
h1: setelah, h1: sebelum{
    background-color: # 777;
    isi: "";
    height: 1px;
    position: absolute;
    top: 15px;
    width: 120px;}
h1: setelah{
    background-image:-webkit-gradient (linear, kiri atas, kanan atas, dari (# 777), untuk (# fff));
    background-image:-webkit-linear-gradient (kiri, # 777, # fff);
    background-image:-moz-linear-gradient (kiri, # 777, # fff);
    background-image:-ms-linear-gradient (kiri, # 777, # fff);
    background-image:-o-linear-gradien (kiri, # 777, # fff);
    background-image: linear-gradien (kiri, # 777, # fff);
    kanan: 0;}
h1: sebelum{
    background-image:-webkit-gradient (linear, kanan atas, kiri atas, dari (# 777), untuk (# fff));
    background-image:-webkit-linear-gradient (kanan, # 777, # fff);
    background-image:-moz-linear-gradient (kanan, # 777, # fff);
    background-image:-ms-linear-gradient (kanan, # 777, # fff);
    background-image:-o-linear-gradien (kanan, # 777, # fff);
    background-image: linear-gradien (kanan, # 777, # fff);
    kiri: 0;}
Hasil akhir