Archive for September 2013
Kode CSS3
.h{
text-shadow: 2px 3px 3px black;
font-size:20px;
font-family:"calibri";
color:#b7babb;
}
.m{
box-shadow: 2px 3px 3px black;
}
.g{
border-radius:20px;
}
.j{
box-shadow: 2px 2px 3px black;
}
.l{
font-size: 50px;
color: #716866;
text-shadow: 0 1px 0 #777, 0 -1px 0 #000;
}
.z{
background-color:#6a7375;
opacity:0.66;
}
ul.g li{
float:Left;
margin: 0 10 px;
padding: 10px;
border: 0px solid #ddd;
list-style: none;
width:10px;
}
ul.g li a img{
float: left;
width: 200px;
-webkit-transition: -webkit-transform 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
}
ul.g li a:hover img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1.5);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
ul.g li a:hover.b img {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
ul.g li a:hover.c img {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
ul.g li a:hover.d img {
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
transform: rotate(-50deg);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
ul.g li a:hover.e img {
-webkit-transform: rotate(-50deg)skew(-30deg);
-moz-transform: rotate(-50deg)skew(30deg);
transform: rotate(-50deg)(30deg);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
ul.g li a:hover.f img {
-webkit-transform: skew(-60deg);
-moz-transform: skew(-60deg);
transform: (-60deg);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
ul.g li a:hover.h img {
-webkit-transform: scale(1)translate(20px,40px);
-moz-transform: scale(1)translate(20px,40px);
transform: scale(1)translate(20px,40px);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
ul.g li a:hover.j img {
-webkit-transform: scale(1)translate(-20px);
-moz-transform: scale(1)translate(-20px);
transform: scale(1.5)translate(-20px);
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
ul.g li a:hover.k img {
-webkit-transform: scale(1)translate(60px);
-moz-transform: scale(1)translate(60px);
transform: scale(1.5)translate(60px)
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
Kode HTML dengan CSS3
<html>
<head>
<link href="../css/css2.css" rel="stylesheet">
</head>
<body bgcolor= #a9a2a0>
<div class="l">
<center>"CSS3 Properties"</center>
</div>
<br>
<br>
<br>
<br>
<br>
<table align="center"width="845"class="m"bgcolor="#818384">
<tr class="h">
<th width="263"align="center"scope="col">Rotate 1
<ul class="g">
<li><a href="#"class="b"><img src="../images/orange.jpg"height=180px"width=180px"></a></li>
</th>
<th width="263"align="center"scope="col">Rotate 2
<ul class="g">
<li><a href="#"class="d"><img src="../images/green2.jpg"height=180px"width=180px"></a></li>
</th>
<th width="263"align="center"scope="col">Rotate 3
<ul class="g">
<li><a href="#"class="c"><img src="../images/pink.jpg"height=180px"width=80px"></a></li>
</th>
</tr>
<tr class="h">
<th width="263"align="center"scope="col">Skew 1
<ul class="g">
<li><a href="#"class="e"><img src="../images/pink2.jpg"height=180px"width=80px"></a></li>
</th>
<th width="263"align="center"scope="col">Zoom
<ul class="g">
<li><a href="#"><img src="../images/purple.jpg"height=180px"width=80px"></a></li>
</th>
<th width="263"align="Center"scope="col">Skew 2
<ul class="g">
<li><a href="#"class="f"><img src="../images/green3.jpg"height=180px"width=80px"></a></li>
</th>
</tr>
<tr class="h">
<th width="263"align ="center"scope="col">Translate 1
<ul class="g">
<li><a href="#"class="h"><img src="../images/orange3.jpg"height=180px"width=80px"></a></li>
</th>
<th width="263"align="Center"scope="col">Translate 2
<ul class="g">
<li><a href="#"class="j"><img src="../images/purple2.jpg"height=180px"width=80px"></a></li>
</th>
<th width="263"align="center"scope="col">Translate 3
<ul class="g">
<li><a href="#"class="k"><img src="../images/blue.jpg"height=180px"width=80px"></a></li>
</th>
</tr>
</div>
</table>
</body>
</html>
Posted by Unknown
Postingan
