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…

Membuat Efek Hover Link dengan CSS

Salah satu bagian penting dari sebuah situs web adalah link teks. Dengan mengklik sebuah tag anchor Anda dapat pergi ke mana pun dari situs yang menunjuk ke halaman tertentu.

Link khusus berisi efek hover sederhana seperti penggunaan perubahan warna sederhana ketika mouse ditunjukan atau diklik. Tapi ada cara untuk membuat efek ini lebih baik dan menarik.

Sekarang, kita akan membahas cara untuk membuat link mengagumkan menggunakan fitur baru dari CSS3 : transition and transform. Pada akhir tutorial ini Anda akan memiliki efek hover link  yang pasti akan membantu navigasi Anda.

Sumber daya yang Anda butuhkan untuk menyelesaikan tutorial ini adalah sebagai berikut:

  • Font-Awesome
  • Pengetahuan tentang CSS3 transitions dan transform
  • Waktu dan kesabaran

Demo 1

Demo pertama akan memiliki efek sederhana sehingga ketika Anda mengarahkan mouse Anda, border tiga pixel akan keluar dari bagian belakang kota container teks link.

HTML

Dalam markup hanya akan berisi  tag HTML5  nav yang memegang semua link pada demo kita. Pada setiap tag anchor ada class box dan demo-1. Kita juga akan menempatkan ikon font awesome sebelum link untuk membuat desain yang lebih keren.

<nav>
      <a href="#" class="box demo-1"> <i class="fa fa-hand-o-right"></i> <span>Demo 1</span> </a>
      <a href="#" class="box demo-1"> <i class="fa fa-hand-o-up"></i> <span>Demo 2</span></a>
      <a href="#" class="box demo-1"> <i class="fa fa-hand-o-left"></i>  </i> <span>Demo 3</span></a>
      <a href="#" class="box demo-1">  <i class="fa fa-thumbs-o-up"></i> <span>Demo 4</span></a>
</nav>

CSS

Untuk CSS, kita akan menggunakan selektor ::before dan ::after untuk menyisipkan border 3 pixel ketika mouse sedang menghover ke elemen tag anchor. Untuk membuat efek halus, kita akan menggunakan CSS3 transition.

.box{
  color: #fff;
  padding: 10px;
}
 
.box:hover{
  background: #fff;
  color: #26425E;
}
 
.demo-1 {
  position: relative;
}
 
.demo-1:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
 
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.2s;
 
  -webkit-transition-property: top, left, right, bottom;
  -moz-transition-property: top, left, right, bottom;
  -ms-transition-property: top, left, right, bottom;
  -o-transition-property: top, left, right, bottom;
  transition-property: top, left, right, bottom;
}
 
.demo-1:hover:before, .demo-1:focus:before{
  -webkit-transition-delay: .1s;
  -moz-transition-delay: .1s;
  -ms-transition-delay: .1s;
  -o-transition-delay: .1s;
  transition-delay: .1s; 
 
  border: #fff solid 3px;
  bottom: -7px;
  left: -7px;
  top: -7px;
  right: -7px;
}

Demo 2

Demo kedua akan memiliki efek highlight halus di mana ketika Anda mengarahkan mouse Anda pada menu, maka akan menyoroti teks dan menambahkan border putus-putus pada bagian atas dan bawah teks.

HTML

Dalam markup ke dua hampir sama dengan demo pertama, namun kali ini akan menggunakan demo-2 sebagai class pada setiap tag anchor. Kita akan menggunakan data atribut HTML5 untuk memanipulasi efek hover melalui CSS nanti. Perhatikan kita menambahkan & nbsp; pada atribut data-text. Karena data atribut tidak akan mengambil ruang non-breaking, kita perlu menggunakan escape string untuk menempatkan beberapa ruang antara kata Demo dan jumlah demo. Selain dari escape string ini Anda juga dapat menggunakan code &#160 untuk menciptakan output yang sama.

<nav>
    <a href="#" class="demo-2" data-text="Demo&nbsp;1">Demo 1</a>
    <a href="#" class="demo-2" data-text="Demo&nbsp;2">Demo 2</a>
    <a href="#" class="demo-2" data-text="Demo&nbsp;3">Demo 3</a>
    <a href="#" class="demo-2" data-text="Demo&nbsp;4">Demo 4</a>
</nav>

CSS

Sekarang ke CSS, kita akan menetapkan border putus-putus pada bagian atas dan bawah serta mengatur lebar dari atribut data-text ke nol. Menggunakan selektor :hover and :focus kita akan transisi lebar dari atribut data atribut maupun 2 garis putus-putus ke 100% untuk membuat efek highlight halus.

.demo-2{
  color: #314559;
  padding: 10px 0;
}
 
.demo-2::before {
  color: #fff;
  max-width: 0;
  padding: 10px 0;
  border-top: 1px dashed #fff;
  border-bottom: 1px dashed #fff;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  content: attr(data-text);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
 
.demo-2:hover::before,
.demo-2:focus::before {
  max-width: 100%;
  outline: none;
  text-shadow: none;
}

Demo 3

Demo ketiga kita terinspirasi oleh Sebastian Ekström tentang efek link hover 3D. Ini akan memiliki efek flipping box background 3D ketika mouse diarahkan ke menu.

HTML

Markupnya hampir identik sama seperti dua demo pertama namun untuk membuat beberapa efek yang mengagumkan kita perlu menggunakan atribut data untuk mengulangi teks link dalam pseudo-element.

<nav>
      <a href="#" class="demo-3"> <span data-text="Demo 1">Demo 1</span></a>
      <a href="#" class="demo-3"><span data-text="Demo 2">Demo 2</span></a>
      <a href="#" class="demo-3"><span data-text="Demo 3">Demo 3</span></a>
      <a href="#" class="demo-3"><span data-text="Demo 4">Demo 4</span></a>
</nav>

CSS

Sekarang mari kita tambahkan beberapa magic untuk markupnya. Ide dasar untuk efek ini adalah bahwa kita akan translate3d dan perspective untuk menciptakan ilusi berputar keatas dan kotak mundur. Kita akan menggunakan overflow: hidden untuk klip kotak dan sisanya dari konten akan terlihat.

.demo-3 {
  color: #fff;
  display: inline-block;
  text-decoration: none;
  overflow: hidden;
  vertical-align: top;
   background: #1C3044;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  -ms-perspective: 600px;
  perspective: 600px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}
 .demo-3:hover span {
  background: #314559;
  -webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  -moz-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  -ms-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}
  .demo-3 span {
  display: block;
  position: relative;
  padding: 10px 20px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
 
 .demo-3 span:after {
  content: attr(data-text);
  -webkit-font-smoothing: antialiased;
  padding: 10px 20px;
  color: #fff;
  background: #0e6957;
  display: block;
  position: absolute;
 
  left: 0;
  top: 0;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  -moz-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  -ms-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
}

Perhatikan bahwa kami juga menggunakan properti rotateX bersama dengan translate3D. Ini akan membuat efek translating dan rotating kotak ketika teks tersebut diarahkan mouse.

Demo 4

Demo keempat akan berbeda. Kali ini kia akan flashing animasi border menggunakan properti keyframe CSS3.

HTML

Markup pada demo ini akan berbeda. Didalam tag nav kita akan menambahkan empat tag anchor dan menempatkan dua tag span didalam masing-masing tag anchor. Tag span pertama akan berisi teks untuk keadaan normal dan yang kedua untuk hover state. Kita juga akan menambahkan class demo-4 pada setiap tag anchor.

<nav>
    <a href="#" class="demo-4">
      <span>
        <span>Demo 1</span>
        <span>Hover</span>
        <span></span>
      </span>
    </a>
 
    <a href="#" class="demo-4">
      <span>
        <span>Demo 2</span>
        <span>Hover</span>
        <span></span>
      </span>
    </a>
 
    <a href="#" class="demo-4">
      <span>
        <span>Demo 3</span>
        <span>Hover</span>
        <span></span>
      </span>
    </a>
 
    <a href="#" class="demo-4">
      <span>
        <span>Demo 4</span>
        <span>Hover</span>
        <span></span>
      </span>
    </a>
 
  </nav>

CSS

Sekarang saatnya untuk memberi efek hidup dapa link kita. Untuk membuat efek border berkedip, kita akan menggunakan fitur baru CSS3, properti @keyframe untuk membuat animasi. Pertama, kita perlu menentukan lebar container tag anchor serta border span.

.demo-4 {
  width: 210px;
  background-color: transparent;
  cursor: pointer;
  border-color: #bdc3c7;
}
 
.demo-4:hover {
  border-color: #C672E9;
}
 
.demo-4 span:nth-child(1) {
  color: #FCFCFC;
}
 
.demo-4 span:nth-child(2) {
  color: #C672E9;
}
 
.demo-4 span {
  font-family: 'Lato', sans-serif;
  font-size: 28px;
  letter-spacing: 3px;
}
 
.demo-4 {
  position: relative;
  box-sizing: border-box;
  padding: 0;
  border-style: none;
  height: 65px;
  display: inline-block;
}
 
.demo-4 span {
  position: absolute;
  box-sizing: border-box;
  display: block;
}

Selanjutnya, kita perlu menentukan posisi dan properti dari content menggunakan selektor :before dan :after. Hal ini juga mencakup posisi border dan teks hover state.

.demo-4>span>span:nth-child(3), .demo-4:before, .demo-4:after, .demo-4>:first-child, .demo-4>:first-child:before, .demo-4>:first-child:after {
  border-color: inherit;
  display: block;
  -moz-transition: border-color 0.3s ease;
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}
 
.demo-4:before, .demo-4:after, .demo-4>:first-child:before, .demo-4>:first-child:after {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  position: absolute;
  box-sizing: border-box;
  content: ' ';
}
 
.demo-4>span>span:nth-child(3), .demo-4:before, .demo-4:after, .demo-4>:first-child:before, .demo-4>:first-child:after {
  border-width: 3px;
}
.demo-4>span>span:nth-child(3) {
  border-radius: 3px;
}
.demo-4:before {
  border-radius: 3px 0 0 3px;
}
.demo-4:after {
  border-radius: 0 3px 3px 0;
}
.demo-4>:first-child:before {
  border-radius: 3px 3px 0 0;
}
.demo-4>:first-child:after {
  border-radius: 0 0 3px 3px;
}
 
.demo-4>:first-child {
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
}
.demo-4>span span {
  width: inherit;
  text-align: center;
  -moz-transition: opacity 0.6s ease, top 0.5s ease;
  -webkit-transition: opacity 0.6s ease, top 0.5s ease;
  transition: opacity 0.6s ease, top 0.5s ease;
}
.demo-4>span>span:nth-child(1) {
  opacity: 1;
  top: 18px;
}
.demo-4>span>span:nth-child(2) {
  top: 37px;
  opacity: 0;
}
.demo-4:hover>span>span:nth-child(1) {
  opacity: 0;
  top: 2px;
}
.demo-4:hover>span>span:nth-child(2){
  opacity: 1;
  top: 18px;
}
 
.demo-4>span>span:nth-child(3) {
  top: 28%;
  height: 44%;
  width: inherit;
  border-style: none solid none solid;
}
 
.demo-4:before, .demo-4:after {
  top: 0;
  width: 0;
  height: inherit;
  border-style: solid none solid none;
}
 
.demo-4>:first-child:before, .demo-4>:first-child:after {
  left: 0;
  height: 0;
  width: inherit;
  border-style: none solid none solid;
}
 
.demo-4:before {
  -webkit-animation-name: left-center;
  animation-name: left-center;
}
 
.demo-4:after {
  -webkit-animation-name: right-center;
  animation-name: right-center;
}
 
.demo-4>:first-child:before {
  -webkit-animation-name: center-top;
  animation-name: center-top;
}
 
.demo-4>:first-child:after {
  -webkit-animation-name: center-bottom;
  animation-name: center-bottom;
}
 
.demo-4:hover:before {
  -webkit-animation-name: center-left;
  animation-name: center-left;
}
 
.demo-4:hover:after {
  -webkit-animation-name: center-right;
  animation-name: center-right;
}
 
.demo-4:hover>:first-child:before {
  -webkit-animation-name: top-center;
  animation-name: top-center;
}
 
.demo-4:hover>:first-child:after {
  -webkit-animation-name: bottom-center;
  animation-name: bottom-center;
}

Perhatikan bahwa kita juga akan menempatkan nama animasi pada setiap selektor hover. Kali ini kita perlu mengerjakannya pada animasi. Berikutnya adalah animasi @keyframe diatur untuk Chrome, Safari, IE dan Firefox.

@-webkit-keyframes center-left {
    0%   {left: 40%; width: 8%; opacity: 0.2;}
    25%  {left: 25%; width: 15%;}
    50%  {left: 0%; width: 30%;}
    80%  {left: 0%; width: 0%;}
    100% {left: 0%; width: 0%; opacity: 1;}
}
 
@-webkit-keyframes left-center {
    0%   {left: 0%; width: 0%; opacity: 1;}
    20%  {left: 0%; width: 0%;}
    50%  {left: 0%; width: 30%;}
    55%  {left: 40%; width: 11%;}
    100% {left: 43%; width: 8%; opacity: 0.2;}
}
 
@-webkit-keyframes center-right {
    0%   {left: 52%; width: 8%; opacity: 0.2;}
    25%  {left: 60%; width: 15%;}
    50%  {left: 70%; width: 30%;}
    80%  {left: 100%; width: 0%;}
    100% {left: 100%; width: 0%; opacity: 1;}
}
 
@-webkit-keyframes right-center {
    0%   {left: 100%; width: 0%; opacity: 1;}
    20%  {left: 100%; width: 0%;}
    50%  {left: 70%; width: 30%;}
    55%  {left: 49%; width: 11%;}
    100% {left: 49%; width: 8%; opacity: 0.2;}
}
 
@-webkit-keyframes top-center {
    0%   {top: 0%; height: 0%; opacity: 0.2;}
    50%  {top: 0%; height: 0%;}
    60%  {top: 0%; height: 20%;}
    80%  {top: 0%; height: 50%;}
    90%  {top: 25%; height: 25%;}
    100% {top: 50%; height: 0%; opacity: 1;}
}
 
@-webkit-keyframes center-top {
    0%   {top: 50%; height: 0%; opacity: 1;}
    10%  {top: 25%; height: 25%;}
    20%  {top: 0%; height: 50%;}
    40%  {top: 0%; height: 20%;}
    50%  {top: 0%; height: 0%;}
    100% {top: 0%; height: 0%; opacity: 0.2;}
}
 
@-webkit-keyframes bottom-center {
    0%   {top: 100%; height: 0%; opacity: 0.2;}
    50%  {top: 100%; height: 0%;}
    60%  {top: 80%; height: 20%;}
    80%  {top: 50%; height: 50%;}
    90%  {top: 50%; height: 25%;}
    100% {top: 50%; height: 0%; opacity: 1;}
}
 
@-webkit-keyframes center-bottom {
    0%   {top: 50%; height: 0%; opacity: 1;}
    10%  {top: 50%; height: 25%;}
    20%  {top: 50%; height: 50%;}
    40%  {top: 80%; height: 20%;}
    50%  {top: 100%; height: 0%;}
    100% {top: 100%; height: 0%; opacity: 0.2;}
}
 
@keyframes center-left {
    0%   {left: 40%; width: 8%; opacity: 0.2;}
    25%  {left: 25%; width: 15%;}
    50%  {left: 0%; width: 30%;}
    80%  {left: 0%; width: 0%;}
    100% {left: 0%; width: 0%; opacity: 1;}
}
 
@keyframes left-center {
    0%   {left: 0%; width: 0%; opacity: 1;}
    20%  {left: 0%; width: 0%;}
    50%  {left: 0%; width: 30%;}
    55%  {left: 40%; width: 11%;}
    100% {left: 43%; width: 8%; opacity: 0.2;}
}
 
@keyframes center-right {
    0%   {left: 52%; width: 8%; opacity: 0.2;}
    25%  {left: 60%; width: 15%;}
    50%  {left: 70%; width: 30%;}
    80%  {left: 100%; width: 0%;}
    100% {left: 100%; width: 0%; opacity: 1;}
}
 
@keyframes right-center {
    0%   {left: 100%; width: 0%; opacity: 1;}
    20%  {left: 100%; width: 0%;}
    50%  {left: 70%; width: 30%;}
    55%  {left: 49%; width: 11%;}
    100% {left: 49%; width: 8%; opacity: 0.2;}
}
 
@keyframes top-center {
    0%   {top: 0%; height: 0%; opacity: 0.2;}
    50%  {top: 0%; height: 0%;}
    60%  {top: 0%; height: 20%;}
    80%  {top: 0%; height: 50%;}
    90%  {top: 25%; height: 25%;}
    100% {top: 50%; height: 0%; opacity: 1;}
}
 
@keyframes center-top {
    0%   {top: 50%; height: 0%; opacity: 1;}
    10%  {top: 25%; height: 25%;}
    20%  {top: 0%; height: 50%;}
    40%  {top: 0%; height: 20%;}
    50%  {top: 0%; height: 0%;}
    100% {top: 0%; height: 0%; opacity: 0.2;}
}
 
@keyframes bottom-center {
    0%   {top: 100%; height: 0%; opacity: 0.2;}
    50%  {top: 100%; height: 0%;}
    60%  {top: 80%; height: 20%;}
    80%  {top: 50%; height: 50%;}
    90%  {top: 50%; height: 25%;}
    100% {top: 50%; height: 0%; opacity: 1;}
}
 
@keyframes center-bottom {
    0%   {top: 50%; height: 0%; opacity: 1;}
    10%  {top: 50%; height: 25%;}
    20%  {top: 50%; height: 50%;}
    40%  {top: 80%; height: 20%;}
    50%  {top: 100%; height: 0%;}
    100% {top: 100%; height: 0%; opacity: 0.2;}
}

 

Disini kita telah membuat sebuah efek hover link teks. Jangan ragu untuk bereksperimen dengan efek yang lain. Ada kemungkinan yang tidak terbatas dan kami percaya Anda dapat mengembangkannya lagi. Kami harap bahwa Anda dapat mengambil pelajaran dari tutorial ini silahkan isi pada bagian komentar dan jangan lupa untuk share. Karena berbagi itu indah.

DEMO

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..

Tutorial Membuat Diamond Grid Menggunakan CSS3

Untuk demo/preview hasillnya bisa dilihat disini

CSS sudah lama menemani para web designer untuk styling pada website, CSS3 memungkinkan kita membuat shape tanpa gambar dengan propertinya yang baru. Ini memungkingkan para web designer bereksperimen bahkan membuat shape biasa menjadi lebih bagus dan menarik. Read more