تلميحات تطوير الويب 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

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