Membuat Tampilan Google dengan CSS3 Keren
Assalamu'alaikum Wr.Wb, bertemu lagi dengan saya Muhammad Tajuddin, dalam tutorial Cara Membuat Tampilan Google dengan CSS3 Keren, sedikit perubahan dalam desainnya, ya sedikit berbeda sih dengan Google aslinya, tapi untuk tampilan yang saya buat ini lebih keren lho...
Berikut Tampilannya
 |
| Tampilan Search Google | Karya Dunia Programming |
"Bagaimana cara membuatnya min..? jadi tidak sabar nih pengen nyobak hehehe, habisnya keren tuh keliatannya"
Oke, kalau tidak sabar, ya langsung saja, Ayo...!!
Buat folder kalian contoh, Google, dan simapn script HTML dibawah ini dengan nama index.html
Script HTML
<!doctype html>
<html>
<head>
<title>Jobsheet 8</title>
<link rel="shortcut icon" type="image/x-icon" href="images/logo.png">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<form action="" method="get">
<div id="form">
<div class="kotak1">
<p class="p2">G</p><p class="p3">o</p><p class="p4">o</p><p class="p2">g</p><p class="p5">l</p><p class="p3">e</p>
</div>
<p class="p1">Mesin Pencarian</p>
<input name="cari" type="text" placeholder="Cari" class="cari">
<input type="image" class="button" src="images/search.png">
<div class="wrapper2">
<div class="iklan1">
<h4>Tampilan Gambar Pada Kotak 1</h4>
<img src="images/2.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 1
</div>
<div class="iklan2">
<h4>Tampilan Gambar Pada Kotak 2</h4>
<img src="images/2.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 2
</div>
<div class="iklan3">
<h4>Tampilan Gambar Pada Kotak 3</h4>
<img src="images/3.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 3
</div>
<div class="iklan4">
<h4>Tampilan Gambar Pada Kotak 4</h4>
<img src="images/4.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 4
</div>
<div class="iklan5">
<h4>Tampilan Gambar Pada Kotak 5</h4>
<img src="images/3.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 5
</div>
</div>
</div>
</form>
</body>
</html>
<html>
<head>
<title>Jobsheet 8</title>
<link rel="shortcut icon" type="image/x-icon" href="images/logo.png">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<form action="" method="get">
<div id="form">
<div class="kotak1">
<p class="p2">G</p><p class="p3">o</p><p class="p4">o</p><p class="p2">g</p><p class="p5">l</p><p class="p3">e</p>
</div>
<p class="p1">Mesin Pencarian</p>
<input name="cari" type="text" placeholder="Cari" class="cari">
<input type="image" class="button" src="images/search.png">
<div class="wrapper2">
<div class="iklan1">
<h4>Tampilan Gambar Pada Kotak 1</h4>
<img src="images/2.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 1
</div>
<div class="iklan2">
<h4>Tampilan Gambar Pada Kotak 2</h4>
<img src="images/2.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 2
</div>
<div class="iklan3">
<h4>Tampilan Gambar Pada Kotak 3</h4>
<img src="images/3.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 3
</div>
<div class="iklan4">
<h4>Tampilan Gambar Pada Kotak 4</h4>
<img src="images/4.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 4
</div>
<div class="iklan5">
<h4>Tampilan Gambar Pada Kotak 5</h4>
<img src="images/3.jpg"><br><br>
Tampilan gambar yang terlihat pada kotak 5
</div>
</div>
</div>
</form>
</body>
</html>
Selanjutnya copykan script CSS dibawah ini kedalam file yang berbeda dengan HTM tadi. akan tetapi diletakkan dalam satu folder.
Script CSS
body {
background: #ffffff;
font-family: Arial;
}
#form {
background: #ffffff;
width: 1200px;
height: 500px;
padding: 10px;
border-radius: 4px;
margin: auto;
margin-top: 60px;
}
.kotak1 {
width: 130px;
height: 50px;
border: 0px solid black;
position: absolute;
margin-left: 535px;
margin-right: auto;
}
.p2 {
font-size: 2.5em;
color: #3498db;
text-align: center;
margin-bottom: -10px;
margin-top: 10px;
float: left;
}
.p3 {
font-size: 2.5em;
color: #e74c3c;
text-align: center;
margin-bottom: -10px;
margin-top: 10px;
float: left;
}
.p4 {
font-size: 2.5em;
color: #f1c40f;
text-align: center;
margin-bottom: -10px;
margin-top: 10px;
float: left;
}
.p5 {
font-size: 2.5em;
color: #2ecc71;
text-align: center;
margin-bottom: -10px;
margin-top: 10px;
float: left;
}
.p1 {
font-size: 1.5em;
color: #c9c9c9;
text-align: center;
padding-top: 50px;
}
input.cari {
width: 700px;
height: 50px;
border: 1px solid #c9c9c9;
border-radius: 3px 0px 0px 3px;
padding-left: 10px;
padding-right: 10px;
margin-left: 200px;
font-size: 1em;
color: #c9c9c9;
float: left;
}
input.cari:focus {
border: 1px solid #2ecc71;
box-shadow: glow variation;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
text-decoration: none;
}
input.button {
background: #e74c3c;
padding: 16px;
color: #ffffff;
width: 23px;
height: 23px;
border-radius: 0px 3px 3px 0px;
border: 0px solid #000000;
margin-left: -5px;
margin-bottom: -22px;
float: left;
}
input.button:hover {
background: #3498db;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
text-decoration: none;
}
.wrapper2 {
width: 1080px;
height: 280px;
text-align: center;
margin-top: 90px;
border: 0px solid black;
position: absolute;
margin-left: 50px;
}
img {
width: 150px;
height: 90px;
cursor: pointer;
border: 1px solid #c9c9c9;
}
.iklan1 {
width: 175px;
height: 270px;
border: 2px solid #1abc9c;
float: left;
margin-left: 0px;
border-radius: 5px;
padding: 10px;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan2 {
width: 175px;
height: 270px;
border: 2px solid #8e44ad;
float: left;
margin-left: 20px;
border-radius: 5px;
padding: 10px;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan3 {
width: 175px;
height: 270px;
border: 2px solid #3498db;
float: left;
margin-left: 20px;
border-radius: 5px;
padding: 10px;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan4 {
width: 175px;
height: 270px;
border: 2px solid #c0392b;
float: left;
margin-left: 20px;
border-radius: 5px;
padding: 10px;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan5 {
width: 175px;
height: 270px;
border: 2px solid #e67e22;
float: left;
margin-left: 20px;
border-radius: 5px;
padding: 10px;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan1:hover {
background: #16a085;
color: #ffffff;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan2:hover {
background: #9b59b6;
color: #ffffff;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan3:hover {
background: #3498db;
color: #ffffff;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan4:hover {
background: #c0392b;
color: #ffffff;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan5:hover {
background: #e67e22;
color: #ffffff;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
background: #ffffff;
font-family: Arial;
}
#form {
background: #ffffff;
width: 1200px;
height: 500px;
padding: 10px;
border-radius: 4px;
margin: auto;
margin-top: 60px;
}
.kotak1 {
width: 130px;
height: 50px;
border: 0px solid black;
position: absolute;
margin-left: 535px;
margin-right: auto;
}
.p2 {
font-size: 2.5em;
color: #3498db;
text-align: center;
margin-bottom: -10px;
margin-top: 10px;
float: left;
}
.p3 {
font-size: 2.5em;
color: #e74c3c;
text-align: center;
margin-bottom: -10px;
margin-top: 10px;
float: left;
}
.p4 {
font-size: 2.5em;
color: #f1c40f;
text-align: center;
margin-bottom: -10px;
margin-top: 10px;
float: left;
}
.p5 {
font-size: 2.5em;
color: #2ecc71;
text-align: center;
margin-bottom: -10px;
margin-top: 10px;
float: left;
}
.p1 {
font-size: 1.5em;
color: #c9c9c9;
text-align: center;
padding-top: 50px;
}
input.cari {
width: 700px;
height: 50px;
border: 1px solid #c9c9c9;
border-radius: 3px 0px 0px 3px;
padding-left: 10px;
padding-right: 10px;
margin-left: 200px;
font-size: 1em;
color: #c9c9c9;
float: left;
}
input.cari:focus {
border: 1px solid #2ecc71;
box-shadow: glow variation;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
text-decoration: none;
}
input.button {
background: #e74c3c;
padding: 16px;
color: #ffffff;
width: 23px;
height: 23px;
border-radius: 0px 3px 3px 0px;
border: 0px solid #000000;
margin-left: -5px;
margin-bottom: -22px;
float: left;
}
input.button:hover {
background: #3498db;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
text-decoration: none;
}
.wrapper2 {
width: 1080px;
height: 280px;
text-align: center;
margin-top: 90px;
border: 0px solid black;
position: absolute;
margin-left: 50px;
}
img {
width: 150px;
height: 90px;
cursor: pointer;
border: 1px solid #c9c9c9;
}
.iklan1 {
width: 175px;
height: 270px;
border: 2px solid #1abc9c;
float: left;
margin-left: 0px;
border-radius: 5px;
padding: 10px;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan2 {
width: 175px;
height: 270px;
border: 2px solid #8e44ad;
float: left;
margin-left: 20px;
border-radius: 5px;
padding: 10px;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan3 {
width: 175px;
height: 270px;
border: 2px solid #3498db;
float: left;
margin-left: 20px;
border-radius: 5px;
padding: 10px;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan4 {
width: 175px;
height: 270px;
border: 2px solid #c0392b;
float: left;
margin-left: 20px;
border-radius: 5px;
padding: 10px;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan5 {
width: 175px;
height: 270px;
border: 2px solid #e67e22;
float: left;
margin-left: 20px;
border-radius: 5px;
padding: 10px;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan1:hover {
background: #16a085;
color: #ffffff;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan2:hover {
background: #9b59b6;
color: #ffffff;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan3:hover {
background: #3498db;
color: #ffffff;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan4:hover {
background: #c0392b;
color: #ffffff;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
.iklan5:hover {
background: #e67e22;
color: #ffffff;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
Bagaimana...? menarik bukan tampilannya...? mau mencoba yang lain..?, Ikuti terus tutorial-tutorial menarik Dunia Programming Lainnya, dengan cara kirimkan alamat email kalian dikanan blog ini. dijamin kalian tidak akan ketinggalan informasi, Oke Saya pamit dulu hehehe, Terimakasih.
Belum ada Komentar untuk "Membuat Tampilan Google dengan CSS3 Keren"
Posting Komentar