تلميحات تطوير الويب 5

تلميحات تطوير الويب ( 1 | 2 | 3 | 4 ) 5

12/ اجعل حقل Radio Button أو Check Box اسهل عند الضغط عليه على النص

هذه تلميحه بسيطه ولكنها جميله دائماً ما اجدها جميله ومرنه لإستخدامها في المواقع الإلكترونيه وخاصه في النماذج كالتسجيل والدخول والمراسلة …

جرب ان تضغط على هذه الخيارات من خلال النص التابع لها :

 لا يوجد اي تأثير !

الأن جرب ان تضغط على النص في الخيارات التالية :

بكل سهوله ضع وسم label في داخل كل خيار أي أنه قبل إضافة الوسم label بالطريقه العاديه تكتب أكواد HTML هكذا

<input type="radio" name="radio1" checked="checked" /> تجربة 1
<input type="radio" name="radio1" /> تجربة 2

اما بالطريقة التي شرحناها تكتب أكواد HTML هكذا لكي يتم تفعيل الخيار عند الضغط على النص

<label><input type="radio" name="radio1" checked="checked" /> تجربة 1</label>
<label><input type="radio" name="radio1" /> تجربة 2</label>

13/ أضف حدود شفافه لأي نص تريده

بهذه التلميحه البسيطه يمكنك عمل اشياء جميله لاحقاً بعد إكمال بعض الاجزاء المتعلقه بها , مثل تحريك النص من الأسفل إلى الأعلى بإستخدام أزرار أسهم تتحرك بطريقه جميله, قد اكمل عمل مثل هذه الفكره كتكمله لهذه التلميحه لاحقاً , اما الأن التلميحه الحاليه هي جعل اي صندوق نص يحتوي على نهاية حدود شفافه كالتالي :

 

بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم

 طبعاً هذا المثال يتكون من نص وليس كصوره ولكن الجزء الشفاف هو الصوره وهنا تكمن التلميحه

 لذالك لعمل مثل هذه الطريقه يجب عليك ان تملك او تصمم صوره بلون خلفيه نفس لون خلفية الصفحه + تدرج شفاف إلى الأعلى

انا قمت بتصميم الصوره بإستخدام الفوتوشوب بسهوله رسمت مربع على خلفيه شفافه وعملت عليه تدرج شفاف كالتالي :

احفظ الصوره كـ png ويمكنك جعل عرض الصوره 1px فقط لأننا سنجعلها تتمدد بإستخدام الـ CSS كالتالي width:100% أولاً لكي تقلل حجم الصوره ثانياً لكي تجعل الطريقه تعمل على اي عرض صندوق نصي تريده

بعد ان تكون لديك الصوره جاهزه قم بكتابة أكواد HTML التالية :

<div class="boxfade">
بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم
</div>

ثم عدل على التصميم باستخدام CSS كالتالي :

.boxfade {
    padding:10px;
    width:200px;
    font-family:Tahoma;
    font-size:8pt;
    position:relative;
}

الأن اصبح لدينا نفس الصندوق السابق لكن من دون الحدود المتدرجه المخفيه , ولإضافتها أضف في كود الـ HTML التالي :

<div class="boxfade"><div class="fade"></div>
بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم بسم الله الرحمن الرحيم
</div>

وأضف في أكواد الـ CSS التالي

.boxfade .fade {
    background:transparent url(fade.png) repeat-x scroll 0 0;
    bottom:0;
    left:0;
    height:110px;
    position:absolute;
    width:100%;
}

ليكون العمل كاملاً كالمثال السابق

من أمثلة هذا العمل هو في موقع http://wakoopa.com كالصورة التالية

أطيب تحياتي

  • جميل ما سطرت يا عبدالملك

  • محمد الثاري

    تلميجات رائعة

    وغنائم قووية لإصحاب المواقعـــــــــ

  • أعتقد بأن أول تلميحه هي الأكثر فائدة
    شكراً لك

    وبانتظار تلميحات أكثر قوة وفائدة 🙂

  • جزاك الله كل خير أخي الكريم
    بالفعل تلميحات جميلة و بالأخص الأولى !!

    تحياتي
    فراس

  • يا سلام عليك …

    معلومات جديدة :)…

  • شكراً لكم جميعاً على المرور الرائع 🙂

  • رائعة جداً هذه السلسة عبد الملك ..تابع وبقوة ..جزاك الله خيراً ..^_^

  • شكرا لك
    مع اني لا افهم شيئ في لغة php

  • أخوي وعزيزي الغالي حسين شكراً لك يا رائع على مرورك الجميل 🙂

    المهند 55 عاد تدري في الموضوع ما فيه ولا كلمه عن PHP ههههههه

    الموضوع يتكلم عن لغة الترميز XHTML وهي اللي عن طريقها تسوي صفحات ثابته من دون أكواد برمجية منطقيه بل أكواد برمجيه تنسيقيه للموقع فقط 🙂 وهذه اللغة تعتبر مهمه لبداية برمجة وبناء المواقع 🙂 شكراً لك على المرور يا غالي

  • محمد الضبع

    تسلم عبد الملك على التلميحات الرائعة..

    إلا أقول..

    عندي استفسار..

    كيف تسوي زر ( أعلى ) لكل تدوينة..

    زي اللي إنته مسويه؟؟

    وترى عادني مستني ردك على استفساري..

    معليش تحملني شوية..

    سلااااااااااااام

تعليقات عبر الفيسبوك