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 :
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.
Tidak ada komentar:
Posting Komentar