السلام عليكم ورحمة الله وبركاته ..
أحببت أخوتي بالله أن نكون على استباق مع الثورات العلمية والأبداع والخيال في التصميم والأبداع ,,
ولما رأيت في css3 من ابداع واضافات جديدة ..
أحببت أن أذكر لكم أساسيات هذه اللغة الرائعة للتنسيق ..
متطبات الدورة ..
1.معرفة مسبقة html .
2.معرفة مسبقة css أو css2 .
اعتمدت في دروسي على :
- موقع w3schools
- w3
- tutsplus
- خبرتي المتواضعة .
هذه اللغة ليست معتمدة كليا من w3 ولكن كثير من المتصفحات الجديدة تدعمها ..
لكي يعمل معك الCSS3 عليك أن يكون لديك أحد المتصفحات التالية ::
IE9
FireFox4 or 5
netscape
opera 10
google chrome
على بركة الله ..
مالجديد في CSS 3 :
مايسمى Moudles .
لم أجد تعريب مناسب لهذه الكلمة في الحقيقة .
المودلز الجديدة هي كالتالي :
- المحددات (selectors)
- موديل الصناديق (box models)
- الخلفيات والحدود (فيها اضافات جديدة )
- تأثيرات النصوص .
- التدوير الثنائي البعد ,والثلاثي البعد .
- التحريك (animation).
- واجهة المستخدم
درسنا اليوم سيكون عن كيف أجعل بعض حركاتي متوافقة مع المتسعرضات ..
إذا كان مستعرضك IE9 فلا تحتاج لكتابة أي شيء أمام هذه الحركة .
mozila >أحيانا قد تجد أننا نكتب أما الحركة -moz- مثال
-moz-border-radius:25px;
وذلك لجعلها تعمل على متصفحات فايرفوكس القديمة قليلا .
chrome و netscape نكتب أما الحركة ..
-webkit-
مثال
-webkit-box-shadow: 10px 10px 5px #888888;
أما للـopera نكتب -o-
مثال ::
-o-border-image:url(border.png)
وهذا مثال شامل
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}تابعوني في الدرس الثاني لأنه سيكون طويل قليلا ..
لامارتير