Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

إنشاء صفحة دعابة حفيفة مع CSS3 بسرعة 

by
Length:MediumLanguages:

Arabic (العربية/عربي) translation by miahood (you can also view the original English article)

في هذا البرنامج التعليمي، سوف تتعلم كيفية بناء صفحة دعابة باستخدام فقط CSS، بدون صور أو حتى تصميم فوتوشوب. العديد من مواقع الويب و  التطبيقات المتطورة تكسب دعاية كبيرة من صفحات الدعابة، لذلك  هذا يعتبر مفهوم مفيد  حتى تضيفه إلى اهتماماتك .استخدمه التطبيق او موقع شبكة الإنترنت الذي يحضر للانطلاق


الخطوة 1: علامة HTML

ال HTML لصفحة الدعابة بسيط للغاية. ولدينا حاوية  بالنص الاستهلالي والمدخلات.


الخطوة 2: تحديد المواقع و الحجوم لعناصرنا

دعونا نعطي صفحتنا بعض البناء . نبدء مع الأساسيات، ونضع الحاوية  في وسط الصفحة. سوف نستخدم 50 ٪، والهوامش السلبية ل نرجع الهدف لنصف عرضه و طوله

التالي ، نضع النص والمدخلات بمواقعها، باستخدام (محددات السمات ) لاستهداف البريد الإلكتروني وتقديم المدخلات بشكل منفصل.


الخطوة 3: تصميم  النص

تصميم النص لهذه الصفحة بسيط جداً. نريد الاسم ان ينعكس مع الخلفية، لذا سنجعله ابيض النص مهم، ولكن نريد الزائرين يتذكرو اسم منتجنا ،لذا لن نجعله كما يلفظ ، يتم الرابط لتويتر سنضع تحته خط، للإشارة إلى انه رابط  .

أولاً، النص الأساسي:

ثم رابط تويتر:


الخطوة 4: تصميم الخلفية

الآن لجزء المتعة :إعطاء الاشياء على صفحتنا ذاك الشيء الاضافي (  je ne sais quoi  ).سوف نبدأ بإنشاء خلفية متدرجة لطيفة. إذا كنت مستخدم ماك  يمكنك أن تعتمد على (برنامج جريدينت ) للقيام بالعمل الشاق نيابة عنك. وبدلاً من ذلك،توجه ل  CSS3  لو سمحت !للحصول على فكرة عن بناء الجملة.


الخطوة 5: تصميم نموذج الاشتراك

نموذج الاشتراك هو محور التركيز لصفحتنا، نظراً لأننا نريد الزائرين لتعرف عندما يتم إصدار منتجنا المزهل . نريده أن يكون التركيز في الصفحة، بعد الاسم أو الشعار.

نبدأ بتصميم ماسك المكان (موزيلا و أنماط نت محددة)، وتحديد حجم خط:

الآن دعونا نعطي هذه الصفحة والايقونات بعض اللون والعمق:

خطوة 6: إضافة انتقالات CSS

دعونا نضيف بعض انتقالات CSS اللطيفة للمساعدة في جذب انتباه الزوار.

أولاً، سنقوم بإضافة تحوم و حالة نشطة  لرابط (تويتر )والمدخلات:

سوف نضيف قواعد الانتقال:

و


الخطوة 7: رسوم CSS المتحركة

كما يمكننا أن نضيف بعض حركات CSS3 اللطيفة لتأثير مضاف عند تحميل الصفحة. فمن المستحسن أن تستخدم CSS لاضافة جمال لتصميمك ؛ وليس كجزء منه. الدعم للرسوم المتحركة لايزال ضئيل ويجب أن تكون حذراً من الإفراط في تعقيد التصميم الخاص بك من أجل ذلك.

كما قال دان عدن  ان مكتبة الرسوم المتحركة ل Animate.css مفيدة حقاً. يمكنك إضافتها كما هو مبين في الملف الأصلي في بداية البرنامج التعليمي، أو استيرادها إلى ورقة الأنماط الخاصة بك، إذا كنت تفضل:

وهناك مجموعة متنوعة من الحركات الجميلة للاختيار من بينها، ولكن أنا ذاهب لإضافة الرسوم المتحركة (bounceInDown ).نحن نطبقه لدى عنصرنا(في هذه الحالة المحتوى) كالتالي:

إذا كنت ترغب في تغيير الرسوم المتحركة، يمكنك فقط تغيير animation-name- إلى اسم الحركة التي ترغبها. 


خطوة 8: اتخاذ المزيد من الأشياء

هذا ليس تصميم مستجيب، على العكس من ذلك، ولكن قد ترغب في إضافة بضع استفسارات وسائط الإعلام إلى الجزء السفلي من CSS الخاص بك لتلبية احتياجات الأجهزة الأصغر حجماً. التفكير في جعل عنصر الحاوية أضيق لشاشات أصغر حجماً، وتغيير العرض أو تغيير المواقع للمدخلات.


للسماح لاستمارة التسجيل لدينا لإضافة عناوين بريد الكتروني إلى قائمة، يمكن أن نفعل ذلك مع ربطها بخدمة رسائل إخبارية للبريد الإلكتروني، مثل MailChimp. لن افسر هذا بالتفصيل، حيث  يوضح بهذا المقال تماما.

إذا كنت ترغب في إضافة الصلاحية إلى النموذج، يمكنك التحقق من هذا البرنامج التعليمي.


الاستنتاج

بناء صفحة دعابة سريعة مثل هذه مهم للدعاية  قبل إطلاق موقع أو منتج. لا يلزم أن يكون معقداً، كما يوضح  حل CSS النقي هذا.

أرجو أن تكون  تعلمت شيئا من هذا البرنامج التعليمي، ومشكور للقراءة!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.