يعطيكم العافية ياااااااارب ...
أنا بعتذر على التأخير ..
من غير مقدمة خفوت بالدرس طبعا للماتابع الدرس الأول مو مشكلة بيقدر يكمل من هون .. لأنو كان مقدمة سريعة..
اليوم مكونات الدرس ستكون في الحدود ::
- الحدود (border).
الحدود
التأثيرات كالتالي :
border-radius
هذا التأثر متوافق مع جميع المتصفحات التي ذكرتها في الدرس الأول دون أي اضافة .
هذا يجعل المربع او الحدود بشكل دائري كما تريد .
box-shadow
هذا الكود متوافق مع جميع المتصفحات عدا
opera يلزمك اضافة
-webkit-
وهذا يضع ظل جميل للمربع والحدود .
border-image
متوافقة مع جميع المتصفحات عدا IE 9
طبعا يجب أن تسبق بـ::
موزيلا -moz-
أوبرا -o-
سافاري وكروم -webkit-
طرق الكتابة :
border-radius
ليس له قيمة افتراضية :
- border-radius:20px
- border-radius:2em
- border-radius:100%
- border-top-left-radius:20px
- border-top-right-radius:2em
- border-bottom-left-radius:20px
- border-bottom-right-radius:100px
إذا نلاحظ أنه يمكن أن نضيق قسم ونترك الأخر .. ويمكن التعامل معها بالنسبة المئوية أو الأرقام .
box-shadow
هذا تأثير جميل قد تضيفه على قائمتك او على الجدول الكلي للموقع وهكذا .
له العديد من الخيارات الجميلة
طريقة الكتابة الأجبارية هي أن تحدد مكان الأزاحة العمودية والأفقية
box-shadow:الأفقية العمودية
مثال :
box-shadow:10px 10px;
الخيارات : وهم على الترتيب في المثال التالي :
البلورة (blur)
الأنتشار (spread)
اللون (color)
ظل داخلي (inset).
مثال :
box-shadow:10px 10px 30px 20px pink inset;
border-image
هذه غير متوفقة بعد مع الأنترنت اكسبلورر
هذه اضافة جميلة أيضا للأنترنت اكسبلورر .
مثال :
{
-moz-border-image:url("border.png") 30 30 stretch;
-webkit-border-image:url("border.png") 30 30 stretch;
-o-border-image:url("border.png") 30 30 stretch;
border-image:url("border.png") 30 30 stretch;
}
#stretch
الخيارات :بالترتيب :
رابط الصورة.
اللإقتطاع من الحدود .
عرض الحدود .
طريقة الحد له خياران أما ممتد أو بشكل دائري (round)(stretch).
هكذا نكون انتهينا من الجزء الخاص بالحدود