ini dia kehebatan CSS3,effect'a yang keren dan mirip dengan effect jquery dan flash.menggunakan css3 tidak akan memberatkan blog sobat tergantung banyak'a pemakaian css pada blog sobat
,nah..kali ini saya akan share 30 Kreasi css3 dari saya yang unik2 n_n
,terdiri dari jenis CSS3 border radius atau corner,CSS3 gradient,dan CSS3 animation.untuk menikmati CSS3 ini,disarankan sobat menggunakan browser versi terbaru,dan mendukung CSS3 agar tidak ralat dalam menampilkan CSS3 ini sperti google chrome,safari,dan mozilla firefox,tetapi mozilla firefox saat ini belum mendukung 100% CSS3 animation.
Kode HTML
masukan kode html ini di elemen halaman sobat,tapi ganti class name pada kode html di bawah ini
<div class="ganti dengan nama css/kotak"></div>
Contoh:
<div class="kotak2"></div>
<div class="lingkaran"></div>
CSS3 Border radius
kotak1.kotak1 {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
}
Kotak2.kotak2 {
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
}
Segitiga atas
segitiga bawah
segitigakanan
segitigakiri
.segitigabawah {
border-color:#333333 transparent transparent;
border-style:solid;
border-width:20px 20px 0;
float:left;
height:0;
margin:0 10px;
width:0;
}
.segitigaatas {
border-color:transparent transparent #333333;
border-style:solid;
border-width:0 20px 20px;
float:left;
height:0;
margin:0 10px;
width:0;
}
.segitigakanan {
border-color: transparent transparent transparent #333333;
border-style:solid;
border-width:20px 20px 0;
float:left;
height:0;
margin:0 10px;
width:0;
}
.segitigakiri {
border-color:transparent #333333 transparent transparent;
border-style:solid;
border-width:20px 20px 0;
float:left;
height:0;
margin:0 10px;
width:0;
}
Lingkaran.lingkaran {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
background:#00C4FD;
width: 80px;
height: 80px;
line-height: 70px;
text-align: center;
}
Kotak3.kotak3 {
-webkit-box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
-moz-box-shadow: 1px 1px 20px #781081,-1px -1px 20px #FFFF55;
box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;}
Kotak4.kotak4 {
background:-moz-linear-gradient(-90deg, #00C4FD, #FFFF55) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#00C4FD), to(#FFFF55));
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;}
CSS3 Gradient
Kotak5.kotak5 {
background: -webkit-gradient(
radial, 500 25%, 20, 500 25%, 40, from(blue), to(#eee)
) yellow;
background: -moz-radial-gradient(
500px 25%, 20px, 500px 25%, 40px, from(blue), to(#eee)
) yellow no-repeat;
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}
Kotak6.kotak6 {
background: -webkit-gradient(
radial, 480 25%, 20, 500 25%, 40, from(blue), to(#eee)
) yellow;
background: -moz-radial-gradient(
480px 25%, 20px, 500px 25%, 40px, from(blue), to(#eee)
) yellow no-repeat;
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}
Kotak7.kotak7 {
background: -webkit-gradient(
radial, 450 25%, 40, 500 25%, 20, from(blue), to(#eee)
) yellow;
background: -moz-radial-gradient(
450px 25%, 40px, 500px 25%, 20px, from(blue), to(#eee)
) yellow no-repeat;
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}
Kotak8.kotak8 {
background: -webkit-gradient(
radial, 500 50%, 10, 500 50%, 80, from(orange), color-stop(0.6, #fff), to(lightblue)
);
background: -moz-radial-gradient(
500px 50%, 10px, 500px 50%, 80px, from(orange), color-stop(0.6, #fff), to(lightblue)
) no-repeat;
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}
Kotak9.kotak9 {
background: -webkit-gradient(
radial, 500 50%, 20, 500 50%, 100, from(red), color-stop(0.2, orange), color-stop(0.4, yellow), color-stop(0.6, green), color-stop(0.8, blue), to(#fff)
);
background: -moz-radial-gradient(
500px 50%, 20px, 500px 50%, 100px, from(red), color-stop(0.2, orange), color-stop(0.4, yellow), color-stop(0.6, green), color-stop(0.8, blue), to(#fff)
) no-repeat;
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}
Kotak10.kotak10 {
background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}
Kotak10.kotak11 {
background: -moz-linear-gradient(top, #f3e2c7 0%, #c19e67 50%, #b68d4c 51%, #e9d4b3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3e2c7), color-stop(50%,#c19e67), color-stop(51%,#b68d4c), color-stop(100%,#e9d4b3));
width: 500px;
height: 200px;
line-height: 50px;
text-align: center;}
CSS3 Animation
horizontal.kotak1animasi {
border-radius: 8px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak1animasi:hover {-moz-transform:translate(4em, 0pt);
-webkit-transform:translate(4em, 0pt);}
berputar.kotak2animasi {
border-radius: 8px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak2animasi:hover {
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);}
horizontal+vertikal.kotak3animasi {
border-radius: 8px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak3animasi:hover {
-moz-transform:translate(-3em, 1em);
-webkit-transform:translate(-3em, 1em);}
Ukuran.kotak4animasi {
border-radius: 8px;
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak4animasi:hover {
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);}
border.kotak5animasi {
background:#00C4FD;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak5animasi:hover {
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;}
Lingkaran.kotak6animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak6animasi:hover {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}
ukuran box.kotak7animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak7animasi:hover {
width: 300px;}
Warna.kotak8animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak8animasi:hover {
background:#D2506C;}
shadow+background trasparant.kotak9animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak9animasi:hover {
-moz-box-shadow:0 0 20px #D2506C;
-webkit-box-shadow:0 0 20px #D2506C;
background-color:rgba(255, 255, 255, 0.8);}
Shadow 2 warna.kotak10animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak10animasi:hover {
-webkit-box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
-moz-box-shadow: 1px 1px 20px #781081,-1px -1px 20px #FFFF55;
box-shadow: 1px 1px 20px #781081, -1px -1px 20px #FFFF55;
}
multi animasi.kotak11animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak11animasi:hover {
-webkit-animation-name: pulsate;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes pulsate {
0% { width:100px; }
5% { width:150px; left:-25px; }
10% { width:100px; left:0px; }
15% { width:150px; left:-35px; }
20% { width:100px; left:0px; }
40% { width:100px; background-color:#38374A; }
45% { width:150px; left:-25px; background-color:#FFFF55; }
50% { width:100px; left:0px; background-color:#FFFF55; }
55% { width:150px; left:-25px; background-color:#FFFF55; }
60% { width:100px; left:0px; background-color:#3FFFF55; }
80% { width:100px; background-color:#45002D; }
100% { width:100px; background-color:#00C4FD; }
}
Bounce effect.kotak12animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak12animasi:hover {
-webkit-animation-name: bounce;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 2;
-webkit-animation-direction: alternate;
}
@-webkit-keyframes bounce {
from {
margin-left: 0px;
}
to {
margin-left: 250px;
}
}
Fade effect.kotak13animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak13animasi:hover {
-webkit-animation-name: fade;
-webkit-animation-duration: 3s;
}
@-webkit-keyframes fade {
0% {
opacity: 1.0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1.0;
}
}
infinity Bounce effect.kotak14animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.6s ease-in-out;
}
.kotak14animasi:hover {
-webkit-animation-name: scale;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes scale {
from{
-webkit-transform: scale(1);
}
50%{
-webkit-transform: scale(0.85);
animation-timing-function: ease-out;
}
to{
-webkit-transform: scale(1);
animation-timing-function: ease-out;
}
}
rotate.kotak15animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 1.0s ease-in-out;
}
.kotak15animasi:hover {
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
.kotak16animasi {Helloapa kabar n_n
background: #e3e3e3;
border: 1px dashed #666;
margin: auto;
width: 400px;
height: 200px;
cursor: pointer;
position: relative;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.kotak16animasi::after {
content: '';
position: absolute;
width: 70%;
height: 10px;
bottom: 0;
left: 15%;
z-index: -1;
-webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
-moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
box-shadow: 0 9px 20px rgba(0,0,0,.4);
}
.kotak16animasi > div {
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
background: #e3e3e3;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
font: 45px/200px bold helvetica, arial, sans-serif;
text-align: center;
text-shadow: 0 1px 0 white;
}
.kotak16animasi > div:first-child {
position: relative;
z-index: 2;
}
.kotak16animasi:hover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.kotak16animasi:hover > div:first-child {
opacity: 0;
}
.kotak16animasi:hover div:last-child {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}Khusus untuk trik ini,kode html'a seperti dibawah ini
<div class="kotak16animasi">
<div>
Hello</div>
<div>
apa kabar n_n </div>
</div>
moving.kotak17animasi {
background:#00C4FD;
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
-webkit-transition: all 1.0s ease-in-out;
}
.kotak17animasi:hover {
-webkit-transform: translate(540px,-200px);
}
Keterangan:
-webkit-transition: all 0.6s ease-in-out; *waktu effect animasi*
-moz-transform:translate(3em, 0pt); *moving effect/berpindah tempat/horizontal*
-moz-transform:rotate(30deg); *rotate effect/berputar*
-webkit-transform:translate(-3em, 1em); *moving effect/berpindah tempat/horizontal+vertikal*
-webkit-transform:scale(1.3); *scale effect/mengubah ukuran*
-webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4); *effect shadow/bayangan*
background:-moz-linear-gradient(-90deg, #00C4FD, #FFFF55) repeat scroll 0 0 transparent; *effect gradient*
Webkit :Google Chrome
Moz : Mozzila firefox
Selamat mencoba,semoga bermanfaat dan jangan lupa tinggalkan komentar'a ya n_n
Posting Komentar