السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
berjumpa lagi dengan saya selaku admin coding pintar.
pada kesempatn kali ini saya akan memberikan tutorial Cara Membuat Effect Tile Transition Hover Dengan CSS .
Tutorial kali ini hampir sama dengan tutorial yang pernah saya buat sebelumnya silahkan lihat DISINI, namun pada kali ini saya tidak menggunakan image melainkan button yang akan kita beri effect transition, effect ini merupakan fitur terbaru dari css3,
tidak usah nerlama-lama lagi, silahkan ikuti langkah-langkah di bawah ini dengan benar.
1. Membuat File HTML
seperti tutorial yang lainnya, silahkan anda buat file bernama index.html dan isikan script berikut
<!DOCTYPE html>
<html>
<head>
<title>Transition Effect</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="tile flip">
<div>
HOVER THIS
</div>
<a href="#">
CLICK
</a>
</div>
<div class="tile slide">
<div>
HOVER THIS
</div>
<a href="#">
CLICK
</a>
</div>
<div class="tile shutter">
<div>
HOVER THIS
</div>
<a href="#">
CLICK
</a>
</div>
<div class="tile page">
<div>
HOVER THIS
</div>
<a href="#">
CLICK
</a>
</div>
</body>
</html> Jika file html sudah di buat langkah selanjutnya adalah
2. Membuat File CSS
file css disini saya beri nama style.css script css disini berguna untuk membuat effect transition hover nantinya, silahkan ketik script berikut.
@import url("http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz");
/* Body general styles */
body {
background: #6C7A89;
font-family: "Yanone Kaffeesatz", sans-serif;
text-align: center;
width: 100%;
font-size: 45px;
/* Vertical centering */
top: 50%;
position: absolute;
height: 100px;
margin-top: -50px;
}
/* Margin between tiles */
body > div + div {
margin-left: 50px;
}
/* Style of every tile */
.tile {
display: inline-block;
width: 200px;
height: 100px;
line-height: 100px;
perspective: 300px;
/* Style for containing elements */
/* Style for the hidden link */
}
.tile > div,
.tile a {
width: 100%;
color: #30261c;
background-color: #e4ecb9;
text-align: center;
}
.tile > a {
display: block;
text-decoration: none;
background-color: #19B5FE;
color: #ffffff
}
/* Flip effect */
.flip > div,
.flip a {
position: absolute;
}
.flip > a {
transform: rotateX(-90deg);
}
.flip:hover > div {
transform: rotateX(90deg);
}
.flip:hover > a {
transform: rotateX(0deg);
}
.flip:hover > div,
.flip > a {
transition: 0.15s all linear 0;
}
.flip:hover > a,
.flip > div {
transition: 0.15s all linear 0.05s;
}
/* Slide effect */
.slide {
overflow: hidden;
}
.slide > div,
.slide a {
transition: 0.4s all linear;
position: absolute;
}
.slide > a {
transform: translate(200px, 0);
}
.slide:hover > div {
transform: translate(-200px, 0);
}
.slide:hover > a {
transform: translate(0, 0);
}
/* Shutter effect */
.shutter > div,
.shutter a {
transition: 0.3s all linear;
position: absolute;
}
.shutter > div {
z-index: 10;
transform-origin: 0% 0%;
}
.shutter:hover > div {
transform: rotateX(90deg);
}
/* Page effect */
.page > div,
.page a {
transition: 0.3s all linear;
position: absolute;
z-index: 5;
}
.page > div {
z-index: 10;
transform-origin: 0% 0%;
}
.page:hover > div {
transform: rotateX(360deg);
z-index: 1;
}
Nah itu dia Cara Membuat Tile Transition Effect Dengan CSS mudah bukan ? :D
Mohon maaf jika tidak ada demonya :D
Silahkan anda coba dan anda kembangkan sendiri .
semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D
0 komentar:
Posting Komentar