مشاركة مميزة

    أفضل مكتبات الماتريال ديزاين إن كنت مصمم مواقع أو مطور مواقع أو حتى مبرمج تطبيقات فهذه المكتبات ستفيدك كثيرا فهي توفر كل الادوات والمستلزمات وفق الماتريال ديزاين. Materialize :: 1مكتبة اخترتها على انها الأفضل والأسهل Materual-UI::2مكتبة MUI CSS ::3 مكتبة Polymer ::4 مكتبة Ionic Material ::5 مكتبة Material Foundation :: 6 مكتبة Surface ::7 مكتبة Essence :: 8 مكتبة LumX :: 9 مكتبة Paper Theme for Bootstrap :: 10 مكتبة Material Design for Bootstrap :: 11 مكتبة Angular Material :: 12 مكتبة Material :: 13 مكتبة Phonon :: 14 مكتبة A Suggestion From Our Readers:  Framework7 :: 15 مكتبة Bonus:  Material Icons :: 16 مكتبة  بالتوفيق
Image
قيمة لوحة المفاتيح (keyCodes) + أمثلة بالجافا سكربت link open_in_new

قيمة لوحة المفاتيح (keyCodes) + أمثلة بالجافا سكربت

يقابل كل زر في لوحة المفاتيح رمز خاص به .نستطيع استعماله لإظافة عمل عند الضغط عليه كمثال: مثال أخر متقدم إظغط بعد تحديد ثافذة المثال على أزرار التحكم اليمين,اليسار... مثال يشمل أزرار alt و Ctrl ... هنا جدول لمجيع رمزو المفاتيح: Key Code backspace 8 tab 9 enter 13 shift 16 ctrl 17 alt 18 pause/break 19 caps lock 20 escape 27 (space) 32 page up 33
تعطيل الإكمال التلقائي link open_in_new

تعطيل الإكمال التلقائي

  قد يتسبب الإكمال التلقائي في وسوم input ببعض المشاكل عندما تضيف شيء آخر بدل عنه وقديحجب الما تود عرضه.   يمكنك تعطيله بإظافة السمة:  autocomplete="off" على النحو التالي:  <input autocomplete="off" name="search" type="text" value="" /> أو ضع السمة على النحو التالي بالـ jQuery: وبالتوفيق للجميع.  autocomplete input a en html css disabled false field from html5 in javascript jquery react native text type no 3 flex h inputtext 4 off index
شرح clipboardjs لنسخ وقص النص link open_in_new

شرح clipboardjs لنسخ وقص النص

  عن clipboardjs     هي مكتبة صغيرة للجافا سكربت وهي من إظافات الـ jQuery تساعدك في إظافة أزرار لنسخخ نص في عنصر ما او نص مرفق مع الزر نفسه.     التثبيت من خلاص npm. npm install clipboard --save Or bower, too. bower install clipboard --save أو تحميل الملف file_download ZIP برابط مباشر روابط CDN < script src = " https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js " ></ script > أو < script src = " https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.0/clipboard.min.js " ></ script > أو < script src = " https://cdn.rawgit.com/zenorocha/clipboard.js/v1.6.0/dist/clipboard.min.js " ></ script >   أمثلة للإستعمال مثال للنسخ: مثال آخر لنسخ فقرة مثال للقص وضع النص المطلوب نسخه خاصية المتصفحات المدعومة Chrome 42+ Edge 12+ Firefox 41+ IE 9+ Opera 29+ Safari 10+   للمزيد من التفاصيل والخصائص وللإطاع على التحديثات يمكنك زرارة صفح
شرح مشغل الويب Video.js وتخصيص تصميم بالـ CSS link open_in_new

شرح مشغل الويب Video.js وتخصيص تصميم بالـ CSS

Video.js هي إظافة معروفة كمشغل فيديو للويب بعد ظهور HTML5 حيث لم يكن تشغيل الفيديو ممكنا قبلا إلى باستعمال تقنية الفلاش المليئة بالعيوب والثغرات.   طريقة إظافة الأداة بسيطة نستعمل الشكل التالي عموما -الإصدار الحالي هو 5-: < head > < link href = "https://vjs.zencdn.net/5-unsafe/video-js.css " rel = "stylesheet" > </ head >   < body >   <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px" controls preload="none" poster='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdJB0ampV7T_N0J4Q8JNSGAi8OBaE6jtnsZnxu7j_1X-iX_MiKhUnXhZxcZZ150CEXHQAa0sqWkUfxQ0qnlIWM5Qhr9ATJKlRL8WG1F1SEYG0mFbjbtDTuqH_A-U8mdBLvgeIGrHDRGE8/w640-c-h267/graphic-designer-1288477.jpg' data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'> <source src="http://vjs.zencdn.net/v/
CSS خاصية overflow link open_in_new

CSS خاصية overflow

  خاصية    overflo w    يمكنها القيام بحديد عرض الجزء الإظافي الذي يتجاوز حجم العنصر الأكبر ببساطة رأية هذا من مثال مباشر See the Pen RoKOZL by mohamed ( @ateweb ) on CodePen .
كيفية جعل العنصر العناصر في الوسط باستعمال CSS على المحورين (X,Y) link open_in_new

كيفية جعل العنصر العناصر في الوسط باستعمال CSS على المحورين (X,Y)

يمكنك توسيط عنصر بمكان ما في الصفحى باستعمال css بعدة طرق. في css لديك إمكانيات كثير لتوسيط العناصر لكن لكل إمكانية فوائدها وسلبياتها: بداية التوسيط على محور الأفقي.   لفعل ذلك نستعمل إما: margin: auto; أو text-align: center; أولا margin: auto لهذه الخاصية فائدة جيدة ولكنها تعمل فقط عندما تكون وسم البداي لصفحة html هو <!DOCTYPE html> كمثال: وثانيا باستعمال text-align: center وهذه طريقة أخرى: بهذا النحو سنقوم بجعل البعد عن اليسار أو اليمين هن النصف أي 50% ونجعل العنصر يتبعد بنصف طوله : position: relative; transform: translate(-50%, 0); left: 50%; والآن التوسيط على المحور الأفقي : بهذا النحو سنقوم بجعل البعد عن الأعلى أو الأسفل هن النصف أي 50% ونجعل العنصر يصعد للألعالى بنصف طوله : position: relative; transform: translate(0, -50%); top: 50%; واخير في الأخير سنقوم بتوسيط عنصر من المحورين الأفقي والعمودي: position: relative; transform: translate( -50%, -50%); top: 50%; left: 50%; وسط چین در cssکد css وسط
1 - كيفية إنشاء متغيرات في CSS4 واستدعائها؟ link open_in_new

1 - كيفية إنشاء متغيرات في CSS4 واستدعائها؟

في CSS4 جاءت الكثير من المميزات الرائعة وإن ليست مدعودمة بجميع المتصفات ولكن المأكد أنه لن يطول الأمر حتى تصبح الأكثر استعمالا. في CSS4 أحد أبرز المميزات هي المتغيرات نعم تستطيع تحديد متغيرات كما في الجافا سكربت أو C أو JAVA أو أي لغة برمجة أخرى.  ما فائدة المتغيرات في CSS4 ؟   المتغيرات ستساعدك في في تقليل حجم العمل وإعادة كتابة كود مئات المرات يكفي أن تحدده مرة واحدة فقط ثم تستطعيه ويمكنك تخزين أي شيء داخل المتغير. لتحديد متغير يكفيك ات تحدد أين سيعمل مثلا في كامل الوثيقة بوضع :root أو بجعله مخصصا لعنصر ما بحيث لا يعمل على العناصر الاخرى إنما على نفسه وما بداخله فقط! والآن بعد ان حددت المكان ينصح بـ :root فقط لتحديد متغير تضع -- قبله وتضع قيمته وتنتهي بفاصلة منقوطة ';' : :root { --color : #ccc; } لإستدعاء المتغير ببساطة تظعه داخل var(هنا) في المكان الذي تريد: div { color: var(--color); } ببساطة هذا كل شيء ! 😄 مثال : :root { --color : #ccc } div { color: var(--color); } مثال آخر: See the Pen المتغيرات في CSS4 by mohamed ( @ateweb ) on CodePen . أ
مقدمة في CSS4 و HTML6 link open_in_new

مقدمة في CSS4 و HTML6

CSS4 و HTML6 نعم صحيح وليس خطأ في الكتابة فقد بدا بروزهما منذ اكثر من ثلاث سنوات ولكن الىن صارت أغلب المتصفحات الرئيسية تدعمها غذا حان الوقت إستعمالها فكما في CSS3 و HTML5 يجب علينا تعلمهما ومتاكد من انك كمبرمج ويب ستستعملهما عما قريب. بداية سنبدأ في CSS4 لأنها صارت شبه مدعومة كليا للمتصفحات الرئيسية في CSS4 حاليا توجد ثلاث أصناف من الخصائص - خصائص تم تطويرها عن CSS3 أو CSS4مثل :not() - خصائص مدعومة (متواجد وربما كانت متواجدة قبل أربع سنوات من 2012) - خصائص غير مدعومة حاليا أو قيد التطوير - خصائص محذوفة (هناك بعض الخصائص قامت منضمة الويب العالمية W3C بحذفها ربما لأخطاء أو لعدم جدواها كـ ( E /foo/ F  و !E > F ) أما HTML6 فهي كذلك مثل CSS تقريبا ولكن بخصوص دعم المتصفحات يمكنك احتبار متصفحك من هذا الموقع لإختبار  HTML6 ومميزاتها وتوافقها مع متصفحك : فمثلا انا لي فير فوكس أحدث نسخة حالياً 49 وحصلت على 482 نقطة من أصل 555نقطة أي أنه يدعم أغلب هذه الخصائص!   قد يكون استعمالها حاليا شبه منعدم لكن قريبا وفي السنوات القادمة ستكون لا مفر من استعمالها فقد جائت بالكثير من ال