Posts

Form Validasi HTML5 dengan menggunakan atribut “Pattern”

Dalam tutorial ini kita akan mengeksplorasi atribut pattern HTML, digunakan untuk membantu kita menyesuaikan cara kita memvalidasi form kita.

Validation

Form validasi snagat penting untuk keamanan situs web. Proses validasi mengoreksi apakah nilai input dalam format yang benar unyuk mengirimkannya. Misalnya, jika kita memiliki field inputang untuk alamat email, nilainya pasti berisi alamat email yang valid, harus dimulai huruf atau angka, diikuti oleh simbol @, lalu diakhiri dengan nama domain.

Spesifikasi HTML5 telah membuat validasi yang sedikit lebih mudah dengan diperkenalkannya jenis inputan baru seperti emailurl, dan tel dan juga dikemas dengan validasi yang telah ditentukan. Apapun nilai yang diberikan tidak terpengaruhi dengan format yang diharapkan, jenis input ini akan membuat pesan error sehingga mencegah pengiriman.

emaik

Mengharapkan setiap skenario inputan yang mungkin untuk dilayani tidak praktis. Bagaimana jika Anda memiliki nama pengguna, kode pos, atau jenis data khusus yang tidak ditentukan jenis standar inputan? Bagaimana kita memvalidasi inputan tersebut? Disinilah pola  pattern  ikut bermain

Menggunakan atribut pattern

Atribut pattern hanya berlaku pada elemen input. Hal ini memungkinkan kita untuk mendifiniskan aturan kita sendiri untuk memvalidasi nilai input menggunakan Regular Expressions(RegEx Express). Sekali lagi, jika nilainya tidak sesuai dengan pila yang ditentukan, input kan memunculkan error.

Misalnya, katakanlah kita memiliki username dalam form kita. Tidak ada tipe standar untuk username, oleh karena itu kita menggunakan tipe input text biasa:

<form action="somefile.php">
    <input type="text" name="username" placeholder="Username">
</form>

Mari mendefiniskan aturan untuk ditambahkan menggunakan atribut pattern. Dalam kasus ini, kita akan menentukan bahwa username hanya boleh terdiri dari huruf kecil, tidak ada huruf besar, angka atau karakter khusus lainnya yang diperbolehkan. Selain itu panjang username tidak boleh lebih dari 15 karakter. Di RegEx, aturan ini dapat dinyatakan sebagai [a-z]{1,15}.

Tambahkan [a-z] {1,15} sebagai nilai atribut pattern dalam inputan username kami:

<form action="somefile.php">
    <input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}">
</form>

Sekarang, karena hanya menerima huruf kecil, mengirimkan nilai lainnya akan mengeluarkan pesan error.

username

Seperti yang dapat Anda lihat diatas, muncul pesan error “Please match the requested format.”. jadi validasi kita berhasil, namun pesan ini tidak membantu user memahami format yang diminta sebenarnya . UX gagal.

Costumize pesan validasi

Untungnya kita bisa custom/menyesuaikan pesan agar lebih membantu user, dan kami memiliki beberapa cara untuk melakukannya. Pendekatan termudah adalah menentukan atribut title dalam elemen input.

<form action="somefile.php">
    <input
        type="text"
        name="username"
        placeholder="Username"
        pattern="[a-z]{1,15}"
        title="Username should only contain lowercase letters. e.g. john">
</form>

Sekarang sertakan title bersama dengan pesan default:

username1

Namun pesan popup tidak konsisten. Jika kita bandingkan dengan yang dikeluarkan dengan tipe input email yang ditunjukan sebelumnya, petunjuk sebenarnya bisa lebih menonjol.

Pendekatan kedua akan menyelesaikan ini untuk kita

Mengganti pesan default validasi

Mari sekarang ganti default “Please match the requested format” dengan pesan yang benar-benar di custom. Kami akan menggunakan sedikit JavaScript untuk melakukannya.

Mulailah dengan menambahkan id ke elemen input, sehingga bisa memilihnya dengan mudah.

<form action="somefile.php">
    <input
        type="text"
        name="username"
        placeholder="Username"
        pattern="[a-z]{1,15}"
        id="username">
</form>

Sekarang, kita dapat memilih elemen input menggunakan JavaScript dan menetapkannya ke variable (antara tag <script>) di halaman kita, dalam file JavaScript yang terpisah, atau di panek JS pada CodePen);

var input = document.getElementById('username');

Terakhir, kita tentukan pesan yang digunaan saat input menunjukan keadaannya yang tidak valid.

input.oninvalid = function(event) {
    event.target.setCustomValidity('Username should only contain lowercase letters. e.g. john');
}

Event oninvalid  event inheritense objek berisi beberapa properti termasuk properti target(elemen tidak valid) dan validationMessage yang berisi pesan teks error. Pada contoh diatas, kita telah ovveriden pesan teks menggunakan metode setCustomValidity()

Kita sekarang harus menemukan pesan custom dengan mulus mengganti default

username3

Styling

Untuk melengkapi jenis input baru dan metode-metode ini untuk mengatur pesan custom validasi, spesifikasi CSS3 membawa beberapa pseudo-code yang berguna, valid dan invalid.memungkinkan kita untuk menerapkan style tergantung pada keadaan validitas inputan, misalnya:

input:invalid {
    border-color: red;
}
input,
input:valid {
    border-color: #ccc;
}

Ada beberapa hal yang perlu diingat ketika menggunakan pseudo-class ini:

  • Pertama, valid digunakan sebagai default, bahkan ketika value input kosong. Dengan demikian, seperti yang Anda lihat diatas, kita atur border-color ke #ccc warna default yang diberikan ke elemen input. Value kosong selalu dianggap valid, kecuali jika kita telah menambahjan atribut required. Dalam hal ini, input tidak valid dan warna border merah diberikan
  • Style valid dan invalid berlaku saat pengguna mengetik, meskipun nilainya kosong. Perubahan style instan dapat membuat pengguna panik.

Sebuah kata tentang styling pesan popup

Form validasi telah menjadi standar baru sesuai spesifikasi HTML5, namun bagaimana tampilan kesalahan muncul sepenuhnya tergantung pada vendor browser. Harapkan berbagai estetika di berbagai browser, yang tidak akan membantu konsistensi UI Anda.

html5-validation-different-browsers

Google chroome mencegah kemampuan untuk mencustomize style popup default beberapa tahun yang lalu. Jika ini adalah sesuatu yang ingin Anda capau, satu-satunya pilihan yang tersisa adalah sepenuhnya mengganti pesan popup menggunakan JavaScript jadi mari kita lihat bagaimana cara kerjanya!

Ada yang lebih lagi nih

Kita akan membuat custom popup yang akan muncul saat nilai masukan kami tidak valid. Untuk memulainya kita perlu memilih beberapa elemen yang dibutuhkan yaitu input and the form

var input = document.getElementById('username');
var form  = document.getElementById('form');

Selanjutnya, kita akan membuat elemen baru yang akan berisi pesan kita:

var elem               = document.createElement('div');
    elem.id            = 'notify';
    elem.style.display = 'none';
    form.appendChild(elem);

Kita membuat elemen div baru, kita akan memberinya notify dan menyembunyikan settingan display dengan property no, terakhir, kita menambahkan div baru dengan form

Bekerja dengan event

Ada dua event yang harus kita jalani. Pertama event invalid yang dipanggil ketika value dari input tidak sesuai dengan pola/pattern. Kita akan menjalankan event invalid :

input.addEventListener('invalid', function(event){
    event.preventDefault();
    if ( ! event.target.validity.valid ) {
        elem.textContent   = 'Username should only contain lowercase letters e.g. john';
        elem.className     = 'error';
        elem.style.display = 'block';
 
        input.className    = 'invalid animated shake';
    }
});

Disini dengan event.preventDefault(); kita prevent default tindakan sehingga pesan popup browser default tidak muncul. Sebaliknya, kita akan menunjukannya melalui elemen div baru. Kita tambahkan text message di dalam konten, menambahkan class baru, kesalahan dan menampilkan pesan dengan mengatur tampilan untuk diblokir.

Kita juga menambahkan class, invalid untuk elemen input, memberikan border color warna merah. Kita juga membutuhkan aturan style CSS pada stylesheet

input.invalid {
        border-color: #DD2C00;
}

selain itu, Anda juga dapat menambahkan animated shake class dari Animate.css. Yang akan memberikan efek dengan menggunakan shake animasi

Event kedua adalah event input. Event ini memanggil ketika nilai input diubah. Kita akan menggunakan event untuk mengembalikan masukan ke keadaan normalnya, serta menyembunyikan pesan popup sebagai berikut:

input.addEventListener('input', function(event){
    if ( 'block' === elem.style.display ) {
        input.className = '';
        elem.style.display = 'none';
    }
});

seperti yang Anda lihat diatas, kita akan menghapus nama class form input elemen dan menyembunyikan pesan popup.

error

Sekarang kita memiliki pesan validari popup yang telah di customize. Cobalah masukan nilai yang tidak valid

Catatan: Jangan lupa untuk melihat GraphicRiver jika Anda mencari desain UI yang inspiratif.

Terakhir

Menggunakan jenis input standar bersama dengan atribut pola akan memberikan formulir Anda lapisan tambahan validasi, tetapi ketahuilah bahwa Anda harus melakukan beberapa jenis validasi sisi server juga.

Secara mengejutkan, bahkan ketika pengguna telah menonaktifkan JavaScript di browser, browser terbaru masih akan menampilkan validasi popup dan mencegah pengiriman formulir. Safari, bagaimanapun, tidak mendukung atribut pola pada saat penulisan. Fungsi serupa bisa ditiru menggunakan webfim buatan Polyfill.

Kami harap Anda menikmati tutorial dan menyimpannya sebagai referensi praktis untuk Validasi HTML5. Semoga bermanfaat

Membuat Form Validasi Kartu Kredit

Dalam tutorial ini kami akan berbagi cara untuk membuat form kartu kredit sederhana. Kita akan membangun semuanya dari awal, dengan sedikit bantuan dari Bootstrap 3 untuk interfacenya dan Payform.js untuk form validasi client-side.

Overview projek

Berikut adalah tampilan akhir hasil dari tutorial ini.

credit-card-form

Anda bisa mendapatkan full code untuk projek ini dengan klik link download. Gambaran dari file dapat dilihat dibawah ini:

project-overview

Ada dua file .css dan dua file .js yang akan kita butuhkan untuk memasukan dalam HTML kita. Semua source lain seperti framework Bootstrap, jQuery, dan font web akan dimasukan secara eksternal melalui CDN.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Credit Card Validation Demo</title>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
    <link rel="stylesheet" type="text/css" href="assets/css/demo.css">
</head>

<body>

    <!-- The HTML for our form will go here -->
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="assets/js/jquery.payform.min.js" charset="utf-8"></script>
    <script src="assets/js/script.js"></script>
</body>
</html>

Sekarang semuanya sudah diatur, kita dapat mulai membangun form kartu kredit Anda. Mari kita mulai dengan layout HTML!

Layout

Sebuah dialog kartu kredit harus sederhana, singkat dan lugas. Berikut adalah empat input fields bahwa setiap form kartu kredit harus memiliki:

  • Nama pemilik kartu kredit
  • Nomor kartu
  • Kode rahasia (juga dikenal sebagai CVV / CVC / CID)
  • Tanggal kadaluarsa

Semua yang perlu kita lakukan adalah membuat <form> dan menambahkan semua field input yang diperlukan. Untuk nama pemilik, nomor kartu dan CVV kita akan menggunakan teks field sederhana. Untuk tanggal  kadaluarsa kita akan menempatkan kombinasi dua penyeleksi dengan pilihan yang telah ditetapkan untuk membuat bulan dan tahun

Selain itu formnya kita beri judul, button dan gambar untuk vendor kartu kredit populer. Karena kita menggunakan Bootstrap maka ada markup tambahan sedikit, tapi hal itu akan membantu menjaga kode terorganisir dan layout responsif.

<div class="creditCardForm">
    <div class="heading">
        <h1>Confirm Purchase</h1>
    </div>
    <div class="payment">
        <form>
            <div class="form-group owner">
                <label for="owner">Owner</label>
                <input type="text" class="form-control" id="owner">
            </div>
            <div class="form-group CVV">
                <label for="cvv">CVV</label>
                <input type="text" class="form-control" id="cvv">
            </div>
            <div class="form-group" id="card-number-field">
                <label for="cardNumber">Card Number</label>
                <input type="text" class="form-control" id="cardNumber">
            </div>
            <div class="form-group" id="expiration-date">
                <label>Expiration Date</label>
                <select>
                    <option value="01">January</option>
                    <option value="02">February </option>
                    <option value="03">March</option>
                    <option value="04">April</option>
                    <option value="05">May</option>
                    <option value="06">June</option>
                    <option value="07">July</option>
                    <option value="08">August</option>
                    <option value="09">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                </select>
                <select>
                    <option value="16"> 2016</option>
                    <option value="17"> 2017</option>
                    <option value="18"> 2018</option>
                    <option value="19"> 2019</option>
                    <option value="20"> 2020</option>
                    <option value="21"> 2021</option>
                </select>
            </div>
            <div class="form-group" id="credit_cards">
                <img src="assets/images/visa.jpg" id="visa">
                <img src="assets/images/mastercard.jpg" id="mastercard">
                <img src="assets/images/amex.jpg" id="amex">
            </div>
            <div class="form-group" id="pay-now">
                <button type="submit" class="btn btn-default" id="confirm-purchase">Confirm</button>
            </div>
        </form>
    </div>
</div>

Sekarang kita memiliki field input yang dibutuhkan, kita dapat mengatur aturan validasi.

Validation

Semua validasi akan menunjukan client side dan dilakukan secara eksklusif di JavaScript. Dan untuk validasi pada HTML Anda bisa melihatnya pada postingan sebelumnya. untuk memulainya dengan mendefinisikan semua selektor jQuery yang kita butuhkan :

var owner = $('#owner'),
    cardNumber = $('#cardNumber'),
    cardNumberField = $('#card-number-field'),
    CVV = $("#cvv"),
    mastercard = $("#mastercard"),
    confirmButton = $('#confirm-purchase'),
    visa = $("#visa"),
    amex = $("#amex");

Kemudian, menggunakan Payform.js, kita akan mengubah field input dasar kita menjadi inputan khusus untuk data kartu kredit. Kita hanya perlu memanggil fungsi yang tepat dan library secara otomatis akan menangani format teks dan panjang string maksimum bagi kita :

cardNumber.payform('formatCardNumber');
CVV.payform('formatCardCVC');

Selanjutnya kita ingin dapat memberikan umpan balik real-time kepada pengguna saat mereka mengetik di nomor kartu mereka. Untuk melakukannya kami akan menulis fungsi sederhana yang melakukan dua hal :

  1. Periksa apakah teks field yang diinputkan adalah nomor kartu valid atau tidak. Tambahkan pewarna sesuai dengan bidang teks.
  2. Tergantung pada input karakter ini, lihat jika kartu selain Visa, MasterCard atau American Express. Hal ini dilakukan dengan menggunakan method payform.parseCardType()

Karena kita ingin melakukan eksekusi diatas setiap kali karakter baru yang diketik menggunakan jQUery keyup() event.

cardNumber.keyup(function() {
    amex.removeClass('transparent');
    visa.removeClass('transparent');
    mastercard.removeClass('transparent');

    if ($.payform.validateCardNumber(cardNumber.val()) == false) {
        cardNumberField.removeClass('has-success');
        cardNumberField.addClass('has-error');
    } else {
        cardNumberField.removeClass('has-error');
        cardNumberField.addClass('has-success');
    }

    if ($.payform.parseCardType(cardNumber.val()) == 'visa') {
        mastercard.addClass('transparent');
        amex.addClass('transparent');
    } else if ($.payform.parseCardType(cardNumber.val()) == 'amex') {
        mastercard.addClass('transparent');
        visa.addClass('transparent');
    } else if ($.payform.parseCardType(cardNumber.val()) == 'mastercard') {
        amex.addClass('transparent');
        visa.addClass('transparent');
    }
});

Ada satu hal lagi yang harus kita lakukan adalah memeriksa apakah semua field memegang data yang valid ketika user mencoba untuk mengirimkan form.

Nama validasi bisa sangat rumit. Untuk menjaga pencahayaan pada tutorial ini, kita tidak akan menuju subjek, dan kita hanya akan memeriksa apakah  inputan nama minimal 5 karakter. Payform memberikan metode yang diperlukan untuk memvalidasi sisa formulir.

confirmButton.click(function(e) {
    e.preventDefault();

    var isCardValid = $.payform.validateCardNumber(cardNumber.val());
    var isCvvValid = $.payform.validateCardCVC(CVV.val());

    if(owner.val().length < 5){
        alert("Wrong owner name");
    } else if (!isCardValid) {
        alert("Wrong card number");
    } else if (!isCvvValid) {
        alert("Wrong CVV");
    } else {
        // Everything is correct. Add your form submission code here.
        alert("Everything is correct");
    }
});

Style

Kita akan menggunakan Bootstrap, sehingga sebagian besar styling dilakukan oleh framework. Sebagian besar meliputi field input dan berbagai padding, margin dan font tweak.

styles.css

.creditCardForm {
    max-width: 700px;
    background-color: #fff;
    margin: 100px auto;
    overflow: hidden;
    padding: 25px;
    color: #4c4e56;
}
.creditCardForm label {
    width: 100%;
    margin-bottom: 10px;
}
.creditCardForm .heading h1 {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    color: #4c4e56;
}
.creditCardForm .payment {
    float: left;
    font-size: 18px;
    padding: 10px 25px;
    margin-top: 20px;
    position: relative;
}
.creditCardForm .payment .form-group {
    float: left;
    margin-bottom: 15px;
}
.creditCardForm .payment .form-control {
    line-height: 40px;
    height: auto;
    padding: 0 16px;
}
.creditCardForm .owner {
    width: 63%;
    margin-right: 10px;
}
.creditCardForm .CVV {
    width: 35%;
}
.creditCardForm #card-number-field {
    width: 100%;
}
.creditCardForm #expiration-date {
    width: 49%;
}
.creditCardForm #credit_cards {
    width: 50%;
    margin-top: 25px;
    text-align: right;
}
.creditCardForm #pay-now {
    width: 100%;
    margin-top: 25px;
}
.creditCardForm .payment .btn {
    width: 100%;
    margin-top: 3px;
    font-size: 24px;
    background-color: #2ec4a5;
    color: white;
}
.creditCardForm .payment select {
    padding: 10px;
    margin-right: 15px;
}
.transparent {
    opacity: 0.2;
}
@media(max-width: 650px) {
    .creditCardForm .owner,
    .creditCardForm .CVV,
    .creditCardForm #expiration-date,
    .creditCardForm #credit_cards {
        width: 100%;
    }
    .creditCardForm #credit_cards {
        text-align: left;
    }
}

Tutorial membuat vorm validasi kartu kredit telah selesai semoga bermanfaat. Untuk Demo bisa dilihat pada link berikut

10 Media untuk Berbagi Kode Snippets

Integrated Development Environment (IDE) tool yang cukup kuat sebagai aplikasi online untuk mempercepat dan share potongan kode melalui user interface natural, intuitif dan praktis. Dan terakhir live preview dan jendela terpisah untuk CSS, HTML dan JS serta mencakup berbagai instrumen bermanfaaat seperti pre-install library JavaScript, support dengan bahasa pre-processor, kode generator, tool untuk pekerjaan kolaboratif dan lain-lain.

Kami telah menambahkan list dari 10 media yang luar biasa untuk berbagi potongan kode dengan cepat. Jadi jika Anda sedang kebingungan untuk memulainya, cukup pilih media yang menurut Anda bagus.

Codepad

1-codepad

Codepad adalah platform baru yang cocok untuk developer berbagai bidang. Apakah Anda mengkhususkan diri dalam ActionScript atau C-Sharp, layanan ini akan cocok untuk Anda yang membutuhkan  fasilitas untuk menulis, pengujian, penyimpanan dan share potongan kode Anda secara online.

Tergantung pada kebutuhan Anda dapat membuat snippet untuk publik, pribadi dan swasta mengumpulkannya menjadi satu projek sehingga dapat mengkompilasi koleksi.

Dengan komunitas yang aktif, Anda juga dapat mengikutinya dengan sesama developer, mencari tahu solusi baru dan terinspirasi oleh kreasi lainnya.

Codepen

2-codepen

Codepen adalah favorit pada developer yang menaungi ribuan coders yang antusias dan invensi mereka. Untuk menikmati manfaat tambahan, seperti sharing pribadi Anda harus mendaftar, namun jika Anda perlu dengan cepat menulis kode snipper Anda dapat menekan tombol “New Pen” dan mulai menulis kode.

Tidak hanya tool yang sangat bagus untuk prototyping komponen atau elemen UI dengan bantuan HTML/CSS/JavaScript, tetapi juga sebuah galeri besar secara online dimana Anda dapat menemukan sebuah dorongan dan jawaban untuk masalah Anda. Diantara fitur pentingnya siap digunakan untuk pre-processor sebagai SASS, LESS, Stylus, SCSS, CoffeeScript dan LiveScript.

Github Gist

3-github-gist

Sama seperti contoh sebelumnya, Github Gist adalah salah satu pilihan yang lebih disukai oleh developer ketika tiba untuk membangun proyek-proyek open-sorce. Anda dapat membuat gits umum atau rahasia, disertai dengan potongan kode dengan dokumentasi atau petunjuk dan memperbaruinya setiap kali jika Anda perlu. Terlebih lagi siapapun bisa berkomentar atau menyukai nya.

CSSDeck

4-cssdeck

Dengan lebih dari 40.000 anggota terdaftar, CSSDeck adalah platform terkemuka untuk menulis kode dan berbagi source code. Meskipun dilihat dari nama terkonsentrasi dengan CSS, Anda dapat membangun konsep yang berpusat sekitar HTML dan JavaScript.

Anda tidak harus memiliki akun untuk menggunakannya. Namun demikian, jika Anda ingin menikmati semua fasilitas, Anda akan lebih baik membuat akun dan dalam hal ini gratis.

Codeshare

5-codeshare

Codeshare merupakan hal lain dari “no-sign-up-required” editor frontend yang menawarkan developer dapat bermain dengan antarmuka yang intuitif dan satu set kecil tool bermanfaat. Hanya menulis atau paste kode, share link dengan rekan-rekan dan membahas ataupun memecahkan masalah bersama-sama. Selain itu ada video chat yang didukung oleh WebRTC untuk berkolaborasi secara real-time. Satu-satunya kelemahannya adalah bahwa proyek Anda akan menghilang dari server selama 14 hari.

jsFiddle

6-jsfiddle

jsFiddle masuk langsung to the point. Mejadi salah satu yang pertama diarea ini, tidak ada halaman petunjuk arahan pada halaman utama yang menekankan fitur dari playground atau menunjukan karya orang lain. Namun itu tidak mengapa, yang harus Anda lakukan yaitu menyediakan coders dengan smart board untuk mencampurkan dan mencocokan berbagai teknik untuk mencapai hasil yang diinginkan.

Homepage ini dibagi menjadi empat bagian dimana Anda dapat menulis dalam HTML, CSS dan JavaScript dan melihat efeknya secara realtime. jsFiddle memiliki beberapa kualitas tertentu seperti :

  • Bantuan typescript
  • Auto-saving untuk konsep lokal
  • Library JavaScript
  • Tool kolaborasi untuk tim
  • Cara intuitif dan efisien untuk menghasilkan kode embed dan lainnya.

Codeply

7-codeply

Dengan dukungan yang kuat untuk boilerplates terkenal seperti Bootstrap, Foundation, Materialize, SemanticUI, Skeleton dan beberapa yang lainnya, Codeply adalah tempat yang sangat baik untuk membuat desain responsif, widget dan komponen untuk framework. Anda dapat menggunakan layout standar, potongan dan elemen yang tepat dari editor untuk meningkatkan proyek. Ada juga sebuah galeri online dengan pekerjaan yang dirilis oleh anggotanya.

Dabblet

8-dabblet

Dabblet adalah intrumen besar ketika datang untuk memecah tugas menjadi bagian-bagian yang terpisah dan visualisasi hasil individual. Ada lima jenis yang berbeda dari preview (CSS dan hasil, HTML dan hasil, JS dan hasil  dan gabungan semuanya). Meningkatkan alur kerja dari berbagai sudut. Sayangnya, daftar fitur tidak mengesankan seperti di Codepen.

Namun, Anda dapat memperbaiki hal ini dengan cara manual memasukan semua library yang dibutuhkan. Hal ini sederhana, mudah dan tidak akan melelahkan Anda dengan berbagai tool.

LiveWeave

9-liveweave

LiveWeave memuat dengan :

  • Ton library yang secara teratur diperbarui, mulai dari AngularJS dan berakhir dengan Zepto
  • Generator untuk teks dummy yang diujung jari Anda
  • Mengekspor instrumen
  • Generator kode CSS3
  • Warna dan lab palet
  • Dan tool untuk kerja sama tim

Empat bidang tertata rapih memungkinkan untuk menulis HTML, CSS dan kode JS secara independen dan merenungkan hasil kolaborasi mereka di window preview. Terlebih lagi, jika Anda sakit dan lelah dengan tema default gelap dari UI, Anda dapat beralih ke light skin.

Pastie

10-pastie

Pastie adalah tool primitif yang merupakan alternatif untuk tool share dasar. Jika Anda perlu dengan cepat menyusun potongan kode dan share dengan orang lain. Ia menawarkan antarmuka dengan pengguna yang bersih dengan sintaks yang solid. Hanya mengatur bahasa dan layanan akan melakukan semuanya. Meskipun mungkin tidak bermain tradisional dengan live preview, dukungan untuk pra-prosesor dan pra-instal library, bagaimanapun, masih menggunakan cara yang elegan untuk menulis dan share fragmen kode.

Kesimpulan

Real-time editor yang bekerja dengan bahasa sisi klien, seperti HTML, CSS dan JavaScript adalah bantuan besar bagi pemula dan coders profesional. Apakah Anda perlu untuk menguji teknik baru, menaruh beberapa trik inventif dalam tindakan atau bantuan luar untuk memecahkan masalah, ada tool yang lebih baik. Gratis, fitur tambahan dan kebebasan memilih hanya icing pada kue. Bagaimana? Menurut Anda media yang manakah yang paling cocok dengan kebutuhan Anda? Semoga bermanfaat.

Tutorial Membuat Dropdown Box Menggunakan CSS3 Animation Dengan Sedikit Trik Checkbox

asda

Dalam tutorial ini kita akan membuat dropdown box dengan menggunakan CSS3 Animation dengan sedikit trik checkbox sebagai triggernya, biasanya ini dibuat dengan bantuan JQuery namun berkat CSS3 kita dapat membuat ini dengan properti transtion.

Silahkan lihat demonya disini.

HTML5 Untuk Dropdown Box

Mari kita lihat markup HTML5 untuk tutorial ini dengan lebih detail

<!-- Dropdown box slider -->
<section class="slider">

  <!-- Checkbox, kita akan menggunakan sedikit trik pada checkbox ini -->
  <input type="checkbox" id="toggle">
  <!-- Kita akan buat label ini sebagai pemicu dropdown slider. -->
  <label for="toggle">
    <!-- icon yang digunakan adalah entypo. kalian dapat mengubahnya -->
    <i class="toggle-icon"></i>
  </label>

  <!-- Konten dari dropdown box slider -->
  <section class="main-content">
    <h1>CSS3 Drop down box</h1>
  </section>

</section>

Komentar di atas di buat agar lebih mudah dipahami. Satu hal penting yang perlu ditambahkan disini adalah bahwa penting untuk memunculkan konten setelah checkbox. Kita perlu ini untuk memanfaatkan ~ selector. Selector ini digunakan untuk memilih sebuah elemen yang datang setelah elemen lain . Dalam hal ini kita perlu memilih konten yang datang setelah checkbox.

Jadi, mari kita lakukan styling.

Trik Checkbox Sebagai Pemicu Dropdown Box

Jadi, mari kita lihat bagaimana kita mengubah checkbox dan label menjadi tombol aktivasi yang terlihat bagus. Pertama-tama, kita menggunakan ikon dari webfont entypo sebagai contoh. Kita gunakan down arrow untuk posisi unchecked, dan up arrow untuk posisi checked.

input#toggle + label i.toggle-icon:before {
  font-family: 'entypo', sans-serif;
  content: "\e764";
}

input#toggle:checked + label i.toggle-icon:before {
  content: "\e767";
}

 Sekarang tentu saja kita perlu menyembunyikan checkbox dan menambahkan beberapa styling ekstra untuk label. Hal ini penting untuk menginisialisasi atas menjadi 0 pada label agar animasi bekerja. Atau anda bisa menggunakan properti transform untuk animasinya.

.slider input#toggle {
  display: none;
}

.slider input#toggle + label {
  font-size: 25px;
  width: 25px;
  height: 25px;
  display: inline-block;
  padding: 10px;
  color: white;
  background: #8f2c2c;
  position: relative;
  top: 0;
  transition: top 0.5s ease-in-out;
}

 Di properti transition ini kita definisikan properti agar animasi berfungsi, kecepatan, dan fungsi dari transisinya. Dan disini ada beberapa styling umum untuk slider dan konten.

.slider {
  width: 600px;
  text-align: center;
  margin: 0 auto;
}

.slider .main-content {
  background: #eee;
  height: 150px;
  position: relative;
  top: -195px;
  transition: top 0.5s ease-in-out;
}

.slider .main-content h1 {
  line-height: 150px;
  color: #30303f;
  width: 100%;
  text-stroke: 1px;
  font-size: 30px;
  text-shadow: 0 1px 1px #000;
  font-family: "Roboto"
}

 Membuat Animasi Dropdown Box Dengan CSS3

Sekarang mari kita lihat betapa mudahnya untuk membuat animasi dropdown box berfungsi seperti ditarik:

input#toggle:checked + label {
  top: 150px;
}

input#toggle:checked ~ .main-content {
  top: -45px;
}

 Apa yang kita lakukan disini adalah mengatur posisi label checkbox dan konten dari dropdown box. Perubahan properti ini akan memiliki animasi seperti yang ditentukan oleh properti transition yang kita definisikan sebelumnya. Perlu di perhatikan bagaimana kita menggunakan ~ selector untuk menargetkan class .main-content yang muncul setelah checkbox.

Sekian tutorial kali ini, kalian bisa lihat demonya disini.

Terimakasih.

Efek Animasi Kata Pada Text Dengan CSS Animations

ta

Dalam tutorial hari ini kita akan membuat efek tipografi. Idenya adalah untuk membuat animasi pada beberapa kata. Kata-kata itu akan bertukar dengan Kata lainnya menggunakan Animation pada CSS.

Harap dicatat: Hasil tutorial ini hanya akan bekerja pada browser yang mendukung CSS Animations.

Hasil akhirnya bisa kalian lihat disini.

Markup HTML

Disini kita akan memiliki wrapper utama dengan h2 heading yang berisi span tingkat pertama dan 2 divisi untuk kata yang akan diberi animasi:

<section class="rw-wrapper">
  <h2 class="rw-sentence">
    <span>Real poetry is like</span>
    <span>creating</span>
    <div class="rw-words rw-words-1">
      <span>breathtaking moments</span>
      <span>lovely sounds</span>
      <span>incredible magic</span>
      <span>unseen experiences</span>
      <span>happy feelings</span>
      <span>beautiful butterflies</span>
    </div>
    <br />
    <span>with a silent touch of</span>
    <div class="rw-words rw-words-2">
      <span>sugar</span>
      <span>spice</span>
      <span>colors</span>
      <span>happiness</span>
      <span>wonder</span>
      <span>happiness</span>
    </div>
  </h2>
</section>

Sekarang, abaikan placeholder, kita buat setiap span dari rw-word untuk tampil pada waktu yang ditentukan. Untuk itu kita akan menggunakan CSS Animations. Kita akan membuat satu animasi untuk setiap divisi dan setiap span akan menjalankannya, hanya dengan penundaan yang berbeda. Jadi, mari kita lihat CSS berikut ini.

CSS3

Pertama, kita beri style untuk wrapper utama dan posisikan ditengah halaman:

.rw-wrapper{
  width: 80%;
  position: relative;
  margin: 110px auto 0 auto;
  font-family: 'Bree Serif';
  padding: 10px;
}

Kita akan tambahkan beberapa text shadow ke semua elemen di dalam heading:

.rw-sentence{
  margin: 0;
  text-align: left;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

Dan lakukan styling pada teks pada span:

.rw-sentence span{
  color: #444;
  white-space: nowrap;
  font-size: 200%;
  font-weight: normal;
}

Divisi akan ditampilkan sebagai elemen inline, yang akan memungkinkan kita untuk memasukkan mereka ke dalam kalimat tanpa merusak kalimatnya:

.rw-words{
  display: inline;
  text-indent: 10px;
}

Setiap span dalam div rw-word akan diposisikan absolute dan kita sembunyikan setiap overflow:

.rw-words span{
  position: absolute;
  opacity: 0;
  overflow: hidden;
  width: 100%;
  color: #6b969d;
}

Sekarang, kita akan menjalankan 2 animasi. Seperti yang disebutkan sebelumnya, kita akan menjalankan animasi yang sama untuk semua span dalam 1 div, hanya dengan penundaan/delay yang berbeda:

.rw-words-1 span{
  animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
  animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
  animation-delay: 3s; 
  color: #6b889d;
}
.rw-words span:nth-child(3) { 
  animation-delay: 6s; 
  color: #6b739d;	
}
.rw-words span:nth-child(4) { 
  animation-delay: 9s; 
  color: #7a6b9d;
}
.rw-words span:nth-child(5) { 
  animation-delay: 12s; 
  color: #8d6b9d;
}
.rw-words span:nth-child(6) {  
  animation-delay: 15s; 
  color: #9b6b9d;
}

Animasi yang kita buat akan menjalankan satu siklus, yang berarti bahwa setiap span akan ditampilkan sekali selama 3 detik delay/penundaan. Semua animasi akan berjalan 6 (jumlah kata) * 3 (waktu tampil) = 18 detik. Kita perlu mengatur pesentase yang tepat untuk nilai opacity(atau apapun yang membuat span muncul). Dengan membagi 6 dengan 18 kita dapatkan hasil 0,333… yang akan  menjadi 33% untuk langkah keyframenya. Setelah tweaking dan melihat apa yang paling cocok, kita buat dengan animasi berikut untuk kata-kata pertama:

@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
  25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}

Kita akan buat itu memudar/fade di dalam span dan juga buat animasi untuk tingginya.

Animasi untuk kata yang ada didalam div kedua akan memudar dan menganimasikan widthnya. Kita tambahkan sedikit untuk persentase keyframe, karena kita ingin kata ini muncul sedikit lebih lambat dari kata pertama:

@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
  20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

Dengan demikian animasinya akan berjalan dengan lancar, kalian juga bisa mencoba CSS Animation yang lain. Hasilnya bisa kalian lihat disini.

Sekian tutorial hari ini. Terima kasih..

Tutorial Membuat Accordion Menggunakan CSS3

accordion

Ada banyak variasi dari akordion yang dibuat hanya dengan CSS saja, sebagian besar dibuat menggunakan pseudo-class :target. Masalah dengan menggunakan :target adalah kita tidak benar-benar bisa menutup bagian kontennya lagi atau memiliki beberapa bagian yang terbuka bersamaan. Dengan menggunakan checkbox yang disembunyikan(hidden), kita dapat mengontrol terbuka atau tertutupnya bagian konten. Atau, kita juga bisa menggunakan radiobox jika hanya 1 bagian konten yang ingin kita buka. Kali ini, kita akan mencoba menggunakan checkbox. mari kita mulai..

Harap dicatat: hasil dari tutorial ini hanya akan bekerja pada browser yang support CSS3 ya. Jadi bagi kalian yang mencobanya pada IE9 atau dibawahnya, mungkin akan ada beberapa yang tidak berfungsi.

Untuk hasilnya kalian bisa lihat disini.

Markup HTML

Kita akan menggunakan contoh checkbox dimana bagian kontennya terbuka secara default/otomatis (‘checked’ pada checkbox) semuanya akan kita bungkus(wrap) dengan class ac-container. Untuk setiap item akan memiliki checkbox, label, dan artikel yang merupakan bagian konten dari item tersebut:

<section class="ac-container">
  <div>
    <input id="ac-1" name="accordion-1" type="checkbox" checked />
    <label for="ac-1">Tentang Kami</label>
    <article class="ac-small">
      <p>Konten.... </p>
    </article>
  </div>
  <div>
    <input id="ac-2" name="accordion-1" type="checkbox" />
    <label for="ac-2">Bagaimana Kami Bekerja</label>
    <article class="ac-small">
      <p>Konten.... </p>
    </article>
  </div>
  <div>
    <input id="ac-3" name="accordion-1" type="checkbox" />
    <label for="ac-3">Referensi</label>
    <article class="ac-small">
      <p>Konten.... </p>
    </article>
  </div>
  <div>
    <input id="ac-4" name="accordion-1" type="checkbox" />
    <label for="ac-4">Kontak Kami</label>
    <article class="ac-small">
      <p>Konten.... </p>
    </article>
  </div>
</section>

Perhatikan bahwa kita perlu memberikan ID pada setiap input yang akan kita gunakan untuk atribut label. Kita perlu ini untuk memeriksa checkbox ketika mengklik label.

Setiap artikel akan memiliki class yang akan membantu kita menentukan tinggi yang akan kita tambah. (Secara optional, kita bisa menggunakan ‘auto’ sebagai nilai tinggi yang ditambah, tapi sayangnya itu tidak akan memiliki animasi seperti itu).

Mari kita liat Stylenya.

CSS

Mari kita definisikan lebar untuk accordion:

.ac-container{
  width: 400px;
  margin: 10px auto 30px auto;
}

Selanjutnya, kita akan membuat label sebagai tombol yang dapat kita klik. Kita juga akan mengatur z-index ke 20, untuk memastikan itu berada di atas bagian konten:

.ac-container label{
  font-family: 'Segoe UI';
  padding: 5px 20px;
  position: relative;
  z-index: 20;
  display: block;
  height: 30px;
  cursor: pointer;
  color: white;
  line-height: 33px;
  font-size: 19px;
  background: #3498db;
  border: 1px solid #bdc3c7;
}

Pada saat dihover, kita akan buat label menjadi berwarna biru sedikit gelap:

.ac-container label:hover{
  background: #2980b9;
}

Ketika kita klik pada label, checkbox menjadi checked dan ketika itu terjadi kita buat style label yang terpilih tadi dengan style ‘selected’ seperti ini:

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
  background: #2980b9;
  color: white;
}

Seperti yang kalian lihat, kita menggunakan combinator yang berdekatan untuk memilih label karena langsung didahului oleh input checkbox.

Mari kita tambakan  ikon arrow kecil pada saat dihover. Untuk itu kita hanya akan menggunakan pseudo-class ‘after’ sehingga tidak usah menambahkan markup yang tidak dibutuhkan:

.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  right: 13px;
  top: 7px;
  background: transparent url(arrow_down.png) no-repeat center center;	
}

untuk ‘selected’ item, kita tambahkan icon arrow yang menunjuk ke atas:

.ac-container input:checked + label:hover:after{
  background-image: url(arrow_up.png);
}

Dan karena kita tidak ingin input ditampilkan, kita akan menyembunyikannya:

.ac-container input{
  display: none;
}

 Area konten akan memiliki tinggi awal 0px dan setiap overflow akan kita hidden. Kita juga akan menambahkan transisi untuk tinggi kotaknya. Transisi yang kita tambahkan disini akan bertindak ‘closing'(menutup) item. Kita mendefinisikan transisi yang lain untuk item yang dipilih. Jadi pada dasarnya kita dapat mengontrol dua action dengan melakukan ini. Seperti yang kalian lihat, kami akan membuat transisi menutup sedikit lebih cepat dari pada saat membuka.

.ac-container article{
  background: white;
  margin-top: -1px;
  overflow: hidden;
  height: 0px;
  position: relative;
  z-index: 10;
  transition: 
    height 0.3s ease-in-out, 
    box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
  transition: 
    height 0.5s ease-in-out, 
    box-shadow 0.1s linear;
  border: 1px solid rgba(155,155,155,0.3);
}

Mari kita beri sedikit style pada konten:

.ac-container article p{
  font-style: italic;
  color: #777;
  line-height: 23px;
  font-size: 14px;
  padding: 20px;
}

Sekarang kita beri tinggi area konten, animasi dari transisi akan seukuran tinggi ini:

.ac-container input:checked ~ article.ac-small{
  height: 140px;
}

Seperti yang telah disebutkan, tinggi ‘auto’ tentunya menjadi pilihan terbaik disini, tapi karena kita tidak dapat mambuat animasi pada itu, kita perlu mengatur beberapa tinggi untuk transisinya.

Dengan begitu selesailah proses pembuatan accordionnya, Silahkan lihat hasilnya disini.

Dan demikianlah Tutorial membuat accordion menggunakan CSS3. Saya harap kalian menikmatinya. Terima Kasih…

Tutorial Membuat Efek Hover Pada Gambar Menggunakan CSS3

hvr

Dalam dunia web yang modern, ada banyak teknik yang dapat digunakan untuk membuat interface dan interaksi website yang menarik, tapi yang paling sederhana dan paling elegan biasanya CSS, dan khususnya CSS3 dengan berbagai fitur baru.

Dulu, kita harus bergantung pada javascript untuk membuat efek seperti ini, namun dengan semakin meningkatnya support untuk CSS3 di browser, sekarang kita bisa membuat efek seperti ini tanpa scripting sama sekali. Sayangnya IE9(Internet Explorer 9) dan versi dibawahnya masih tidak support CSS3.

Kali ini kita akan membuat efek hover pada gambar yang menyembunyikan caption sebelum gambar itu di hover.

Kalian bisa melihat demonya disini.

Markup HTML

Kita akan menggunakan unordered list lalu kita wrap caption dan gambar didalamnya, perhatikan bahwa kita juga akan menambah class demo dan efek dalam tag unordered list. kita akan membuat efek kartu yang membalik. Ini berarti ketika Anda hover mouse Anda pada gambar itu, maka gambar akan berputar membalik untuk menampilkan caption, Kita juga akan menggunakan HTML5 figure element dengan tag figure caption didalamnya, markupnya akan terlihat seperti ini:

<ul class="demo">
   <li>
      <figure>
         <img src="image1.jpg" alt=""/>
         <figcaption>
            <h2>Ini Judul</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
         </figcaption>
      </figure>          
   </li>
</ul>

CSS

Pada CSSnya, Kita akan menetapkan figure gambar ke posisi relatif dan kemudian menyembunyikan backface-visibility. Kita juga akan menggunakan rotateY transform: -180 derajat(degrees) untuk figcaption dan mengubahnya ke 180 derajat untuk hover dari gambar dan caption:

body {
    background:#3498db;
    overflow: hidden;
}


ul {
    margin:12px auto;
    width:30%;
}

ul li {
    display: inline-block;
    list-style: none;
    margin:0 10px;

}
.demo {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px
}

.demo figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    margin-left:-50px
}

.demo figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:-15px 0
}

.demo figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

.demo figure h2 {
    font-family:'Lato';
    color:#fff;
    font-size:20px;
    text-align:left
}

.demo figure p {
    display:block;
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left
}

.demo figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:29px 44px;
    background-color:rgba(26,76,110,0.5);
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}

.demo figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}

.demo figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}

.demo figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}

Dengan demikian kitaberhasil membuat efek hover kartu membalik pada gambar. untuk previewnya bisa dilihat disini.

Sekian tutorial membuat efek hover pada gambar menggunakan CSS3. Terima kasih..

Membuat Drop Down Menu dengan Search Box di CSS dan HTML

Dalam tutorial ini, kita akan membuat menu flat style dengan kotak pencarian atau search box dan menu dropdown dari Square UI.

flatnav

HTML

Navigasi terdiri dari list unordered (.nav) yang mengandung berbagai jenis unsur didalamnya :

  • List items(LIs) yang berisi link yang normal tidak memiliki id/class
  • #setting berisi link berbasis gambar
  • #search berisi kolom pencarian bersama dengan tombol submit
  • #options berisi link serta list unordered (.subnav) yang bertindak sebagai dropdown

Pada akhirnya kita masukan prefixfree yang memungkinkan kita menggunakan unprefixed properti CSS dimana-mana.

<ul class="nav">
    <li id="settings">
        <a href="#"><img src="settings.png" /></a>
    </li>
    <li>
        <a href="#">Application</a>
    </li>
    <li>
        <a href="#">Board</a>
    </li>
    <li id="search">
        <form action="" method="get">
            <input type="text" name="search_text" id="search_text" placeholder="Search"/>
            <input type="button" name="search_button" id="search_button"></a>
        </form>
    </li>
    <li id="options">
        <a href="#">Options</a>
        <ul class="subnav">
            <li><a href="#">Settings</a></li>
            <li><a href="#">Application</a></li>
            <li><a href="#">Board</a></li>
            <li><a href="#">Options</a></li>
        </ul>
    </li>
</ul>
 
<script src="prefixfree-1.0.7.js" type="text/javascript"></script>

CSS

1.Basic Style

@import url(http://fonts.googleapis.com/css?family=Montserrat);
 
* {
    margin: 0;
    padding: 0;
}

Kita mulai dengan CSS dasar reset dan import font custom ‘Montserrat’ dari Google Font.

2. Navigation dan List Item

.nav {
    background: #232323;
    height: 60px;
    display: inline-block;
}
 
.nav li {
    float: left;
    list-style-type: none;
    position: relative;
}

Elemen navigasi utama memiliki background abu-abu gelap dan height. List item float kiri dan diposisikan relatif sehingga dapat berisi menu dropdown yang benar-benar diposisikan di kemudian hari.

3.Link

.nav li a {
    font-size: 16px;
    color: white;
    display: block;
    line-height: 60px;
    padding: 0 26px;
    text-decoration: none;
    border-left: 1px solid #2e2e2e;
    font-family: Montserrat, sans-serif;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav li a:hover {
    background-color: #2e2e2e;
}
 
#settings a {
    padding: 18px;
    height: 24px;
    font-size: 10px;
    line-height: 24px;
}

Link memiliki styling dasar. Mereka menggunakan font Montserrat yang kita impor sebelumnya dari Google Font. Sebuah cahaya putih halus ditambahkan untuk membuat teks halus dan tebal. Link memiliki line height 60px yang sama dengan .nav.

Link juga memiliki efek hover dimana background diubah ke versi yang lebih ringan dari background abu-abu.

#settings berisi link gambar dengan demikian tata letaknya disesuaikan untuk membuat ikon pengaturan muncul di tengah.

4. Search Box

search

#search {
    width: 357px;
    margin: 4px;
}
#search_text{
    width: 297px;
    padding: 15px 0 15px 20px;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    border: 0 none;
    height: 52px;
    margin-right: 0;
    color: white;
    outline: none;
    background: #1f7f5c;
    float: left;
    box-sizing: border-box;
    transition: all 0.15s;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color: white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: white;
}
#search_text:focus {
    background: rgb(64, 151, 119);
}
#search_button {
    border: 0 none;
    background: #1f7f5c url(search.png) center no-repeat;
    width: 60px;
    float: left;
    padding: 0;
    text-align: center;
    height: 52px;
    cursor: pointer;
}

#search disediakan dengan width 357px dan margin sekitarnya 4px.

#search_text float kekiri dan disediakan dengan background hijau yang menghidupkan suasana menjadi lebih terang dihover.

#search_button juga melayang kekiri untuk membuatnya sejajar dengan #search_text horizontal. Ini menggunakan icon pencarian sebagai latar belakang yang diposisikan posisinya.

5. Dropdown

flatnav1

#options a{
    border-left: 0 none;
}
#options>a {
    background-image: url(triangle.png);
    background-position: 85% center;
    background-repeat: no-repeat;
    padding-right: 42px;
}
.subnav {
    visibility: hidden;
    position: absolute;
    top: 110%;
    right: 0;
    width: 200px;
    height: auto;
    opacity: 0;
    transition: all 0.1s;
    background: #232323;
}
.subnav li {
    float: none;
}
.subnav li a {
    border-bottom: 1px solid #2e2e2e;
}
#options:hover .subnav {
    visibility: visible;
    top: 100%;
    opacity: 1;
}

#options yang berisi dropdown diberi icon segitiga sebagai background di sebelah kanan untuk membuatnya lebih intuitif.

.subnav tersembunyi secara default menggunakan kombinasi visibilitas CSS dan sifat opacity. Diposisikan top 110% . Saat membawa perubahan top ke 100% bersama dengan opacity dan visibilitas properti memberikan efek hover keren untuk menu dropdown.

DEMO

Tips cepat: Tutorial Membuat Efek Hover Dengan Gambar Lingkaran(Circle) Menggunakan CSS3

crcl

Dalam tutorial ini kita akan coba membuat efek hover CSS3 menggunakan animation dan transform gambar lingkaran(circle) untuk meningkatkan interface desain web kalian. Ini terlihat jauh lebih menarik dengan menggunakan transition style pada gambar. efek transisi/animasi ini full menggunakan CSS3 tanpa Javascript/JQuery, jadi kali ini kita akan membuat efek hover spesial pada CSS3.

Perlu dicatat ini hanya akan bekerja/berfungsi dengan baik pada browser yang support CSS3.

Kalian bisa melihat preview/demonya disini

Mari kita mulai dengan markup HTML

Struktur markupnya kurang lebih terlihat seperti ini :

<div id="skin">
   <p class="icon"></p>
   <a href="http://trustme.co.id/" class="fdw_left">Kiri</a>
   <a href="http://trustme.co.id/" class="fdw_right">Kanan</a>
</div>

 CSS

Dan CSS nya memiliki struktur seperti ini :

#skin {
  position:relative;
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  border:10px solid rgba(255,255,255,.10);
  width:284px;
  height:284px;
  overflow:hidden;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s  ease;
  -o-transition: all .3s  ease;
  -ms-transition: all .3s  ease;
  transition: all .3s ease;
}
.fdw_left,
.fdw_right {
  float:left;
  width:50%;
  height:100%;
  margin:0;
  text-align:center;
  line-height:280px;
  text-decoration:none;
}
.fdw_right {
  border-radius:0 142px 142px 0;
  -moz-border-radius:0 142px 142px 0;
  -webkit-border-radius:0 142px 142px 0;
}
.fdw_left {
  background-color:#fff;
  border-radius:142px 0 0 142px;
  -moz-border-radius:142px 0 0 142px;
  -webkit-border-radius:142px 0 0 142px;
  color:#1e2a2a;
  text-indent:-30px;
}
.fdw_right {
  background-color:#1e2a2a;
  color:#FFFFFF;
  text-indent:35px;
}
#skin .icon {
  width:71px;
  height:77px;
  position:absolute;
  top:50%;
  left:50%;
  margin:-39px auto 0 -35px;
  background: url(a.png) top center no-repeat;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s  ease-in-out;
  -o-transition: all .3s  ease-in-out;
  -ms-transition: all .3s  ease-in-out;
  transition: all .3s ease-in-out;
}
#skin a {
  font-weight:700;
  font-family: 'Open Sans Condensed','Arial Narrow', Arial, sans-serif;
  text-decoration:none;
  text-transform:uppercase;
  font-size:20px;
  -webkit-transition: background-color .3s;
  -moz-transition: background-color .3s;
  -o-transition: background-color .3s;
  -ms-transition: background-color .3s;
  transition: background-color .3s;
}
#skin a:hover {
  background-color:#00b68f;
  color:#FFF;
}
#skin:hover {
  border:10px solid rgba(255,255,255,.5);
}
#skin:hover .icon {
  transform: rotate(360deg);
  -ms-transform: rotate(360deg); /* IE 9 */
  -webkit-transform: rotate(360deg); /* Safari and Chrome */
  background: url(b.png) top center no-repeat;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s  ease-in-out;
  -o-transition: all .3s  ease-in-out;
  -ms-transition: all .3s  ease-in-out;
  transition: all .3s ease-in-out;
}

 Nah, sekarang kita sudah berhasil membuat efek hover CSS3 dengan gambar lingkaran(circle).

Lihat demonya disini

Sekian tutorial Membuat Efek Hover Dengan Gambar Lingkaran(Circle) Menggunakan CSS3. Semoga bisa membantu. Terima kasih..