Posts

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

13 Solusi Loading Animation dengan CSS3 and jQuery

Sumber daya terbesar CSS3 dan jQuery Loading animasi kini hadir ditangan Anda. Anda akan terkejut melihat seri animasi menakjubkan saat menghadirkan yang terbaik untuk Anda. Sebelumnya loading animasi itu sulit dan dibatasi hanya untuk format Gif tapi sekarang dengan teknologi yang kuat dan browser (kanvas dan VML), Anda juga dapat load dengan CSS3 dan jQuery. Hal ini sangat sesuai dan server memberi Anda kelancaran dalam proses permintaan yang dibuat oleh Anda. Read more

Cara Membuat Halaman Full Animated Transition

Dimasa lalu, menambahkan transisi halaman di halaman web merupakan proses yang sederhana. Ketika Anda mengklik link tersebut akan mengarahkan Anda ke halaman berikutnya sebagai browser load halaman berikutnya. Web telah merasa ketinggalan jaman jika Anda akan berpikir tentang ada banyak ruang untuk memperbaikinya. Bukankah lebih bagus untuk menambahkan beberapa transisi halus untuk menciptakan pengalaman pengguna yang lebih baik dalam meload halaman berikutnya?

Hal baik yang bisa dilakukan. Ada banyak aplikasi rumit dan plugin yang menawarkan jenis efek yang sama dan beberapa mungkin berpikir bahwa sulit untuk memperolehnya. Untungnya hal itu tidak dengan cara ini.

Kita sudah bermain-main dengan jQery dalam mencari tahu cara untuk menggantikan reload dari halaman web dengan animasi yang mengagumkan yang pasti akan merubah pikiran pengguna tanpa menggunakan plugin dan kini kita akan berbagi cara dalam pembuatannya.

Membuat Markup

Struktur HTML hanya akan terdiri dari dua div untuk dua halaman yang berisi id main-page dan  next-page.

<div id="main-page">
    <!--- Main Content Here -->
</div>   
<div id="next-page">
    <!--- Next Page Content Here -->
</div>

Yuk kita menambahkan konten dalam div. Kita akan memberikan setiap halaman link untuk menavigasi dan menghubungkan mereka satu sama lain melalui class mainlink dan nextlink.

<div id="main-page">
    <div class="maincontent">
       <h1>Full Page Transition</h1>
       <a class="mainlink">TRY IT NOW &#10140;</a>               
    </div>
</div>             
<div id="next-page">
    <div class="nextcontent">
       <h1>Great! You're in the 2nd Page!</h1>
       <a class="nextlink"> &#8592 GO BACK</a>
    </div>
</div>

Menambahkan Style

Sekarang mari kita menambahkan beberapa style umum di markup. Kita akan mengatur elemen seluruh tubuh untuk 100% dan mengatur beberapa properti font untuk tag h1 kami.

body {
width: 100%;
}
h1 {
    font-family: 'Raleway';
    font-weight: bold;
    text-align: center;
    font-size: 50px;
    color: #fff;
    margin-top: 120px;
}

Langkah selanjutnya mari kita buat style main-page dan next-page. Keduanya berbagi sifat bawaan yang sama kecuali warna background. Kita mengatur posisi untuk mutlak dan menyembunyikan kedua elemen melalui display : none.

#main-page {
    height: 25px;
    width: 375px;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    background-color: #27ae60;
    display: none;
}
#next-page {
    height: 25px;
    width: 375px;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    background-color: #e74c3c;
    display: none;
}
.maincontent, .nextcontent {
    padding-top: 40px;
    display: none;
}

Kita juga menambahkan style dasar untuk tombol agar membuat mereka lebih menarik. Kami menggunakan border untuk membuat box shape halus pada tombol dan menyelaraskan ke center.

a.back{
    font-family: 'Lato';
    font-size: 20px;
    color: #dfdfdf;
    text-decoration: none;
    text-align: center;
    width: 20%;
    margin: 25px auto 30px auto;
    display: block;
}
a.mainlink, a.nextlink {
    font-family: 'Lato';
    color: #fff;
    border: 3px solid #fff;
    padding: 15px 10px;
    display: block;
    text-align: center;
    margin: 25px auto;
    width: 13%;
    text-decoration: none;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
 
}
a.mainlink:hover, a.nextlink:hover{
    background: #fff;
    color: #575757;
}

Menghidupkan dengan jQuery

Untuk jQuery page load, kita akan mulai dengan fungsi rasional yang akan melakukan animasi kustom dari satu set properti CSS melalui properti, durasi, mengurangi value lengkap.

$(document).ready(function() {
 
    $.fn.animateRotate = function(angle, duration, easing, complete) {
      var args = $.speed(duration, easing, complete);
      var step = args.step;
      return this.each(function(i, e) {
        args.complete = $.proxy(args.complete, e);
        args.step = function(now) {
          $.style(e, 'transform', 'rotate(' + now + 'deg)');
          if (step) return step.apply(e, arguments);
        };
 
        $({deg: 0}).animate({deg: angle}, args);
      });
    };

Selanjutnya, kita akan mengatur ulang semua properti dari halaman utama dan fadenya. Ketika mainlink dan nextlink diklik akan melaksanakan fungsi dia.

Fungsi pertama akan memudarkan teks dalam halaman utama dan membuat objek menyusut. Setelah eksekusi objek berputar menggunakan fungsi untuk transisi rotasi.

$("#main-page").css("background-color", "#e74c3c");
$("#main-page").css("height", "100vh");
$("#main-page").css("width", "100%");
$("#main-page").fadeIn();
$(".maincontent").fadeIn();
 
$(".mainlink").on("click", function() {
    $(".maincontent").fadeOut();
    $("#main-page").animate({
        width: "25px",
        height: "375px"
    }, function() {
        $(this).animateRotate(90);
    });
     
    setTimeout(function() {
        $("#main-page").fadeOut();       
    }, 1500);
     
    setTimeout(function() {
        $("#next-page").animateRotate(0, 0);
        $("#next-page").css("height", "25px");
        $("#next-page").css("width", "375px");
        $("#next-page").fadeIn();
        $("#next-page").animate({
            backgroundColor: "#27ae60"
        }, function() {
            $(this).animate({
                height: "100vh"
            }, function() {
                $(this).animate({
                    width: "100%"
                }, function() {
                    $(".nextcontent").fadeIn(300);
                });
            });
        });
    }, 800);
});

Setelah semua langkah ini, fungsi fade out objek yang diklik untuk menunjukan objek baru dan kemudian mengubah warna background dari objek yang cocok dengan objek baru.

Terakhir, kita menghidupkan tinggi dan lebar serta memudar dalam isi objek baru ditampilkan.

$(".nextlink").on("click", function() {
        $(".nextcontent").fadeOut();
        $("#next-page").animate({
            width: "25px",
            height: "375px"
        }, function() {
            $(this).animateRotate(-90);
        });
         
        setTimeout(function() {
            $("#next-page").fadeOut();          
        }, 1500);
         
        setTimeout(function() {
        $("#main-page").animateRotate(0, 0);
        $("#main-page").css("height", "25px");
        $("#main-page").css("width", "375px");
            $("#main-page").fadeIn();
            $("#main-page").animate({
                height: "100vh"
            }, function() {
                $(this).animate({
                    width: "100%"
                }, function() {
                    $(".maincontent").fadeIn(300);
                });
            });
        }, 1400);
    });
     
});

Demo