CSS 3D kontak
Kontak biasanya diterapkan pada sebuah website yang menyediakan layanan untuk menaynakan sesuatu yang terkait tentang artikel yang telah di buat pada situs.
Biasanya, kontak yang sediakan berupa tampilan biasa saja. Nah, kali ini kita akan membuatnya seperti 3D.
Langkah pertama tentu nyalakan web server, kemudian buka text editor favorit.
Lalu kita membuat sebuah file index.html yang berisi code seperti berikut.
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="1.page.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
<div class="container">
<div class="front side">
<div class="content">
<br><br><br>
<br><br><br>
<h1>3D CONTACT</h1>
</div>
</div>
<div class="back side">
<div class="content">
<h1>Contact Me</h1>
<form action="">
<label for="">Your Name :</label>
<br>
<input type="text" name="" placeholder="Put your username">
<br>
<label for="">Your E-mail</label>
<input type="email" name="" placeholder="Example@gmail.com">
<br>
<label for="">Your Message :</label>
<textarea type="text" name="" placeholder="The Subject"></textarea>
<br>
<input type="submit" name="" value="Done">
</form>
</div>
</div>
</div>
</body>
</html>
kemudian setelah itu kita buat file style.css kemudian paste code berikut ini kedalam file css.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
transform-style: preserve-3d;
position: relative;
background:url(https://images.unsplash.com/photo-1505526484636-f0a465cf6d19?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cddf9a77dd105083a255db9c99db753a&auto=format&fit=crop&w=1900&q=80);
font-family: arial;
}
.container{
min-width: 700px;
min-height: 350px;
border-radius: 20px;
position: relative;
transition: 1.5s ease-in-out;
transform-style: preserve-3d;
box-shadow:10px 10px 60px #000,
-10px -10px 60px #000;
}
.side{
position: absolute;
text-align: center;
width: 100%;
height: 100%;
padding-right: 20px 50px;
color: #fff;
transform-style: preserve-3d;
backface-visibility: hidden;
border-radius: 20px;
}
.content{
transform: translateZ(70px) scale(0.8);
line-height: 1.5em;
}
.content h1{
position: relative;
font-size: 20px;
font-family: arial;
}
.front{
z-index: 2;
background: url(https://images.unsplash.com/photo-1474291102916-622af5ff18bb?ixlib=rb-0.3.5&s=47d38ebcce41c8441068eaccbebb01a8&auto=format&fit=crop&w=1050&q=80);
background-size: cover;
background-repeat: no-repeat;
color: #fff;
}
.front h1{
color: #000;
font-size: 40px;
}
.back{
background-color: #333;
transform: rotateY(180deg);
z-index: 0;
padding-top: 10px;
background-image: url(https://st3.depositphotos.com/9768480/17103/v/600/depositphotos_171037556-stock-video-bokeh-circles-of-light-on.jpg);
background-size: cover;
}
.container:hover{
transform: rotateY(-180deg);
}
.back h1{
margin: 0;
text-shadow: 3px 4px 10px #000;
}
form label, form input{
display: block;
}
form input, form textarea{
background: transparent;
border: 0;
border-bottom: 2px solid #fff;
padding: 5px;
width: 100%;
color: #fff;
outline: none;
}
form label{
margin-left: 15px 0;
}
form input[type="submit"]{
display: block;
width: auto;
margin: 10px auto;
padding: 5px 10px;
border: 3px solid #fff;
border-radius: 4px;
color: #fff;
cursor: pointer;
}
.back .content h1:before{
content: "";
position: absolute;
bottom: -30px;
height: 3px;
background-color: white;
width: 70px;
left: 50%;
transform: translateX(-50%);
}
Simpan ke-2 file tersebut kedalam sebuah folder nama bebas, dan letakkan ke dalam direktory web server agar terbaca.
Kemudian jalankan program dengan web browser favorit.
Run Your Program Here
SELESAI!
No comments: