Introduction
Date: 04/03/17: Internet browser is indicate by different code e.g.
- MS =Microsoft Internet Explorer
- Moz = Mozzila
- O = Opera
- Webkit = Chrome , Safari etc
Moz -border-radius-old version
Shadow for eCommerce
It is used with radious - menu - single product
Text shadow - menu - product and for quality increasing.
HTML Code for Product:
<!doctype html - >
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/product.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="product_title"> PRODUCT NAME</div>
<div class="product_image"><img src="images/40.jpg" width="200" height="250"> <p>Offer $100</p> </div>
<div class="product_price"> $250 </div>
</div>
</body>
</html>
CSS Code for Product:
@charset "utf-8";
/* CSS Document */
body
{ margin:0px; background-color: #999;}
.container{ width:200px; height:300px; margin:0px auto; background-color:#FFF; box-shadow:0px 15px 15px #000000;}
.product_title{ width:200px; height:25px; margin:0px;
background-color: #FCF; float:left; font-weight:bolder; font-size:20px; text-align:center; line-height:25px;}
.product_image{ width:200px; height:250px; margin:0px;
background-color: #F6F; float:left;}
.product_price{ width:50px; height:25px; margin:0px;
background-color: #99C; color: #FFF; float:left; padding-left:150px; line-height:25px;font-weight:bolder;}
p{ margin-top:-240px; transform:rotate(-35deg); color:#F00; font-weight:bolder; font-size:24px;}
Result of Above Code of Product:
HTML Code for Radius:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3-1 Document</title>
<link href="css/css3-1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="aa"> </div>
<div class="bb"> </div>
<div class="cc"> </div>
<div class="dd"> </div>
<div class="ee"> </div>
<div class="ff"> </div>
<div class="gg"> </div>
<div class="hh"> </div>
<div class="ii"> </div>
<div class="jj"> </div>
<div class="kk"> </div>
<div class="ll"> </div>
<div class="mm"> </div>
<div class="nn"> </div>
<div class="oo"> </div>
<div class="pp"></div>
<div class="qq"> </div>
<div class="rr"> </div>
<img src="images/woman.jpg" width="150" height="150" class="cc">
<div class="ss">LOGO </div>
<div class="tt">LOGO </div>
<div class="uu"> </div>
<div class="vv"> Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data Text data </div>
<div class="ww"><p> HOME</p></div>
<div class="xx" >HOME</div>
<div class="yy"> </div>
<div class="zz"></div>
</body>
</html>
CSS Code for Radius:
@charset "utf-8";
/* CSS Document */
.aa
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px;}
.bb
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px;
-moz-border-radius:20px;
-ms-border-radius:20px;
-o-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}
.cc
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px;
border-radius:45px;
}
.dd
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px;
border-radius:90px;
}
.ee
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px; border:5px solid #900;
border-radius:180px;
}
.ff
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px;
border-radius:180px 0px;
}
.gg
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px;
border-radius:0px 180px;
}
.hh
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px;
border-radius:60px 60px 0px 0px;
}
.ii
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px;border-radius:90px 0px 0px 0px;
}
.jj
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px;border-radius:180px 0px 60px 0px;
}
.kk
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px;border-radius:0px 90px 90px 0px;
}
.ll
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px;border-radius:90px 0px 90px 0px;
}
.mm
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px; box-shadow:10px 10px 5px #333333;
}
.nn
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px; box-shadow:0px 10px 5px #333333;
}
.oo
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px; box-shadow:-10px 10px 5px #333333;
}
.pp
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px; box-shadow:-0px -10px 5px #333333;
}
.qq
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px; box-shadow:20px 20px 50px #333333;
}
.rr
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px; box-shadow:20px 20px 1px #333333;
}
.ss
{ width:150px; height:150px; line-height:150px; text-align:center; color:#FFF; font-weight:bolder; font-size:24px;
background-color:#060; float:left; text-shadow:0px -5px 5px #000000;
margin:15px; box-shadow:20px 20px 1px #333333;
}
.tt
{ width:150px; height:150px; line-height:150px; text-align:center; color:#FFF; font-weight:bolder; font-size:24px;
background-color:#060; float:left; text-shadow:0px 5px 5px #000000;
margin:15px; box-shadow:20px 20px 1px #333333;
}
.uu
{ width:150px; height:150px;
background-color:#060; float:left;
margin:25px; box-shadow:0px 0px 10px 10px #333333;
}
.vv
{ width:250px; height:150px;
background-color:#060; float:left;
margin:15px; column-count:3;
column-rule:2px solid #0CF; text-align:justify;
}
.ww
{ width:250px; height:150px;
background-color:#060; float:left;
margin:15px; transform:rotate(45deg);
}
.xx
{ width:250px; height:150px;
background-color:#060; float:left;
margin:15px; transform:rotate(-45deg);
}
p{ transform:rotate(-45deg);}
.yy
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px; transition:2s;
}
.yy:hover
{ transform:rotate(-45deg); background-color: #93C;
}
.zz
{ width:150px; height:150px;
background-color:#060; float:left;
margin:15px; transition:2s;
}
.zz:hover
{ transform:rotate(45deg); background-color: #93C;
}
Result of Above Code for Radius:
0 Komentar untuk "CSS Programming for Wordpress Website Part7"