ط§ظ„ط¯ط±ط³ ط§ظ„ط£ظˆظ„ ظپظٹ CSS 3 (طھظ‚ظ†ظٹط§طھ ط¥ط*طھط±ط§ظپظٹط© ط¬ط¯ط§ظ‹)(ط¯ظˆط±ط© طھط¹ظ„ظ… ط§ظ„ط¨ط±ظ…ط¬ط©)



السلام عليكم ورحمة الله وبركاته .
الدرس مفصل الأول فيCSS3 (تقنيات إحترافية جداً)(دورة تعلم البرمجة)



اليوم في درس مفصل آخر من دورتنا سنتعلم بعض التقنيات الجميلة جداً في لغة الCSS
منها :
إستخدام خطوط غير موجودة في جهاز المستخدم .
الأنيميشن كما بالجيكويري
عمل rotate لصورة او شئ آخر
جعل أي صورة كخلفية لنص ما
نتائج الدرس مفصل :
وأشياء اخري غير ذلك
ستشعر انك تمتلك الفوتوشوب ، بمجرد إستعمالك الCSS3
في البداية سنشرح طريقة الخاصية الأولي وهي تخص إستخدام خطوط غير موجودة في جهاز المستخدم ،
ويجب ان نوضح ان الCSS3 بعض خواصها غير متوافقة مع كل المتصفحات ، وغالباً متصفح الكروم هو الأفضل في الCSS3
أيضاً متصفح السافاري مناسب جداً
الآن انسخ ملف الخط الذي تمتلكه وضع في نفس مجلد الملفات الخاصة بنا
اذهب لملف الcss
ونبدأ بهذا الكود code :
@font_face{
}
بينه ضع font-family
وضع القيمة myfirstfont
وتحت الfont-family ضع
src: url('font.ttf');
الآن روح للكلاس box
وضع font-family اجعل قيمته myfirstfont
مع الملاحظة ان الانترنت اكسبلورر يدعم صيغة الخطوط eot فقط
الآن ضع أي نص في ملف الhtml داخل وسف ديف مثلاً مع إختيار الكلاس box او الإسم الذي اخترته
الآن شاهد الصفحة وستجد الكود code يعمل جيداً .
لتجربة الكود code : ورؤية النتيجة :
الآن نذهب للخاصية الأخري ، rotate
مثلاً مثلاً قم بعمل div وضع width و height و لون للخلفية الخاصة به
وقم بـوضع الكود code التالي في كلاس الdiv
transform:rotate(XXdeg);
وغير XX إلي أي قيمة ، هي الي حدد زاوية الrotate
وستحصل علي نتيجة تشبه هذه النتيجة :
الآن انتهينا من الدرس مفصل الأول في CSS 3
الدرس مفصل القادم سنكمل الدروس الأخري .
بالتوفيق .


المصدر : درس مفصل في CSS 3 | نقطة مطور









©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©