Membuat box glasses dengan CSS3 dan HTML5

Wih udah 2 taun ane ngga ngepos di nih blog. Iseng - iseng ngecek linknya eh ternyata masih idup nih blog, yaudah sekalian nostalgila sekali kali ngepos ah. :v :v :v

Kali ini ane mau bagi bagi trik css buat yang main web design atau apapun yang berhubungan dengan css. Langsung aja deh biar ga kelamaan *(Padahal mau DOTA :v :v :v ).

Okey, ane mau ngasih sedikit script css buat bikin box glass, yang hasilnya akan jadi seperti ini :

Pertama siapkan file htmlnya terlebih dahulu. Buat <div> baru dan tambahkan class "glass". Atau kalo bingung nulis scriptnya gini di html <div class="glass"></div>.

Langkah selanjutnya. Buat file css dan tulis code seperti di bawah ini dan beri nama

 glass.css.

glass.css

.glass{
 padding:5%;
 width:100px;
 height:100px;
 border-radius:4px;
 -webkit-box-shadow:
  0 2px 6px rgba(0,0,0,0.5),  
  inset 0 1px rgba(255,255,255,0.3),  
  inset 0 10px rgba(255,255,255,0.2),
  inset 0 10px 20px rgba(255,255,255,0.25),
  inset 0 -15px 30px rgba(0,0,0,0.3); 
 -moz-box-shadow:
  0 2px 6px rgba(0,0,0,0.5),
  inset 0 1px rgba(255,255,255,0.3),  
  inset 0 10px rgba(255,255,255,0.2),
  inset 0 10px 20px rgba(255,255,255,0.25),
  inset 0 -15px 30px rgba(0,0,0,0.3);
 box-shadow:
  0 2px 6px rgba(0,0,0,0.5),  
  inset 0 1px rgba(255,255,255,0.3),  
  inset 0 10px rgba(255,255,255,0.2),
  inset 0 10px 20px rgba(255,255,255,0.25),  
  inset 0 -15px 30px rgba(0,0,0,0.3); 
 background:rgba(0,0,0,0.25);}

lalu panggil library file css dari html dengan menambahkan perintah pada head html seperti berikut

<link href="css/glass.css" rel="stylesheet" />

Jika sudah berati udah tinggal panggil lewat tag di body html. Misal pada body html terdapat <div> maka berikan class="glass" untuk merubah form menjadi glasses/transparent.

Jika semua sudah di lakukan langkah selanjutnya, akses folder project tersebut dari browser.

Selamat Mencoba.