PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : [آموزش] سایه ی جعبه در CSS3



Mohsen Neo
2012/07/02, 01:08 AM
درود..

در css میشه به جعبه ها سایه داد !

به عکس زیر توجه کنید:
http://up.vbiran.ir/images/aq4qwcuhvv3xega4ow.jpg

برای سایه دار کردن جعبه بصورت بالا :

.saye1{
box-shadow: 2px 3px 5px 3px #CCC;
font-family:tahoma;
margin-top:100px;
font-size: 36px;
width:200px;
height:100px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
color:#666;
padding:10px;
}

2px : مقدار فاصله از چپ و راست (اگه میخواین از چپ فاصله داشته باشه باید عدد منفی بکار ببرید.)
3px : مقدار فاصله از بالا و پایین (اگه میخواین از بالا فاصله داشته باشه باید عدد منفی بکار ببرید.)
5px : مقدار تار بودن سایه
3px : مقدار حجم و توپر بودن سایه
#CCC : رنگ سایه !

http://up.vbiran.ir/images/0mj36u90nty5la4o902.jpg
برای این که سایه از داخل باشه مانند عکس بالا باید inset به کد اضافه کنید:


.saye_vbiran_2{
box-shadow: 2px 3px 5px 3px #CCC inset;
font-family:tahoma;
margin-top:100px;
font-size: 36px;
width:200px;
height:100px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
color:#666;
padding:10px;
}

و در آخر در فایل html به این صورت قرار میدهیم:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Box-Shadow VBIran</title>
<style type="text/css">

.saye_vbiran_1{
-webkit-box-shadow: 2px 3px 5px 3px #CCC;
box-shadow: 2px 3px 5px 3px #CCC;
font-family:tahoma;
margin-top:100px;
font-size: 36px;
width:200px;
height:100px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
color:#666;
padding:10px;
}
.saye_vbiran_2{
-webkit-box-shadow: 2px 3px 5px 3px #CCC inset;
box-shadow: 2px 3px 5px 3px #CCC inset;
font-family:tahoma;
margin-top:100px;
font-size: 36px;
width:200px;
height:100px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
color:#666;
padding:10px;
}
</style>
</head>

<body>
<center>
<div class="saye_vbiran_1">VBIran</div>
<div class="saye_vbiran_2">VBIran</div>
</center>
</body>
</html>
دمو: Box-Shadow VBIran (http://mohseneo.persiangig.com/box-shadow_vbiran.html)
منبع: وی بی ایران