Mecha versi 2.6.4 sudah dirilis!

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.