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

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

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

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

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

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

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

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

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

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

ملاحظة يمكنك تطبيق وتعديل كود إنشاء قوائم انفوجرافيك من خلال تصميم مواقع الويب باستخدام 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 

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