CSS Pure ,Form Tranparent With Material Desgin

Beranda

...

Programmer Forum
CSS Pure ,Form Tranparent With Material Desgin

giriadam

30-01-2018 13:55

CSS Pure ,Form Tranparent With Material Desgin

Permisi agan-agan , Kali ini saya akan membagikan Hasil Belajar Saya yang baru saja saya pelajari dari youtube tentang membuat Form Tranparent dengan CSS Pure dan Style material desgin Dari Google , Untuk spolier Bisa lihat di bawah :

Spoiler for ransparent Form With Pure CSS Whitout JQUERY:

CSS Pure ,Form Tranparent With Material Desgin

Untuk Tampilan :Hover atau di Klik Seperti Ini :

Spoiler for :Hover / Focus Pada saat di Klik:

Untuk Code ada di bawah Gan

Spoiler for Code:

Code:

<!DOCTYPE html>

<html>

<!--

//

// Pure Css Form Transparent.

// Css By : Giri Diwa Adam

// Source By : Youtube.com

// Copyright : 30-1-2018

// 

-->

<head>

 <meta charset="utf-8">

 <title>Input Form UI desgin</title>

 <style>

 body

{

 margin:0;

 padding:0;

 font-family: sans-serif;

 background: url(https://3.bp.blogspot.com/-b-fUv8R4dBo/Wm8ccujQtvI/AAAAAAAABiA/c6bFXopR4Ws887fEjaAq64hYasjwJhPjgCLcBGAs/s1600/mqrRVbA.png);

 background-size: cover;

}

.box 

{

 position: absolute;

 top: 50%;

 left: 50%;

 transform: translate(-50%,-50%);

 width: 400px;

 padding: 40px;

 background: rgba(0,0,0,.8); 

 box-sizing: border-box;

 box-shadow: 0 15px 25px rgba(0,0,0,.5);

 border-radius: 10px;

}

.box h2 

{

 margin: 0 0 30px;

 padding:0;

 color: #fff;

 text-align: center;

}

.box .inputBox 

{

 position: relative;

}

.box .inputBox input

{

 width: 100%;

 padding: 10px 0;

 font-size: 16px;

 color: #fff;

 letter-spacing: 1px;

 margin-bottom: 30px;

 border: none;

 border-bottom: 1px solid #fff;

 outline: none;

 background:transparent;





}

.box .inputBox label 

{

 position: absolute;

 top:0;

 left:0;

 letter-spacing: 1px;

 padding: 10px 0;

 font-size: 16px;

 color: #fff;

 pointer-events: none;

 transition: .5s;



}

.box .inputBox input:focus ~ label,

.box .inputBox input:valid ~ label

{

 top: -18px;

 left: 0;

 color: #03a9f4;

 font-size: 12px;



}

.box input [type="submit"]

{

 border:none;

 outline: none;

 color:#fff;

 background:#03a9f4;

 padding:10px 20px;

 cursor: pointer;

 border-radius: 5px;

}

 </style> 

</head>

<body>

 <div class="box">

 <h2>Login</h2>

 <form>

 <div class="inputBox">

 <input type="text" name="" required="">

 <label>Username</label>

 </div>

 <div class="inputBox">

 <input type="Password" name="" required="">

 <label>Password</label>

 </div>

 <input type="submit" name="" value="submit">

 </form>

 </div>

</body>

</html>

Cuma Ada Kekurangan 1 Aja yaitu di bagian Tombol Submit yang belum terlihat Sperti Tampilan Material Desgin, Dan saya sedang mengembangkan Biar Tampilanya Non-Flat atau Pure Material desgin.

Tunggu Up Selanjutnya ya

Salam Cendol Gan :
emoticon-Toast