how to create infographic list items using css & html? كيفية انشاء صور انفجرافيك باستخدام هتمل والانماط الانسيابية

-

how to create infographic list items using css & html? كيفية انشاء صور انفجرافيك باستخدام هتمل والانماط الانسيابية

how to create infographic list items using css & html? كيفية انشاء صور انفجرافيك باستخدام هتمل والانماط الانسيابية


 هذه صورة عن الكود التالي - التالي هو تطبيق للكود يمكن نسخه ولصقه وكل ما عليك تعديل الاسم


how to create infographic list items using css & html? كيفية انشاء صور انفجرافيك باستخدام هتمل والانماط الانسيابية

مثال علي انفوجرافيك ما هي شروط استجابة  الدعاء

الاخلاص لله تعالي في الدعاء.

بدء الدعاء بالحمد والصلاة علي النبي.

الجزم في الأدعية واليقين في الاجابة.

الإلحاح في الدعاء وعدم الإستعجال وحضور القلب.

الدعاء لله في الرخاء كما في الشدة.

تحري أوقات الاجابة



ملاحظة يمكنك تطبيق وتعديل كود إنشاء قوائم انفوجرافيك من خلال تصميم مواقع الويب باستخدام css و html من خلال الرابط التالي


كود إنشاء قوائم انفوجرافيك باستخدام الأنماط الانسيابية وهتمل css html


كود انشاْء قوائم انفوجرافيك  infographic by css nd html

<STYLE TYPE="TEXT/CSS"> HTML { HEIGHT: 100%; } BODY{ --I: VAR(--WIDE, 1); --J: CALC(1 - VAR(--I)); --K: VAR(--NARR, 1); DISPLAY: FLEX; FLEX-DIRECTION: COLUMN; ALIGN-ITEMS: CENTER; JUSTIFY-CONTENT: CENTER; MARGIN: 0; MIN-HEIGHT: 100%; //FILTER: DROP-SHADOW(0 C 5PX RGBA(0, 0, 0, 0.65)); } @MEDIA (MAX-WIDTH: 100%) { BODY{ --WIDE: 0 ; } } @MEDIA (MIN-WIDTH: 400PX) { BODY{ --NARR: 0 ; } } P {DIRECTION:LTR; --P: VAR(--PARITY, 0); --Q: CALC(1 - VAR(--P)); --S: CALC(1 - 2*VAR(--P)); BOX-SIZING: BORDER-BOX; DISPLAY: FLEX; FLEX-DIRECTION: VAR(--NARR, COLUMN); ALIGN-ITEMS: CENTER; JUSTIFY-CONTENT: SPACE-AROUND; POSITION: RELATIVE; MARGIN: 0.5EM CALC(VAR(--I)*VAR(--P)*3.75EM) 0 CALC(VAR(--I)*VAR(--Q)*3.75EM); BORDER: SOLID 0 TRANSPARENT; BORDER-WIDTH: 0 CALC(VAR(--Q)*5VMIN) 0 CALC(VAR(--P)*5VMIN); PADDING: 0.5EM CALC((VAR(--J) + VAR(--I)*VAR(--Q))*0.5EM) 0.5EM CALC((VAR(--J) + VAR(--I)*VAR(--P))*0.5EM); MAX-WIDTH: 27EM; MIN-HEIGHT: 7.5EM; BACKGROUND: LINEAR-GRADIENT(#FCFCFC, GAINSBORO) PADDING-BOX, LINEAR-GRADIENT(CALC(VAR(--S)*90DEG), VAR(--C0), VAR(--C1)) CALC(VAR(--Q)*100%)/5VMIN 100%; COLOR: VAR(--C1); FONT: 900 CALC((1.25 - .375*VAR(--K))*1EM)/1.5 TREBUCHET MS, VERDANA, SANS-SERIF; TEXT-ALIGN: VAR(--PARITY, RIGHT); TEXT-TRANSFORM: UPPERCASE; } P:BEFORE, P:AFTER { DIRECTION:LTR; BOX-SIZING: BORDER-BOX; MIN-WIDTH: VAR(--D); HEIGHT: VAR(--D); BORDER-RADIUS: 50%; } P:BEFORE {DIRECTION:LTR; --D: 2EM; DISPLAY: FLEX; ALIGN-ITEMS: CENTER; JUSTIFY-CONTENT: CENTER; ORDER: CALC((1 - VAR(--K))*VAR(--P)); MARGIN: 0 CALC(VAR(--I)*VAR(--P)*-1EM + VAR(--Q)*0.5EM) 0 CALC(VAR(--I)*VAR(--Q)*-1EM + VAR(--P)*0.5EM); PADDING: 0.09375EM; BACKGROUND: LINEAR-GRADIENT(VAR(--C1), VAR(--C0)) CONTENT-BOX, LINEAR-GRADIENT(VAR(--C0), VAR(--C1)); FONT-SIZE: CALC(2.375EM/(1 + VAR(--K))); CONTENT: ATTR(DATA-ICON); } P:AFTER { DIRECTION:LTR; --D: 7.5EM; POSITION: ABSOLUTE; Z-INDEX: -1; LEFT: CALC(VAR(--P)*(100% - VAR(--D)) - VAR(--S)*.5*VAR(--D)); PADDING: 1EM; BACKGROUND: LINEAR-GRADIENT(90DEG, VAR(--C0), VAR(--C1), VAR(--C0)); -WEBKIT-MASK: LINEAR-GRADIENT(RED, RED) CONTENT-BOX, LINEAR-GRADIENT(RED, RED); -WEBKIT-MASK-COMPOSITE: XOR; MASK: LINEAR-GRADIENT(RED, RED) CONTENT-BOX EXCLUDE, LINEAR-GRADIENT(RED, RED); CONTENT: VAR(--WIDE, "");} P:NTH-CHILD(2N) { --PARITY: 1 ; } </STYLE> <P DATA-ICON="1" STYLE="--C0: #178CCD; --C1: #156599; TEXT-ALIGN: RIGHT;">الاخلاص لله تعالي في الدعاء.</P> <P DATA-ICON="2" STYLE="--C0: #A5C73F; --C1: #3E7E27; TEXT-ALIGN: RIGHT;">بدء الدعاء بالحمد والصلاة علي النبي.</P> <P DATA-ICON="3" STYLE="--C0: #F6C232; --C1: #ECA122; TEXT-ALIGN: RIGHT;"> الجزم في الأدعية واليقين في الاجابة.</P> <P DATA-ICON="4" STYLE="--C0: #D63193; --C1: #A52178; TEXT-ALIGN: RIGHT;">الإلحاح في الدعاء وعدم الإستعجال وحضور القلب.</P> <P DATA-ICON="5" STYLE="--C0: #BDFFF3; --C1: #4AC29A; TEXT-ALIGN: RIGHT;">الدعاء لله في الرخاء كما في الشدة.</P> 

<P DATA-ICON="6" STYLE="--C0: #B2FEFA; --C1: #0ED2F7; TEXT-ALIGN: RIGHT;">تحري أوقات الاجابة</P>                


شرح كود كيفية انشاء قوائم انفوجرافيك باستخدام الانماط الانسيابية  css ولغة تصميم صفحات الانترنت  html

الكود بين <style>  ......</style> هذا عبارة عن كود خاص بتصميم وتعديل شكل وسومات html باستخدام الانماط الانسيابية يمكنك نسخه ووضعه في ملف نصي بامتداد css   واستيراد هذا الكود حيث تريد تطبيقه ، او يمكنك نسخه داخل الوسم  body كما فعلت في هذا المقال لانني اريد تطبيق كود انشاء قوائم انفوجرافيك فقط علي هذا المقال وليس كل المقالات . لا تقوم بالتعديل علي هذا الكود الا اذا كنت تعلم ماذا تفعل .


شرح كيفية تعديل لون واضافة قائمة وايقونة علي كود انفوجرافيك باستخدام هتمل و سي اس اس html<css


   كيفية تعديل واصافة لون واقائمة في infographic by css html

<p data-icon="1"  style="--c0: #178ccd; --c1: #156599; text-align: right;">الاخلاص لله تعالي في الدعاء.</p>                


الكود السابق فقط يمكنك التعديل عليه 
حيث ان 
P هو وسم الفقرة في لغة  html
Data-icon يمكنك كتابة رقم مثلا فعلت فقد رقمت قائمة انفوجرافيك او يمكنك وضع أيقونة من خلال نسخ ولصق او من خلال لوحة المفاتيح مثل هذه الأيقونة ♥️
Style هذا الكود يقوم بتغير لون عنصر القائمة حيث يحتوي على لونيين لعمل تدرج اذا رغبت او وضع نفس اللون حيث
 - - c0 هو اللون الأول فقط ابحث عن اللون بترميز سداسي عشري Hexadecimal color وقم بنسخ اللون مكان  #178ccd وكذلك للون الآخر. 
لإضافة عنصر الي قائمة انفوجرافيك infographic css html 

قم بنسخ التالي والصقه وعدل اللون وهكذا

<p data-icon="1"  style="--c0: #178ccd; --c1: #156599; text-align: right;">  هنا تكتب ما تريده في العنصر</p>          
قم باستبدال النص " هنا تكتب ما تريده في العنصر" ضع عنوان النص 
قم بحفظ الكود ونشره

لاتنسي يمكنك مشاهدة نسخة اولاين وتعديل بكل راحتك على كود إنشاء انفوجرافيك html css infographic 










المشاركات الشائعة من هذه المدونة

Software Development Life Cycle دورة حياة تطوير البرمجيات او النظام

-
صورة
 Software Development Life Cycle دورة حياة تطوير البرمجيات او النظام دورة حياة تطوير البرمجيات (SDLC) هي عملية متبعة في مشروع برمجي داخل مؤسسة برمجية.  وهو يتألف من خطة مفصلة تصف كيفية تطوير برامج معينة وصيانتها واستبدالها وتعديلها أو تحسينها.  يحدد منهجية لتحسين جودة البرمجيات وعملية التطوير الشاملة. SDLC هي عملية يستخدمها محللو تكنولوجيا المعلومات من أجل تطوير أو إعادة تصميم نظام برمجيات عالي الجودة ، والذي يلبي متطلبات العميل والعالم الحقيقي. يأخذ في الاعتبار جميع الجوانب المرتبطة باختبار البرامج وتحليلها وصيانة ما بعد العملية. المراحل الهامة من SDLC موضحة في الرسم التوضيحي التالي - مرحلة التخطيط يجب أن يبدأ كل نشاط بخطة.  الفشل في التخطيط يقود إلى التخطيط للفشل.  تختلف درجة التخطيط من نموذج إلى آخر ، ولكن من المهم جدًا أن يكون لديك فهم واضح لما سنبنيه من خلال إنشاء مواصفات النظام. مرحلة التحديد في هذه المرحلة ، نقوم بتحليل وتعريف هيكل النظام.  نحدد البنية والمكونات وكيف تتناسب هذه المكونات معًا لإنتاج نظام عمل. مرحلة التصميم في تصميم النظام ، يتم وصف وظ...
قراءة المزيد

نموذج الشلال بالتفصيل دورة حياة تطوير النظام او البرمجيات SDLC Waterfall Model#

-
صورة
نموذج الشلال بالتفصيل دورة حياة تطوير النظام او البرمجيات SDLC  Waterfall Model# ماهو نموذج الشلال في دورة حياة تطوير النظام او النظم والبرمجيات SDLC?   قدم ونستون رويس نموذج Waterfall في عام 1970 ، ويتكون هذا النموذج من خمس مراحل: تحليل المتطلبات والمواصفات ، والتصميم ، والتنفيذ ، واختبار الوحدة ، والتكامل واختبار النظام ، والتشغيل والصيانة.  تتبع الخطوات دائمًا بهذا الترتيب ولا تتداخل.  يجب على المطور إكمال كل مرحلة قبل أن تبدأ المرحلة التالية.  يُطلق على هذا النموذج اسم "نموذج الشلال" ، لأن تمثيله التخطيطي يشبه سلسلة من الشلالات. ماهي مراحل نموذج الشلال ؟  1. مرحلة تحليل المتطلبات والمواصفاتRequirements analysis and specification phase :الهدف من هذه المرحلة هو فهم المتطلبات الدقيقة للعميل وتوثيقها بشكل صحيح.  يعمل كل من العميل ومطور البرامج معًا لتوثيق جميع الوظائف والأداء ومتطلبات التفاعل الخاصة بالبرنامج.  فهو يصف "ماذا" للنظام الذي سيتم إنتاجه وليس "كيف". في هذه المرحلة ، يتم إنشاء مستند كبير يسمى مستند مواصفات متطلبات البرامج (SRS) و...
قراءة المزيد