Posts

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.

Pure.css Menawarkan Alternatif dari Bootstrap

Apa sih Pure.css itu?

Sementara ini Bootstrap telah mengambil alih sebagian besar web besar, dapat menempatkan sedikit beban kinerja di situs yang mungkin tidak diperlukan untuk proyek berikutnya. Pure.css adalah framework responsif Yahoo yang menawarkan tampilan yang minimalis, terdokumentasi dengan baik dan alternatif yang fleksibel.

Dalam tutorial ini, kita akan memperkenalkan kepada Anda tentang Pure “sebuah set kecil modul CSS responsif yang dapat Anda gunakan dalam setiap proyek web”. Kita akan meninjau serangkaian fitur dan keuntungan menggunakan Pure dan kemudian menjalankannya melalui beberapa contoh penggunaan dasar.

Memilih Platform

Pure menawarkan semua fitur-fitur umum yang Anda butuhkan dalam desain framework web standar. Jadi, apakah Anda sedang membangun sebuah tema untuk WordPress atau custom website Anda sendiri, Pure bisa menjadi pilihan yang baik.

Untuk manajer proyek, biasanya penting bahwa proyek-proyek klien dibangun dengan tool standar yang dapat dengan mudah dipahami dan dipelihara, dan yang paling penting, bahwa itu tidak mudah dalam perekrutan bakat yang datang dengan pengalaman dalam platform Anda. Bootstrap sangat cocok digunakan. Pure tampaknya cukup sederhana juga dapat menjadi titik awal yang baik.

Ringkasan Fitur Pure

Berikut adalah ringkasan dari manfaat dan fitur Pure.

  • Dapat dicustom, grid responsif
  • Menu built-in vertikal dan horisontal, termasuk menu drop-down
  • Button yang bekerja dengan elemen <a> dan <button>
  • Form alignment yang fleksibel
  • Style table umum
  • Bersih, tampilan minimalis yang dapat dengan mudah diperluas

Namun yang paling mengagumkan, Pure.css super kecil, hanya 4,5 KB minified+gzip. Berikut berapa banyak ruang komponen yang berbeda dari pure ambil di lingkungan produksi Anda:

module sizes

Pure juga diuji dengan baik dan berjalan di IE 8+, Firefox, Chrome, Safari, iOS 6-8, and Android 4.x.

Dan Anda masih dapat menggunakannya dengan unsur-unsur dari Bootstrap, menambahkannya dimana Anda perlukan. Kami akan menunjukan contoh dibawah ini:

Pure dibangun pada Normalize.css, yang menstandarisasikan kinerja framework ini di browser. Menormalkannya disediakan reset default CSS :

  • Mempertahankan default useful
  • Menormalkan style untuk berbagai elemen
  • Mengoreksi bug dan ketidaksesuaian browser umum
  • Meningkatkan kegunaan dengan perbaikan halus
  • Menjelaskan kode menggunakan komentar secara rinci

Memulai dengan Pure

Website Pure dibangun dengan framework, sehingga minimalis, kodenya berkembang dengan baik membuat sederhana untuk menavigasinya, mudah untuk menggunakan panduan. Berikut ini adalah contoh dari menu kiri Pure dalam action :

get started

Anda dapat menambahkan Pure ke halaman Anda melalui Yahoo CDN gratis. Cukup tambahkan elemen <link> berikut ke halaman <head> Anda, sebelum stylesheet proyek Anda:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">

Untuk menginisialisasi lebar responsif dari website Anda, menetapkan tag meta untuk viewport untuk lebar perangkat Anda:

<meta name="viewport" content="width=device-width, initial-scale=1">

Layout

Pada halaman layoutnya, Pure menawarkan pengambilan sample yang bisa didownload misalnya halaman yang berbeda untuk kebutuhan aplikasi umum:

samples (1)

Anda dapat browsing dan download salah satunya yang Anda inginkan untuk bereksperimen dengan menambahkannya pada aplikasi Anda.

  • Blog
  • Email
  • Gallery photo
  • Landing page
  • Gallery harga
  • Responsif side menu
  • Responsif menu horizontal-to-vertikal
  • Responsif menu horizontal-to- Scrollable

Basis pure

Halaman dasar(basis) memberikan background singkat tentang dasar bawahnya framework Pure, terutama Normalize.css :

Normalize.css adalah file CSS kecil yang menyedikan konsistensi lintas browser yang lebih baik dalam styling default elemen HTML. Juga modern, HTML5-ready, alternatif untuk reset CSS tradisional

Anda juga dapat memuat Normalize secara terpisah menggunakan Yahoo CDN untuk penggunaan independen:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/base-min.css">

Dan ada fitur dasar kecil lainnya seperti class untuk memberitahu Pure untuk memuat gambar responsif dengan viewport :

<img class="pure-img" src="...">

Tapi sekarang, mari kita lihat beberapa contoh layout Pure yang disediakan.

Grid

Grid merupakan aspek utama dari layout website Pure membuatnya cukup sederhana. Berikut adalah contoh singkat dari empat kolom box Pure pada layar dekstop:

grid-100

Dan inilah cara memperkecil pada viewport tablet ukuran setengah :

grid-50

Dan terakhir, satu kolom pada smartphone:

grid-25

Pure grid terdiri dari dua jenis class: grid dan unit. Anak elemen dari div grid harus div unit. Konten Anda berjalan didalam satuan div. Class unit diberi nama untuk mewakili lebarnya. Misalnya, pure-u-1-4 memiliki lebar 25%.

Berikut kode untuk keempat responsif diatas :

<div class="grids-example">
    <div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Lorem Ipsum</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </p>
        </div>
    </div>
 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Dolor Sit Amet</h3>
            <p>
                Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
            </p>
        </div>
    </div>
 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Proident laborum</h3>
            <p>
                In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
            </p>
        </div>
    </div>
 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Praesent consectetur</h3>
            <p>
               Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.
            </p>
        </div>
    </div>

Seperti yang Anda lihat diatas, <div class=”pure-g”> mewakili class grid luar. Kemudian <div class=”pure-u-1 pure-u-md-1-2 pure-u-lg-1-4″> menginstruksikan browser untuk menunjukan satu kolom untuk viewport minimum, setengah kolom untuk medium dan kolom keempat untuk lebih lebar lagi.

Anda dapat mempelajari lebih lanjut tentang grid Pure disini.

Form

multi-column

Pure memiliki dukungan untuk menyelaraskan field input dalam form dan untuk styling field khusus, seperti :

  • Form inline
  • Form stacked
  • Form dua kolom
  • Form multi kolom
  • Input grouped
  • Input required
  • Input disabled
  • Input readonly
  • Input rounded
  • Checkbox dan radio

Anda dapat melihat semuanya disini. Mari kita menjelajahi dua form kolom, Pure yang mengacu sebagai align form:

two-column

Dengan menggunakan class pure-form-aligned dengan pure-control-group(s), Pure memastikan bahwa setiap set field benar diposisinya seperti yang ditunjukan diatas.

<form class="pure-form pure-form-aligned">
    <fieldset>
        <div class="pure-control-group">
            <label for="name">Username</label>
            <input id="name" type="text" placeholder="Username">
        </div>
 
        <div class="pure-control-group">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Password">
        </div>
 
        <div class="pure-control-group">
            <label for="email">Email Address</label>
            <input id="email" type="email" placeholder="Email Address">
        </div>
 
        <div class="pure-control-group">
            <label for="foo">Supercalifragilistic Label</label>
            <input id="foo" type="text" placeholder="Enter something here...">
        </div>
 
        <div class="pure-controls">
            <label for="cb" class="pure-checkbox">
                <input id="cb" type="checkbox"> I've read the terms and conditions
            </label>
 
            <button type="submit" class="pure-button pure-button-primary">Submit</button>
        </div>
    </fieldset>
</form>

Ini adalah cara yang cukup sederhana untuk membangunnya sangat bermanfaat, baik meletakan form.

Table

Membuat pure build dan format table cukup mudah juga. Berikut ini adalah contoh dari table bergaris horisontal:

table striped

Anda dapat melihat kode table diatas hanya dengan menambahkan class baris pure-table-odd bergantioan melalui kode Anda untuk mengubah striping:

<table class="pure-table">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
        </tr>
    </thead>
 
    <tbody>
        <tr class="pure-table-odd">
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>
 
        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>
 
        <tr class="pure-table-odd">
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>
 
        <tr>
            <td>4</td>
            <td>Ford</td>
            <td>Focus</td>
            <td>2008</td>
        </tr>
 
        <tr class="pure-table-odd">
            <td>5</td>
            <td>Nissan</td>
            <td>Sentra</td>
            <td>2011</td>
        </tr>
 
        <tr>
            <td>6</td>
            <td>BMW</td>
            <td>M3</td>
            <td>2009</td>
        </tr>
 
        <tr class="pure-table-odd">
            <td>7</td>
            <td>Honda</td>
            <td>Civic</td>
            <td>2010</td>
        </tr>
 
        <tr>
            <td>8</td>
            <td>Kia</td>
            <td>Soul</td>
            <td>2010</td>
        </tr>
    </tbody>
</table>

Ada sejumlah contoh table lainnya yang ditampilkan disini.

Menu

Menu di Pure juga mudah difasilitasi, termasuk :

  • Menu vertikal
  • Menu horizontal
  • Selected dan disabled item
  • Dropdown
  • Menu vertikal dengan Submenu
  • Scroll horizontal menu
  • Scroll vertikal menu
  • Responsif menu vertikal
  • Responsif menu Horizontal-Scrollable
  • Responsif menu Horizontal-to-Vertical

Lihat semua menu yang diilustrasikan disini. Berikut adalah bagaimana kode Anda jika ingin membuat Dropdown menu:

dropdown menu

Pada dasarnya, hanya pure-menu-horizontal, pure-menu-list dan pure-menu-item pure-menu-has-children pure-menu-allow-hover dan kemudian daftar anak item menu.

<div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
            <a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
            <ul class="pure-menu-children">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>
            </ul>
        </li>
    </ul>
</div>

Pure memberikan contoh JavaScript untuk menerapkan fitur aksesibilitas tambahan dalam menu Anda.

Info lebih lanjut

Pure website menyediakan beberapa panduan yang sangat baik untuk membangun framework:

Dan Anda dapat menjelajahi kombinasi potongan-potongan dari Pure dengan Bootstrap dan JavaScript. Jika Anda ingin memulai dengan Pure footprint kecil dan style minimalis, Anda masih dapat memanfaatkan berbagai fitur Bootstrap, hanya memuat apa yang Anda butuhkan.

Berikut ini adalah contoh modal dialog Bootstrap dalam Pure, yang dapat Anda lihat pada halaman ekstensi Pure ini:

bootstrap w pure

Semoga bermanfaat

Mengetahui Properti CSS Object Fit dan Position

Dalam postingan kali ini kita akan membahas postingan tentang dua properti CSS yang tidak banyak developer web ketahui. Dua properti tersebut adalah object-fit dan object-position dan keduanya harus dilakukan dengan styling gambar dan video.

Pertama, kita akan menunjukan kepada Anda bagaimana menggunakannya dan membahasnya secara detail yang mencakup semua spesifikasi penting. Setelah itu, kami telah menyiapkan demo kecil dimana Anda dapat memainkan properti dan melihatnya beraksi. Lets go mari kita mulai…..

Object-fit

Dengan object-fit kita bisa mengatasi bagaimana sebuah gambar (atau video) membesar atau mengecilkannya sendiri untuk mengisi box konten. Hal ini diperlukan ketika sebuah foto yang kita miliki mempunyai ukuran atau aspek yang berbeda rasio dari tempat yang ditunjuk sebagai sebuah layout.

Secara tradisional, untuk memecahkan masalah ini kita akan membuat div dan mengatur background-image dan background-size. CSS modern bagaimanapun memungkinkan kita untuk menambahkan tag gambar, mengatur source tersebut secara biasa dan kemudian menerapkan object-fit langsung ke selector image:

img {
    width: 100%;
    object-fit: cover;
}

Kemungkinan value yang diterima adalah :

  • Fill (default) – lebar dan tinggi gambar sesuai dengan kotak. Sebagian besar waktu akan mengacaukan aspek rasionya.
  • Cover – gambar menyimpan aspek rasio dan mengisi seluruh kotak, bagian itu terpotong dan tidak akan ditampilkan.
  • Contain – gambar menyimpan aspek rasio dan membesar/menyusut untuk memuat didalam kotak.
  • None – ukuran asli dan aspek rasio
  • Scale-down – menampilkan seperti salah satu diatas, bergantung pada yang menghasilkan ukuran gambar terkecil.

Object-position

Properti ini mendefinisikan keberadaan dalam wadah gambar akan diposisikan. Dibutuhkan dua nilai numerik, satu untuk sumbu atas-bawah dan satu lagi untuk sumbu kiri-kanan.

Angka-angka ini bisa dalam presentase, pixel atau unit pengukuran lainnya, dan dapat bernilai negatif. Beberapa kata kunci seperti center, top, right, dll dapat digunakan juga.

Secara default gambar diposisikan ditengah wadah, sehingga nilai defaultnya adalah :

img {
    object-position: center;
    /* which equals */
    object-position: 50% 50%;
}

Playground Demo

Dibawah ini adalah halaman demo yang akan membantu Anda mendapatkan pemahaman tentang object-fit dan object-position dalam waktu singkat. Didalamnya Anda dapat menguji properti dan memberi value yang berbeda untuk melihat bagaimana properti tersebut dapat mengubah objek media. Jangan takut untuk membuka DevTool juga.

object-fit-demo1-e1461076742599

Browser Support

Mengikuti tradisi semua fitur keren CSS,browser support untuk object-fit dan object-position agak tidak konsisten dan dalam hal ini karena IE dan Edge tidak support sama sekali. Sambil menunggu semua browser Microsoft untuk mengadopsi kedua properti Anda dapat menggunakan polyfill ini untuk mengatasi masalah dengan baik. Juga, itu menjadi ide yang baik untuk mengatur warna background untuk semua wadah image sebagai fallback.

Kesimpulan

Properti object-fit dan object-position dapat sangat membantu ketika membangun halaman web responsif. Keduanya mudah diingat dan digunakan, dan bekerja dengan sempurna. Kami yakin sekali IE dan Edge mengadopsi mereka dengan cepat akan menjadi bagian dari toolbox CSS setiap web developer. Terimakasih sudah membaca semoga bermanfaat

DEMO

5 Teknik Dalam Menggunakan Flexbox

fdg

5 TEKNIK FLEXBOX

Flexbox adalah standar CSS dioptimalkan untuk merancang antarmuka pengguna. Menggunakan berbagai properti flexbox kita dapat membangun halaman kami keluar dari blok bangunan kecil, yang kemudian mudah diposisikan dan ukurannya dengan cara apapun yang kita inginkan. Situs web dan aplikasi dibuat dengan cara ini responsif dan beradaptasi dengan baik untuk semua ukuran layar.

Pada artikel ini kita akan melihat pada lima pendekatan flexbox untuk memecahkan masalah tata letak CSS umum. Kami juga termasuk contoh-contoh praktis untuk menampilkan skenario kehidupan nyata di mana teknik ini diterapkan.

1. Membuat Kolom Tinggi Equal

Ini mungkin tidak tampak seperti tugas yang sulit pada awalnya, tetapi membuat kolom yang memiliki ketinggian yang sama dapat benar-benar menjengkelkan. Hanya menetapkan min-height tidak akan bekerja, karena sekali jumlah konten di kolom mulai berbeda, beberapa dari mereka akan tumbuh dan lain-lain akan tetap pendek.

Memperbaiki masalah ini menggunakan flexbox tidak dapat lebih mudah, sebagai kolom dibuat dengan cara ini memiliki tinggi yang sama secara default. Yang harus kita lakukan adalah menginisialisasi model flex, maka pastikan flex-arah dan menyelaraskan-item properti nilai standar.

CSS CODE

.container {
        /* Initialize the flex model */
  display: flex;

        /* These are the default values but you can set them anyway */
  flex-direction: row;    /* Items inside the container will be positioned horizontally */
        align-items: stretch;   /* Items inside the container will take up it's entire height */
}
HTML CODE
<div class="container"> <!-- Equal height columns --> <div>...</div> <div>...</div> <div>...</div> </div>

 Untuk Melihat Demo Dari Teknik Ini , Anda Dapat Lihat Disini

2. Meyusun Ulang Elemen

 JIka kita harus mengubah urutan beberapa elemen, kita mungkin akan mencoba beberapa CSS hack, dan melakukannya dengan javaScript, Dengan Flexbox..Ini Disebut Ketertiban..Ini hanya Parameter integer yang menentukan posisi elemen yang angkanya lebih rendah berarti prioritasnya yang lebih besar..

CSS CODE :

.container{
  display: flex;
}

/* Reverse the order of elements */

.blue{
  order: 3;
}

.red{
  order: 2;
}

.green{
  order: 1;
}

 

HTML  CODE

<div class="container">

  <!-- These items will appear in reverse order -->

  <div class="blue">...</div>
  <div class="red">...</div>
  <div class="green">...</div>

</div>

Properti order memiliki banyak kegunaan praktis..

Jika anda ingin mengetahui lebih jelas , silahkan klik disini

3. Horizontal Dan Vertikal Centering

Vertikal Di CSS adalah salah satu masalah yang membuat  kita bertanya kepada diri sendiri.. Maka dari itu Flexbox menawarkan solusi yang lebih mudah untuk masalah ini. Setiap tata letak fleksibael memiliki dua arah ( X axis dan Y Axis) dua Sifat yang terpish. Dengan Berpusat kedua kita bisa memposisikan setiap elemen tepat di tengah wadah induknya..

CSS CODE
.container{
  display: flex;

  /* Center according to the main axis */
  justify-content: center;

  /* Center according to the secondary axis */
        align-items: center;
}
HTML CODE
<div class="container">

  <!-- Any element placed here will be centered
     both horizonally and vertically -->

  <div>...</div>

</div>

Untuk Melihat Teknik Ini Anda Bisa Melihatnya disini.

4. Membuat Grids Fully Reponsif

Kebanyakan pengembang bergantung pada kerangka CSS saat membuat grid responsif. Bootstrap adalah salah satu yang paling populer tetapi ada ratusan perpustakaan yang dapat membantu Anda dengan tugas ini. Mereka biasanya bekerja dengan baik dan memiliki banyak pilihan, tapi cenderung cukup berat.  Sebuah baris dalam grid flexbox hanyalah sebuah wadah dengan display: fleksibel. Kolom horisontal di dalamnya dapat setiap jumlah elemen, pengaturan ukuran yang dilakukan melalui fleksibel. Model fleksibel menyesuaikan dengan ukuran viewport, sehingga setup ini akan terlihat baik pada semua perangkat. Namun, jika kita memutuskan tidak ada cukup ruang horizontal di layar, kita dapat dengan mudah mengubah tata letak menjadi satu vertikal dengan media-query.

CSS CODE
.container{
  display: flex;
}

/* Classes for each column size. */

.col-1{
  flex: 1;
}

.col-2{
  flex: 2;
}

@media (max-width: 800px){
  .container{
    /* Turn the horizontal layout into a vertical one. */
    flex-direction: column;		
  }
}

 

HTML CODE
<div class="container">

  <!-- This column will be 25% wide -->
  <div class="col-1">...</div>

  <!-- This column will be 50% wide -->
  <div class="col-2">...</div>

  <!-- This column will be 25% wide -->
  <div class="col-1">...</div>

</div>

Anda Dapat Memeriksa Variasi dari teknik ini disini

5. Membuat The Perfect Sticky Footer

Flexbox memiliki solusi mudah untuk masalah itu juga.. ketika membangun halaman yang mencakup footer, dengan melakukan semuanya dalam elemen fleksibel kita dapat yakin bahwa footer akan selalu di bagian bawah halaman.  Menerpkan display : fleksibel dengan tag tubuh memungkinkan kita unutk memebangun seluruh tata letak halaman kami menggunakan sifat modus fleksibel.. Setelah itu selesai, konten utama website dapat menjadi salah satu item yang fleksibel dan footer lain, yang membuatnya sangat mudah unutk memanipulasi posisi mereka dan menempatkan mereka persisi dimana kita inginkan..

CSS CODE
html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.main{
   /* The main section will take up all the available free space
      on the page that is not taken up by the footer. */
   flex: 1 0 auto;
}

footer{
   /* The footer will take up as much vertical space as it needs and not a pixel more. */
   flex: 0 0 auto;
}

 

HTML CODE
<body>
  
  <!-- All the page content goes here  -->

  <div class="main">...</div>


  <!-- Our sticky foooter -->

  <footer>...</footer>

</body>

Anda Dapat menemukan informasi lebih lanjut disini

Kesimpulan

 Semua Browser Utama (Kecuali IE ) Sekarang mendukung modus tata letak fleksibel,  
 Jika Anda belum mengunakannya sekarang kami sangat menyarankan bahwa anda mencobannya..

 

Mungkin Itu Saja Teknik Dari Saya..

Terima Kasih

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.

Membuat Mega Menu dengan CSS

Hay guys! Dalam tutorial kali ini kita akan membahas tentang cara membuat mega menu dengan CSS murni. Mega menu biasanya digunakan pada website perusahaan/e-commerce, tapi menjadi lebih populer karena mega menu merupakan cara yang bagus untuk menampilkan/ mengatur konten. Mari kita mulai dengan markup HTML…

Markup HTML

Buatlah unordered list dengan class “nav” (<ul>), kemudian untuk setiap item menu kita akan menambahkan list item (<li>) dengan tag anchor (<a>) didalamnya. Jika Anda ingin item menu menjadi mega menu hanya menambahkan <div> dibagian dalam <li>.

<ul class="nav">
    <li>
        <a href="#">What's new</a>
        <div>
            Mega Menu Content...
        </div>
    </li>
    <li><a href="#">Top rated</a></li>
    <li>
        <a href="#">Earnings</a>
        <div>
            Mega Menu Content...
        </div>
    </li>
    <li><a href="#">Rings</a></li>
    <li><a href="#">Bracelets</a></li>
    <li><a href="#">All Categories</a></li>
    <li class="nav-search">
        <form action="#">
            <input type="text" placeholder="Search...">
            <input type="submit" value="">
        </form>
    </li>
</ul>

Reset dan Style Konten Dasar

Sebagai style default yang berbeda satu sama lain, kita akan menambahkan beberapa style reset untuk menjaga konsistensi antara mereka dan menghindari masalah dikemudian hari.

.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
 
.nav a { text-decoration: none; }
 
.nav li { list-style: none; }

Kemudian kita akan menambahkan beberapa style dasar untuk container menu dan float list item ke kiri untuk menunjukan pada baris yang sama.

.nav {
    display: inline-block;
    position: relative;
    cursor: default;
    z-index: 500;
}
 
.nav > li {
    display: block;
    float: left;
}

Styling Link Menu

Kita akan mulai dengan style umum seperti padding, height, posision dll. Kemudian kita akan mengatur style typography seperti font size, color, text shadow, dll. Kita juga akan mengatur warna background dan left border dan right border. Untuk tetap menjaga style transisi yang halus kita akan menambahkan transition CSS. Perhatikan bahwa kita mengatur properti yang sama lima kali, ini diperlukan karena properti ini tidak sepenuhnya diterapkan disemua browser, dan sebagai properti ini pada pengujian, semua browser yang berbeda menggunakan awalan roperti before. Jadi jika Anda ingin support pada beberapa browser saat ini dan yang lebih lama menggunakan prefiks ini.

.nav > li > a {
    position: relative;
    display: block;
    z-index: 510;
    height: 54px;
    padding: 0 20px;
    line-height: 54px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #fcfcfc;
    text-shadow: 0 0 1px rgba(0,0,0,.35);
 
    background: #372f2b;
    border-left: 1px solid #4b4441;
    border-right: 1px solid #312a27;
 
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

Dalam kondisi hover kita hanya akan mengubah warna background. Untuk menyelesaikan styling link menu kita akan menambahkan bulatan sudut ke link pertama menggunakan : first-chile pseudo selektor dan menghapus left border.

.nav > li:hover > a { background: #4b4441; }
 
.nav > li:first-child > a {
    border-radius: 3px 0 0 3px;
    border-left: none;
}

Styling Form Search

Kita akan mulai dengan form container : atur position pada relatif, tambahkan left border seperti pada link menu dan atur lebar untuk pewarisan. Dengan menetapkan lebar untuk pewarisan akan menggunakan lebar dari form child inputan.

.nav > li.nav-search > form {
    position: relative;
    width: inherit;
    height: 54px;
    z-index: 510;
    border-left: 1px solid #4b4441;
}

Kemudian kita akan style input teks : float ke kiri, atur ketinggian, padding, dll. Untuk menyembunyikan input teks kita akan mengatur lebar untuk 1px dan menghapus padding kanan dan kiri. Pada kondisi :hover dan :focus kita akan memperbarui lebar dan nilai padding.

.nav > li.nav-search input[type="text"] {
    display: block;
    float: left;
    width: 1px;
    height: 24px;
    padding: 15px 0;
    line-height: 24px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #999999;
    text-shadow: 0 0 1px rgba(0,0,0,.35);
 
    background: #372f2b;
 
    -webkit-transition: all .3s ease 1s;
    -moz-transition: all .3s ease 1s;
    -o-transition: all .3s ease 1s;
    -ms-transition: all .3s ease 1s;
    transition: all .3s ease 1s;
}
 
.nav > li.nav-search input[type="text"]:focus { color: #fcfcfc; }
 
.nav > li.nav-search input[type="text"]:focus,
.nav > li.nav-search:hover input[type="text"] {
    width: 110px;
    padding: 15px 20px;
 
    -webkit-transition: all .3s ease .1s;
    -moz-transition: all .3s ease .1s;
    -o-transition: all .3s ease .1s;
    -ms-transition: all .3s ease .1s;
    transition: all .3s ease .1s;
}

Style untuk mengirimkan inputan mirip dengan input teks, kita hanya akan menetapkan lebar dan tinggi, menambahkan background icon dan sudut bulat menggunakan properti border-radius. Kita juga telah mengatur transisi untuk kedua input agar memiliki beberapa animasi yang halus dan bagus.

.nav > li.nav-search input[type="submit"] {
    display: block;
    float: left;
    width: 20px;
    height: 54px;
    padding: 0 25px;
    cursor: pointer;
 
    background: #372f2b url(../img/search-icon.png) no-repeat center center;
 
    border-radius: 0 3px 3px 0;
 
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}
 
.nav > li.nav-search input[type="submit"]:hover { background-color: #4b4441; }

img1

Mega dropdown

Mega dropdown merupakan salah satu bagian yang paling penting. Kita akan mulai dengan menetapkan posisi ke absolut, lebar 100%, display block dan value atas dan kiri. Kemudian kita akan menyembunyikan dropdown menggunakan properti opacity, visibilitas dan overflow. Setelah itu kita akan menambahkan warna background, sudut bulat dan beberapa transisi. Alasan kita akan menggunakan tiga properti ini untuk menyembunyikan dropdown dan tidak menggunakan display:none karena jika kita menggunakannya, transisi tidak akan berfungsi.

.nav > li > div {
    position: absolute;
    display: block;
    width: 100%;
    top: 50px;
    left: 0;
 
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
 
    background: #ffffff;
    border-radius: 0 0 3px 3px;
 
    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}

Untuk menampilkan dropdown pada hover kita perlu mengatur opacity ke 1 dan properti visibilitas overflow pada visible.

.nav > li:hover > div {
    opacity: 1;
    visibility: visible;
    overflow: visible;
}

Beberapa Konten

Seperti menu yang mendukung setiap konten dalam bahasa apapun (html,php,js,dll). Untuk contoh ini kita akan membuat layout kolom dasar dengan beberapa list link didalamnya. Tambahkan kode html berikut didalam mega dropdown (<div>).

<div class="nav-column">
    <h3>Home</h3>
    <ul>
        <li><a href="#">Pampers Diapers</a></li>
        <li><a href="#">Huggies Diapers</a></li>
        <li><a href="#">Seventh Generation</a></li>
        <li><a href="#">Diapers</a></li>
        <li><a href="#">Derbies</a></li>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>
 
<div class="nav-column">
    <h3>Home</h3>
    <ul>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
 
    <h3>Home</h3>
    <ul>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>
 
<div class="nav-column">
    <h3>Home</h3>
    <ul>
        <li><a href="#">Pampers Diapers</a></li>
        <li><a href="#">Huggies Diapers</a></li>
        <li><a href="#">Seventh Generation</a></li>
        <li><a href="#">Diapers</a></li>
        <li><a href="#">Derbies</a></li>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
        <li><a href="#">Loafers</a></li>
    </ul>
</div>
 
<div class="nav-column">
    <h3 class="orange">Related Categories</h3>
    <ul>
        <li><a href="#">Pampers Diapers</a></li>
        <li><a href="#">Huggies Diapers</a></li>
        <li><a href="#">Diapers</a></li>
    </ul>
 
    <h3 class="orange">Brands</h3>
    <ul>
        <li><a href="#">Driving shoes</a></li>
        <li><a href="#">Espadrilles</a></li>
    </ul>
</div>

Kemudian kita akan menambahkan beberapa style dasar untuk konten ini. Kita akan mengatur lebar setiap kolom menjadi 20%, padding 2,5% dan float kolom ke kiri. Untuk menyelesaikannya kita akan menambahkan beberapa style typography untuk judul dan link.

.nav .nav-column {
    float: left;
    width: 20%;
    padding: 2.5%;
}
 
.nav .nav-column h3 {
    margin: 20px 0 10px 0;
    line-height: 18px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #372f2b;
    text-transform: uppercase;
}
 
.nav .nav-column h3.orange { color: #ff722b; }
 
.nav .nav-column li a {
    display: block;
    line-height: 26px;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #888888;
}
 
.nav .nav-column li a:hover { color: #666666; }

DEMO

preview4

 

Cara Membuat Icon Media Sosial di CSS3

Pada hampir setiap website, blog, majalah atau bisnis yang Anda temui di internet, memiliki beberapa konten atau tombol media sosial. Apakah itu share sosial, link profil atau “like”, “follow”, dll. Dan meskipun diluar sana pun ada tool atau plugin yang instan tapi alangkah lebih baik kita belajar dari yang dasar terlebih dahulu dengan buatan sendiri. Tutorial ini akan menunjukan cara membuat kustom icon media sosial langkah demi langkah. Jadi mari kita mulai!

Step 1 – Membuat Tombol

Untuk mulai membuat tombol media sosial kita, kita akan mulai dengan membuat tombol yang sebenarnya. Mari kita mulai dengan menambahkan kode HTML sederhana dibawah ini untuk membuat button.

<html>
<head>
</head>
    <a class="share__btn" href="#">Tweet</a>
</div>
    <a class="share__btn" href="#">Like</a>
</div>
    <a class="share__btn" href="#">+1</a>
</div>
</html>

Saat ini kita telah menambahkan HTML dasar kita sekarang dapat menambahkan beberapa style dan mulai membentuk tombol keluar. CSS dibawah ini akan digunakan sebagai border dan style untuk kedua tombol dan counter share.

body {
    font: 0.875em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 42px 40px;
}
 
a {
    text-decoration: none;
}
 
.share {
    display: inline-block;
    margin-right: 20px;
}
.share__count {
    background-color: #fff;
    border: solid 1px #a5b1bd;
    border-radius: 3px;
    /* add in vendor rules */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    /* add in vendor rules */
    color: #424a4d;
    float: left;
    font-weight: bold;
    margin-right: 10px;
    padding: 4px 10px;
    position: relative;
    text-align: center;
}

TutIMG1

Sekarang, kita belum selesai membuat layout dasar untuk kedua tombol share dan counter share dengan kode diatas. Kita sekarang perlu menambahkan kode CSS dasar untuk dapat menyelesaikan dan membentuk sebuah tombol.

.share_size_large > .share__count {
    display: block;
    float: none;
    font-size: 18px;
    margin-right: 0;
    margin-bottom: 12px;
    padding: 10px 0;
}
 
.share__btn {
    border: solid 1px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    /* add in vendor rules */
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
    /* add in vendor rules */
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    padding: 5px 10px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

Step 2 – Styling Tombol Share

Karena kita telah selesai membuat dasar layout tombol kita sekarang dapat mulai styling dengan menyisipkan kode HTML untuk menunjuk ke elemen CSS.

Mari kita tambahkan kode HTML dibawah ini untuk masing-masing tombol share kita. Sekarang, ingat, kita akan menambahkan style tombol melalui kode CSS kita akan menambahkannya nanti. Jika Anda ingin style tombol share Facebook, kemudian menambahkan “type_facebook”. Jika Anda ingin style tombol share Twitter juga, tambahkan “type_twitter” dan sebagainya. Anda selalu dapat menyesuaikan warna dan style dari tombol yang berbeda berdasarkan profil media sosial Anda.

.share_size_large > .share__btn {
    padding: 5px 0;
    width: 100%;
}
 
.share_type_twitter > .share__btn {
    background-color: #4099FF;
}
 
.share_type_facebook > .share__btn {
    background-color: #3B5999;
}
 
.share_type_gplus > .share__btn {
    background-color: #F90101;
}

TutIMG2

Step 3 – Membuat Share Counter

Kita sekarang akan menambahkan counter share ke tombol media sosial. Mari kita mulai dengan menambahkan kode HTML sederhana untuk masing-masing dan salah satu tombol kita dimana kita ingin menampilka counter media sosial. Anda selalu dapat menerapkan counter sosial sharing kedalam tombol Anda; Yang telah menunjukan Anda bagaimana untuk melakukannya di “Step 5”.

Sekarang, kita ingin menambahkan beberapa style ke sosial counter. Pada dasarnya, ini akan menambahkan beberapa layout ke kotak counter.

.share__count:before, .share__count:after {
  content: '';
  display: block;
    height: 0;
    top: 50%;
  position: absolute;
    right: -14px;
  width: 0;
    margin-top: -6px;
}
 
.share_size_large > .share__count:before, .share_size_large > .share__count:after {
  content: '';
  display: block;
    height: 0;
    left: 50%;
  position: absolute;
    top: auto;
  width: 0;
}

Step 4 – Menyelesaikan Style Tombol Media Sosial

Kita sekarang akan menyelesaikan style tombol media sosial yang off dengan menyelesaikan counter sosial dengan menambahkan stylenya dan menambahkan pointer kecil menuju tombol yang sebenarnya. Kode berikut juga memperbaiki setiap masalah border dan layout tombol yang mungkin Anda miliki.

.share__count:before {
    border: solid 7px transparent;
    border-color: transparent transparent transparent #a5b1bd;
}
 
.share_size_large > .share__count:before {
  border-color: #a5b1bd transparent transparent transparent;
    bottom: -14px;
  margin-left: -7px;
}
 
.share__count:after {
    border: solid 6px transparent;
    border-color: transparent transparent transparent #fff;
    right: -12px;
    margin-top: -5px;
}
 
.share_size_large > .share__count:after {
  margin-left: -6px;
  bottom: -12px;
  border-color: #fff transparent transparent transparent;
}

TutIMG3

Step 5 – Menambahkan Counter dapat Berfungsi

Karena kita telah selesai sampai tombol dan desain counter saatnya untuk membuat counter benar-benar dapat digunakan. Untuk itu, kita akan menggunakan PHP. Sekarang jika Anda ingin counter bekerja dengan baik, pergi menuju Facebook/Twitter/Google Plus API counter untuk share, like, komentar dll, dari situs jaringan sosial dan mengganti URL setelah file_get_contents dengan URL API Anda.

Kode PHP dibawah, pastikan untuk menamai file dengan social.php jika Anda tidak ingin mengubah kode dari tutorial ini.

'; $fbend = '';
        $fbpage = $facebook;
        $fbparts = explode($fbbegin,$fbpage);
        $fbpage = $fbparts[1];
        $fbparts = explode($fbend,$fbpage);
        $fbcount = $fbparts[0];
        if($fbcount == '') { $fbcount = '0'; }
}
function twit_count() {
        global $tcount;
        $twit = file_get_contents('http://api.twitter.com/YOURPOST/PAGE');
        $begin = ''; $end = '';
        $page = $twit;
        $parts = explode($begin,$page);
        $page = $parts[1];
        $parts = explode($end,$page);
        $tcount = $parts[0];
        if($tcount == '') { $tcount = '0'; }
}
?>

Karena kita sekarang telah membuat file social.php, sekarang kita dapat menghubungkan tombol media sosial untuk counter sebenarnya. Tempatkan kode PHP kecil dimana nomor counter Anda berlokasi didekat tombol Anda. Pastikan untuk mengganti fbcount dengan nama sosial yang benar dalam file PHP.

Membuat counter dengan Google+ sedikit berbeda, dan perbedaan yang sedikit itu untuk sebagian besar. Cukup tambahkan kode berikut dimana Anda ingin menampilkan nomor counter. Dengan Google+ counter Anda mungkin ingin membuat layout untuk sedikit counter sedikit lebih luas, yang hanya akan membuatnya terlihat sedikit lebih baik, karena counter Google+ berbeda dari Twitter dan Facebook API.

preview

DEMO

Sekarang kita telah selesai membuat tombol media sosial Anda sekarang dapat menerapkannya kedalam CMS atau website Anda. Pastikan untuk memperoleh posting/halaman Facebook API counter sebelum Anda mencoba untuk menggunakan counter. Kami harap postingan ini bisa bermanfaat untuk Anda.

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…