1. المٌقدمة الأولي :دورة إختبار ثغرات حقن قواعد البيانات SQLI الإحترافية لعام 2017 عام 2018
    تٌعد ثغرات حقن قواعد البينات الثغرة رقم واحد فى العالم والمصنفة تحت بند الإخطر
    والفريق التابع له بإختراق أكبر المواقع الصهيونية قرائة الموضوع
  2. المٌقدمة الثانية : دورة إختبار ثغرات حقن قواعد البيانات SQLI الإحترافية لعام 2017 عام 2018
    في هذه المٌثقدمة الثانية والأخيرة سوف نتعرف على قواعد علم حقن قواعد البيانات
    حتى يتثنى لنا علم يٌساعدنا على القيام بعمليات الحقن بالطرق الصحيحه قرائة الموضوع
  3. دورة كشف دمج والتلغيم حصريا على أرض عراق تيم(2017)
    بعد ماقمت بعمل دورة الكشف دمج والتلغيم وستكملت الدوره وتحتوي على 12 درس
    كانت دروس حصريا على عراق تيم وشرح واضح جدا ومفهوم الى المبتدأ والى المبدع قرائة الموضوع

شرح عمل صفحه تحميل وتحريك الصوره بواسطة css

الموضوع في 'لغة الأنماط القياسية css' بواسطة Read Onymus, بتاريخ ‏17 أغسطس 2015.

كاتب الموضوع : Read Onymus المشاهدات : 324 الردود : 7 ‏17 أغسطس 2015
  1. غير متصل

    Read Onymus
    rank
    Developer

    عضو منذ:
    ‏27 أغسطس 2012
    عدد المشاركات:
    الإعجابات المتلقاة:
    7
    نقاط الجائزة:
    الوظيفة:
    Free Web Developer
    الإقامة:

    [​IMG]

    السلام عليكم ورحمة الله وبركاته

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

    [​IMG]
    اليوم بأذن الله تعالى اطرح لكم درس جميل وصغير وسهل

    في عالم css

    الموضوع مشابه نوع ما الى درسي السابق

    درس عمل صفحه تحميل - CSS Spinners
    [​IMG]

    وضع صورة ساكنة وتحريكها عبر CSS

    سنغشي كامل الصفحة بصندوق شبه شفاف

    (من أول اليسار إلى أول اليمين ومن أول الأعلى إلى أول الأسف وهذه طريقة لوصف المكان والعرض والطول معا)

    ونريده أن يظل في وجهك إن صعدت أو نزلت (الموقع الثابت fixed) ونجعل ما يفيض من الصفحة مخفي.

    [HTML CODE]<div id="overlay-blocker" style="background:rgba(255,255,255,0.5);position:fixed;left:0;right:0;top:0;bottom:0;">
    </div>[/HTML CODE]

    هذا سيمنع المستخدم من النقر على مكونات الصفحة أثناء التحميل.

    ونضع فيه صورة ثابتة في وسط الصفحة (50% لليمين والأعلى)

    ونستخدم الهوامش السالبة لتوسيطها (سالب نصف العرض وسالب نصف الطول) ثم سندورها

    [HTML CODE]<div id="overlay-blocker" style="position:fixed;left:0;right:0;top:0;bottom:0;">
    <img class="ani-spin" src="spinner.gif" style="position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;" />
    </div>[/HTML CODE]

    يفضل أن تكون الصورة من لون واحد (حول الصورة إلى ألوان مفهرسة indexed color ثم تأكد من أنها لاتحتوي إلا على لون واحد)

    ويمكنك استعمال الأساس 64 للتخلص من الصورة كليا.

    والآن لنحركها باستعمال CSS3 وهو جزئين الأول تعرف فيه الحركة بأن تقول ماذا يحدث

    (من تحولات transformations في كل مرحلة مثل التدوير والتحريك والتكبير)

    في كل مرحله من مراحل تقدم الزمن (كنسبة مئوية) وتعطيه اسمها مثلا spin هكذا

    [CSS]@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
    }[/CSS]

    ثم تربط هذا بمحددة CSS وتبين المدة الزمنية والتكرار وطريقة سير الزمن (خطي أو متسارع مثلا) هكذا

    [CSS].ani-spin {
    animation: spin 1s infinite linear;
    }[/CSS]

    لكن عليك تكرار الجزئين السابقين لكل المتصفحات فيصبح لديك هذا المثال

    انقر على الزر البد وهو يضيف الفئة loading إلى body ولاحظ النتيجة

    (حرك الشاشة قبل الضغط على الزر كذلك غير حجمها ولاحظ أنها دائما في الوسط)

    [​IMG]

    يمكننا أن نجرب حركات أخرى مثل التكبير والتصغير هكذا

    [​IMG]

    رقعة الرسم canvas

    يستخدم وسم رقعة الرسم canvas في الرسم على المتصحف عبر جافاسكربت.

    نحجز مكان للرسم ونعطيه معرف فريد id ثم في ذيل ملف HTML نضع كود جافاسكربت

    الذي يرسم على الرقعة. يمكنني أن أرسم 13 خطا في دائرة ونحركها بنفس الطريقة السابقة

    الطريقة باختصار نرسم "المسار" بأن نحرك القلم للمكان المطلوب عبر دالة moveTo ثم ننزل القلم ونرسم

    خط عبر دالة lineTo. وطبعا قبل بدء المسار نستعمل الدالة beginPath وعندما ننتهي

    من المسار نأمره بأن يخط المسار عبر stoke أو يملؤه fill أو كلاهما.

    طبعا يلزمني استخدام الدوال المثلثية جاس و جتاس لأعرف موقع النقطة في كل زاوية. إليك الكود والنتيجة

    [JS]function spinner(r0, r1, w, n){
    var el=document.getElementById("c1");
    var c=el.getContext("2d");
    var i, a, delta=2.0*Math.PI/n;
    c.strokeStyle="rgba(127,127,127,0.5)";
    c.lineWidth=w;
    c.beginPath();
    for(i=0,a=0.0;i<n;++i) {
    c.moveTo(r0+r1*Math.cos(a), r0+r1*Math.sin(a));
    c.lineTo(r0+r0*Math.cos(a), r0+r0*Math.sin(a));
    a+=delta;
    }
    c.stroke();
    };
    spinner(32, 20, 6, 13);[/JS]


    يمكننا أن نجعلها مسنن كما في هذا المثال

    ويمكننا أن نجعلها متدرجة في الشفافية كما في هذا المثال

    ما رأيكم أن نجرب فكرة أخرى وهي أن نرسم دائرة رمادية شبه شفافة ونصف دائرة بيضاء وأخرى سوداء

    وكلاهما نصف شفافة ونحرك (عبر CSS3) واحدة مع عقارب الساعة والثانية عكسها هكذا:

    [JS]function spinner(r, w){
    var el=document.getElementById("c1");
    var c=el.getContext("2d"), r1=r-w/2;
    c.beginPath();
    c.arc(r, r, r1, 0, 2*Math.PI);
    c.strokeStyle="rgba(127,127,127,0.5)";
    c.lineWidth=w;
    c.stroke();
    el=document.getElementById("c2");
    c=el.getContext("2d");
    c.beginPath();
    c.arc(r, r, r1, 0, Math.PI);
    c.strokeStyle="rgba(255,255,255,0.5)";
    c.lineWidth=w;
    c.stroke();
    el=document.getElementById("c3");
    c=el.getContext("2d");
    c.beginPath();
    c.arc(r, r, r1, Math.PI, 2*Math.PI);
    c.strokeStyle="rgba(0,0,0,0.5)";
    c.lineWidth=w;
    c.stroke();
    };
    spinner(32, 6);[/JS]

    ومع بعض التعديل يمكننا عمل واحد آخر هكذا

    [​IMG]

    الى هنا اكتفي بهذه الامثله البسيطه

    لنا عوده اخرى ان شاء الله

    [​IMG]
     


    أعجب بهذه المشاركة Mohmaed
    جاري تحميل الصفحة...
  2. غير متصل

    Mira Mrmr .::|| زهره منتدى عراق تيم ||::.
    V • I • P

    عضو منذ:
    ‏9 يوليو 2015
    عدد المشاركات:
    الإعجابات المتلقاة:
    134
    نقاط الجائزة:
    الجنس:
    أنثى
    الإقامة:

    رد: شرح عمل صفحه تحميل وتحريك الصوره بواسطة css

    عاشت ايدك
     


  3. غير متصل

    -AL SenatoOoR-
    V • I • P

    عضو منذ:
    ‏14 أغسطس 2014
    عدد المشاركات:
    الإعجابات المتلقاة:
    41
    نقاط الجائزة:
    الجنس:
    ذكر
    الإقامة:

    رد: شرح عمل صفحه تحميل وتحريك الصوره بواسطة css

    انت ايش . . .؟
    ماشاء الله عليك مبدع
    ومواضيعك جميلة ومفهومة ومفيدة
    جزاك الله خير . . . .
    [​IMG]

     


  4. غير متصل

    Gaza-Dz
    مراقب عآم

    عضو منذ:
    ‏26 مايو 2013
    عدد المشاركات:
    الإعجابات المتلقاة:
    112
    نقاط الجائزة:
    الجنس:
    ذكر
    الوظيفة:
    DZ
    الإقامة:

    رد: شرح عمل صفحه تحميل وتحريك الصوره بواسطة css

    السلام عيكم ورحمة الله


    بوركت اخي عبد الرحمن حفظك الله ورعاك علي الشرح الجميل
    واصل معنا دوما بمتابعة شروحات الموفقة
    +
    تم القيام بالواجب
     


  5. غير متصل

    آرْ بْيْ جْيْ ڪْرْڪْوْڪْ
    DeveloPer Plus

    عضو منذ:
    ‏24 أغسطس 2015
    عدد المشاركات:
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:

    رد: شرح عمل صفحه تحميل وتحريك الصوره بواسطة css

    مبدع+استمر
     


  6. غير متصل

    باسم الموسوي
    Developer

    عضو منذ:
    ‏27 يوليو 2014
    عدد المشاركات:
    الإعجابات المتلقاة:
    27
    نقاط الجائزة:
    الجنس:
    ذكر
    الوظيفة:
    طالب
    الإقامة:
  7. غير متصل

    Mohmaed .:: super ::.
    V • I • P

    عضو منذ:
    ‏12 ابريل 2015
    عدد المشاركات:
    الإعجابات المتلقاة:
    949
    نقاط الجائزة:
    الجنس:
    ذكر
    الإقامة:

    يعطيك العافيه
     


  8. غير متصل

    Security ALqassem قراصنة القاسم
    Developer

    عضو منذ:
    ‏7 سبتمبر 2015
    عدد المشاركات:
    الإعجابات المتلقاة:
    36
    نقاط الجائزة:
    الجنس:
    ذكر

مشاركة هذه الصفحة

جاري تحميل الصفحة...