Kotak Melayang

Tabel Konten
  1. CSS 
  2. Demo 
Efek Melayang dengan CSS Box-Shadow

CSS 

span {
  display:inline-block;
  position:relative;
  background-color:white;
  width:70px;
  height:70px;
  margin:0 5px;
  -webkit-box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
  -moz-box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
  box-shadow:0 10px 5px -4px rgba(0,0,0,.2);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  font:normal normal 30px/70px "Comic Sans MS",Verdana,Arial,Sans-Serif;
  text-align:center;
  color:#888;
  cursor:default;
}

span:hover {
  top:5px;
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,.2);
  -moz-box-shadow:0 2px 2px rgba(0,0,0,.2);
  box-shadow:0 2px 2px rgba(0,0,0,.2);
}

span:active {
  top:6px;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.2);
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}

Demo 

Lihat Demo

15 Komentar

  • abang ichal

    weww itu semacamm tombol pencet pencet

  • Kang Kapuk

    Ha..ha..aya-aya wae nih Bang Aufiq.....

  • Beben Koben

    jadi menarik krn perpaduan warna dan shadownya pas banget.
    kayak kopi gitoooh

  • Unknown

    alhamdulillah semakin faham nih caranya... CSS2 gaulnya banyakin ya kang :D

  • Unknown

    mas untuk tombol2 itu bisa di isi link gak ya..?

    • Taufik Nurrohman

      Ganti elemen <span> dengan <a>

      • Anonim

        Komentar ini telah dihapus oleh administrator blog.

        • Taufik Nurrohman

          Bantuin apa? Bantuin simsalabim prok-prok-prok? Pertanyaannya tidak jelas.

          • Anonim

            saya mau buat sistem quote di komentar blogger dengan memanfaatkan permalink mas

            • Taufik Nurrohman

              Telat. Komentarmu sudah terhapus :\

              • Anonim

                saya tadi pengen nyoba buat di jsfiddle colaborate hehe tapi gak ada temen hehe
                <a rel="nofollow" href="http://nevermore-404.blogspot.com/2013/06/template-061813.html?showComment=1381504560063#c5538618462762517604">Jumat, Oktober 11, 2013</a>
                terus ambil c5538618462762517604 buat IDnya nanti .html di comentar pake .replace

                ngerti gak mas :(

              • Anonim

                mas mau nanya,ini kok gak muncul inputnya ya ??
                $(function() {
                var $button = $('.item-control'),
                $quote = $('.quote');
                $button.after('<a class="qoute" href="#9869595">Quote</a>');
                $quote.on("click", function() {
                $(this).after('<input class="quot" type="text" size="6" value=" ' + this.href + '" />');
                });
                });

              • Anonim

                iya mas maaf makanya tadi pengen di js fiddle
                mkst saya nanti pertama ambil html dari id #c5538618462762517604 pas Quote di klik muncul <i rel="code">#c5538618462762517604</i>

                terus pas ada orang yang komentar begitu di ubah pake .replace jadi isi html dari komentar dengan id #c5538618462762517604

Komentar telah ditutup.