تلميحات تطوير الويب ( 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 كالصورة التالية
أطيب تحياتي
