فواصل » خاصيه،مربع،الظل،سي،اس،اس،ثري،css3 http://portal.fwasl.com Wed, 16 Oct 2019 18:49:35 +0000 ar hourly 1 https://wordpress.org/?v=3.9.40 خاصية مربع الظل بـ CSS3 http://portal.fwasl.com/%d8%ae%d8%a7%d8%b5%d9%8a%d8%a9-%d9%85%d8%b1%d8%a8%d8%b9-%d8%a7%d9%84%d8%b8%d9%84-%d8%a8%d9%80-css3/ http://portal.fwasl.com/%d8%ae%d8%a7%d8%b5%d9%8a%d8%a9-%d9%85%d8%b1%d8%a8%d8%b9-%d8%a7%d9%84%d8%b8%d9%84-%d8%a8%d9%80-css3/#comments Sat, 07 Jan 2012 21:48:37 +0000 http://www.portal.fwasl.com/?p=7304 CSS3 يدعم خاصية جديدة تسمي “علبة الظل” الخاصية التي تقوم بإضافة الظلال إلى العناصر على الصفحة الخاصة بك ،
عبارة الــ “box-shadow” :

[html] box-shadow: <horizontal> <vertical> <blur> <color>
[/html]

حيث :
Horizontal :ويحدد طول الأفقي إزاحة الظل. قيمة موجبة (أي : 5PX) سوف يجعل الظل على يمين المربع ، في حين أن القيمة سالبة (أي : – 10px) وجعله على يسار بدلا من ذلك.

Vertical:ويحدد طول العمودي إزاحة الظل. قيمة موجبة (أي : 5PX) سوف يجعل الظل التالية الجزء السفلي من مربع، في حين أن القيمة سالبة (أي : – 10px) وجعله بدلا من ذلك إلى اليسار

Blur: تحديد طول نصف قطرها انتشار الطمس. القيمة الافتراضية هي 0 ، والذي يعني عدم وجود ضبابية. يزيد من الضبابية، في حين تقلص قيمة سالبة في واقع الظل. و 0 إذافي الحالة الإفتراضيه.

color: قيمة اللون أي تحديد لون الظل.

المثال الأول:

عمل صندوق ظلال مع offset لليمين وللأسفل بدون blur :

[html] <style type="text/css">
.shadow1{
box-shadow: 5px 5px #818181;
-webkit-box-shadow: 5px 5px #818181;
-moz-box-shadow: 5px 5px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
}
</style>

<div style="width:500px; height:50px; padding:5px; background:navy; border: 1px solid black;"> </div>
[/html]

هذا التأثير لصندوق الظل مشابه للتأثير الأول ولكن مع اضافة blur خفيف:

[html] <style type="text/css">
.shadow2{
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
</style>

<div style="width:500px; height:50px; padding:5px; background:navy; border: 1px solid black;"> </div>
[/html] ]]> http://portal.fwasl.com/%d8%ae%d8%a7%d8%b5%d9%8a%d8%a9-%d9%85%d8%b1%d8%a8%d8%b9-%d8%a7%d9%84%d8%b8%d9%84-%d8%a8%d9%80-css3/feed/ 0