الفئات: التكنولوجيا والتطوير
كل ما تحتاج لمعرفته حول CSS Transition ، ما هو، وما هي الخصائص الرئيسية لـ CSS Transition وكيف يمكن أن يعطي الحياة لعناصر HTML.
وظائف التحويلات في الCSS التي يمكننا استخدامها في البيئات ثنائية وثلاثية الأبعاد. كيفية استخدام تحويلات CSS لتحريك العناصر حول الصفحة ثم تغيير حجمها وتدويرها.
استخدام تقنيات CSS Transforms and Transitions المختلفة لإنشاء أمثلة إبداعية مثل تأثيرات تمرير الأزرار ، وبعض تأثيرات التمرير على الصور ، وغير ذلك الكثير!
دروس مجانية
ما هي انتقالات CSS؟
أساسيات التحول ثنائي الأبعاد
خيارات انتقالات CSS
خاصية الترجمة CSS
طرق مختلفة لكتابة خاصية الانتقال
خاصية القياس CSS
ما هي الخصائص التي يمكن تحويلها؟
خاصية التدوير CSS
1. أساسيات انتقالات CSS
ما هي انتقالات CSS؟
خيارات انتقالات CSS
طرق مختلفة لكتابة خاصية الانتقال
ما هي الخصائص التي يمكن تحويلها؟
2. تحويلات ثنائي الابعاد CSS
أساسيات التحول ثنائي الأبعاد
خاصية الترجمة CSS
خاصية القياس CSS
خاصية التدوير CSS
خاصية انحراف CSS
خاصية تحديد احداثيات العنصر
3. تحويل ثلاثي الأبعاد
نقل العنصر وفق القيم ثلاثية الابعاد
التدوير لشكل ثلاثي الابعاد
4. تأثيرات الأزرار الإبداعية باستخدام Transforms CSS
نبذة عن محتوايات القسم
تصميم زر بحركة تمرير
تصميم زر بحركة متأرجحة
تصميم زر بحركة تمدد
تصميم زر بحركة السحب من أعلى إلى الأسفل مع النص
تصميم زر متوهج
تصميم زر بحركة تبادلية بين طبقتين
تصميم زر بحركة تغيير حجم الخط
تصميم زر بحركة تبادلية دائرية
تصميم زر بثلاث طبقات بحركة تدوير
تصميم زر بحركة تبادلية بين الطبقات من الشمال إلى اليمين
تصميم زر بثلاث دوائر في الخلفية
تصميم زر بحركة انقسامية
تصميم زر بحركة تبادل الاطار
تصميم بحركة زيادة حجم الإطارات
تأثير زر تدوير الحرف الأول
تصميم زر بحركة زيادة حجم الإطارات الأربعة
تصميم زر بحركة تموجي
تصميم زر بقطعين داخل الإطارات
تصميم زر بإطارين منحرفين
تصميم زر بحركة نابضة
تصميم زر بحركة التمرير القطري باستخدام الحدود
5. تأثيرات للصور باستخدام CSS Transforms.
تأثيرات الصور باستخدام CSS Transforms
تأثيرات الصور 1
تأثير تقريب الصورة باستخدام CSS Transforms
تأثير تأرجح الصورة باستخدام CSS Transforms
تأثيرات الصور 3
تأثيرات الصور 4
تأثير المتأرجح للصور باستخدام CSS transforms 5
تأثيرات الصور 6
تأثيرات الصور 7
تأثيرات الصور 8
تأثيرات الصور 9
تأثيرات الصور 10
تأثيرات الصور 11
6. تأثيرات للقوائم باستخدام CSS Transforms
تأثيرات للقوائم باستخدام CSS Transforms
لتأثير زيادة حجم الإطار للقائمة
تأثير الخلفية والاطار للقائمة
تأثير الخلفية المنقسمة للقائمة
تأثير إطارات الزر المتحركة للقائمة
تأثير القائمة الباهتة
تأثير القائمة باستخدام خاصية تأخير الانتقال
2 حدود و تأثير الخلفية لقائمة
تأثير Border Sniper للقائمة
تأثر حركة تدوير اطار القائمة
تأثير قائمة الطبقات الملونة
7. تأثيرات بطاقات Css باستخدام تحويلات Css
تأثيرات بطاقات Css باستخدام تحويلات CSS
تأثير احداثيات خلفية البطاقة
تأثير البطاقة بحركة توسع
تأثير بطاقة الكابتن مارفل
تأثير اطار البطاقة
تأثير التأرجح على بطاقة ذات الوجهين
تأثير تأرجح بين طبقات البطاقة
تأثير التدرج البطاقة
8. أمثلة أخرى رائعة مع تحويلات CSS
أمثلة أخرى رائعة مع تحويلات Css
تأثير نص مدخن باستخدام تحويلات CSS
تأثير تعبئة النص عند التمرير
تأثير التأرجح على ايقونات السوشيال ميديا
تأثير تدوير اطار النص باستخدام تحويلات CSS
لغة الCSS هي التي تساعد في تحديد شكل الموقع الالكتروني الخاص بك و كيف سيستمتع زوار موقعك باستخدامه. إحدى الميزات المتقدمة لـCSS هى التحويلات, فهي تتيح لك تغيير مواضع وأشكال العناصر على صفحة الويب بطرق مبدعة و بسيطة. ستساعدك هذه الدورة التدريبية في إتقان التحويلات وستكون نقطة البداية لإطلاق العنان لبناء واجهات فريدة وجذابة من البداية.
تتطلب هذه الدورة التدريبية معرفة مسبقة بـلغة CSS و HTML.
مطوّر ويب خبير
951 متعلمين
5 دورات