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

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

14 / ثبوت عنصر في الصفحة حتى في حال عمل scroll

قد يكون عنوان هذه التلميحه غير واضح ولكن مثل ما يقول المثل اسأل مجرب ولا تسأل طبيب , ادري ان المثل دخل بالقوه لكن ما عليه جربوا وسلكوا

(( للتجربه )) طريقة عمل مثل هذه الحركه إليكم هذه التلميحة البسيطة

أولاً ضع العنصر الذي نريده يتحرك وطبعاً ممكن يكون أي شي خل نقول مثلاً div كالتالي

<div id="somthing_sticky">وين ما تروح انا وراك :)</div>

الأن نضيف على هذا العنصر او الوسم خصائص الـ CSS السحريه

#somthing_sticky { top:100px; right:30px; position:fixed; }

هذا الكود راح يخليه يتحرك معك أو يثبت معك << متضادتين لكنهما يحملان نفس المغزى

طبعاً نحتاج لعمل عملية تجميل لهالعنصر

#somthing_sticky { top:100px; right:30px; position:fixed;

background:yellow; border:1px red solid;

color:blue;

width:100px; padding:10px;

}

طبعاً من مميزات هذه الطريقه هي عمل مثلاً زر إلى الأعلى أو زر مهم تريده ان يبرز بجانب الصفحه او ملاحظه مهمه ممكن إزالتها بالضغط على X والكثير من المزايا التي يمكنك عملها بهذه الطريقه الجميله

15/ تعلم CSS3

تعلم CSS3 القادمه عبر موقع رائع يطرح كل ما يتعلق من خصائصه

http://www.css3.info

 من الخصائص المميزة الجديدة

  1. عمل ضل لأي عنصر او وسم
    http://www.css3.info/preview/box-shadow
  2. استخدام خطوط مختلفه وعملها لدى زائر الموقع سواء كانت الخطوط موجوده في جهاز زائر الموقع ام لا !
    http://www.css3.info/preview/web-fonts-with-font-face
  3. خاصية السماح بعمل resize او إعادة تحجيم للعنصر وهذه رائعه وسهله كذالك توفر الكثير من العناء
    http://www.css3.info/preview/resize
  4. استخدام اي صوره كـ Border او حدود لأي عنصر أو وسم
    http://www.css3.info/preview/border-image
  5. مربع إطار ذو زوايا مائله مثل موقع تويتر
    http://www.css3.info/preview/rounded-border

وبالتوفيق للجميع ,

  • خيرالدين

    السلام عليكم
    شكرا على التلميحات
    سمعت أن كل من الموزيلا و apple في إصداراتهم القادمة للمتصفحات ستتفاعل مع css3
    لكن المايكروسوفت إمتنعت عن ذلك حسب الأخبار الأولية عن دعم ie8 لــ css3 🙁
    اتمنى ان يوقفوا برمجة هذا المتصفح
    من الواضح أن css3 سيجعل جل المواقع جميلة المظهر وسنرى تصميمات لاحدود لها

  • الخاصية رقم 14 أراها مفيدة ويمكن تطبيقها بأكثر من طريقة مبتكرة

    شكراً لك 🙂

  • ايضا متصفح اوبرا 10 سيدعم الCSS3

    شكرا لك ,

  • هلا عبد الملك ..تمليحات رائعة أخي ..
    موضوع جعل Div ثابتة معاك سويتها بموقعي ..ولكن تقابلني مشكلة احيانا وهي عند تغيير دقة الشاشة
    مثلا اريد أن تظهر بموضع معين ..بهوامش علوية بقيمة معينة ..عند تغير دقة الشاشة راح تختلف ..
    ما الحل برأيك ..؟
    زور موقعي ..وراح تعرف ..

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

    اخوي حسين , الحل لموقعك

    أحذف top:68% وخلاص

    بمجرد كتابة bottom:0px فأنه يجعل العنصر في الأسفل

  • عبدالمجيد

    الله يعطيك العافية على هذي التلميحات ..

    استفدت منها بشكل كبير,,

  • شو هو الـ css?

  • الله يعافيك اخوي عبدالمجيد , اخوي محمود الـ CSS بإمكانك معرفته بقراءة الدروس المكثفه هنا http://www.ar.html.net/tutorials/css

    باختصار

    CSS هي لغة رائعة لإضافة تصميم لموقعك ، ويمكنها أن توفر عليك الكثير من الوقت باستخدامها في تصميم المواقع بطريقة جيده , وهي لغة يجب أن تستخدم من قبل كل شخص يعمل في تصميم المواقع.

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