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

How to Make image photo rounded borders in HTML css كيف جعل الصورة ذات زوايا حواف أطراف دائرية باستخدام الأنماط الانسيابية

How to Make image photo rounded borders in HTML css كيف جعل الصورة ذات زوايا حواف أطراف دائرية باستخدام الأنماط الانسيابية 

ماهي خاصية border-radius? وكيف استخدمها مع الصور؟ 

تضيف  خاصية CSS حدود نصف القطر border- radius زوايا مستديرة على الصور.  يمكنك تدوير جميع زوايا الصورة أو تحديد الزوايا فقط ، وتغيير نصف القطر في زوايا مختلفة أو عرض صورة في شكل بيضاوي أو دائرة.

أولا أضف الصورة او الصور التي تريد عمل إطار ذات حواف دائرية باستخدام الأنماط الانسيابية css.

ثانيا أضف فئة التي تقوم بعمل إطار ذات حواف دائرية على الأطراف عن طريقة كتابة اسم الفئة في النمط الخاص بالصورة او الصور المراد جعل لها حواف او حافة دائري. 

توجد طريقتان

•  اما عن طريق عمل فئة في ملف الأنماط الانسيابية الخاص بك css

img.rounded-corners {
  border-radius: 30px;
}

•  او عن طريق إضافة خاصية الحواف او الزوايا الدائرية لكل صورة

border-radius: 30px;

مثال عمل حواف دائرية من جميع زوايا الصورة جحم الزوايا الدائرية هو 30 px

الكود التالي يتم وضعه في خاصية img بعد تحديد المسار باستخدام خاصية src. في حال أردت استخدام خاصية الزوايا الدائرية على مستوى الصورة

Style="border-radius: 30px;" 

اما اذا اردت على مستوى ملف css يمكنك استخدام 

img.rounded-corners {
  border-radius: 30px;
}

مع استدعاء ملف الفئة داخل الصورة عن طريق كتابة اسم الفئة في خاصية img 

Class="rounded-corners" 

مثال عمل حواف او زوايا دائرية على الصورة 5 px

Style="border-radius: 5px;" 

مثال عمل زوايا دائرية للصورة 150 px

Style="border-radius: 150px;" 

مثال جعل الصورة على شكل بيضاوي أفقي او عمودي او حتى دائري. 

قيمة 50٪ تجعل كافة زواية الصورة تكون متصلة مع بعضها البعض وتأخذ الصورة شكل بيضاوي أفقي في حال كانت الصورة على شكل مستطيل كما في الصورة في الأسفل. 

اما بيضاوي عامودي في حال كانت الصورة على شكل مستطيل عامودي يمكنك أن تجربها بنفسك على صورة ذات شكل مستطيل عامودي. 

اما اذا اردت صورة ذات حواف دائرية اي تكون على شكل دائرة فيحب ان تكون أبعاد الصورة متساوية اي على شكل مربع عندها سوف تكون على شكل دائرة حاول أن تجربها بنفسك. مع الخاصية والقيم الا بالأسفل. 

Style="border-radius: 50%;" 

الخاصية نصف القطر border-radius  في الواقع لها اربع قيم فهي تحدد شكل كل زاوية للصورة في وضع قيمة واحدة كما في الأمثلة السابقة فإننا في الواقع تطبق هذه القيمة على الزوايا الاربع تلقائيا للصورة فتجعلها دائرية من كل الزوايا ماذا لو أردت قيم مختلفة او من زاوية واحدة فقط. عليك أن تفهم الخاصية فهي كما ذكرت لها ٤ قيم. القيم هي كالتالي من اليسار الي اليمين كما في المثال التالي. القيمة الأولى 10px تحدد نصف قطر الزاوية اليسرى العلوية للصورة. تليها القيمة 20px التي تحدد الزاوية اليمني العلوية. تليها القيمة 30px الزاوية اليمني السفلية ثم اخيرا القيمة 60px تحدد الزاوية اليسرى السفلية. إذا أردت زاوية دائرية من طرف واحد فعليك ان تضع القيمة مع وضع باقي القيم ب 0px لكي تعمل. 

مثال على صورة ذات زوايا دائرية مختلفة نصف القطر من كل طرف. 

Style="border-radius: 10px 20px 30px 60px;" 

هنا مثال قمنا بجعل الزاوية الدائرية العلوية اليسرى والسفلية اليمني متساوية القيم وهي 120px بينما الطرفان الاخران متساوين في القيمة وهي 20xp 

border-radius: 120px 20px 120px 20px;

تذكر دائما أن الزوايا الدائرية للصورة تختلف شكلها عند استخدام النسبة المئوية ذات قيمة 50٪  لأنها ستجعل الزاوية دائرية حتى منتصف الطرف كما شرحنا مسبقا اذا كانت الصورة مستطيل أفقي ستاخذ شكل بيضاوي أفقي. واذا كانت مستطيل عامودي ستاخذ شكل بيضاوي عامودي واذا كانت الصورة مربع ستاخذ شكل دائري. في مالنا التالي الصورة تاخذ شكل بيضاوي أفقي من ٣ زوايا لأننا جعلنا قيمة الزاوية اليسرى العلوية صفر. 

Style="border-radius: 0 50% 50% 50%" 

اقرأ المزيد في دليل دروس تعلم الأنماط او الأشكال الانسيابية المتتالية css

1. مقدمة عن الأنماط الإنسيابية CSS Tutorial#
2. ماهي الانماط الانسيابية What is CSS#
3. كتابة صيغة الصفحات الإنسيابية المتتالية CSS Syntax#
4. Top best pretty beutifual styles stylish for heading h1 h2 h3 h4 blog blogger blogspot? أفضل واجمل الأنماط الانسيابية العناوين

Top best pretty beutifual styles stylish for heading h1 h2 h3 h4 blog blogger blogspot? أفضل واجمل الأنماط الانسيابية العناوين

 Top best pretty beutifual styles stylish for heading h1 h2 h3 h4 blog blogger blogspot? أفضل واجمل الأنماط الانسيابية العناوين

مزيد من المعلومات »

كتابة صيغة الصفحات الإنسيابية المتتالية CSS Syntax#

كتابة صيغة الصفحات الإنسيابية المتتالية CSS Syntax#

كتابة صيغة الصفحات الإنسيابية المتتالية CSS Syntax#

مزيد من المعلومات »

ماهي الانماط الانسيابية What is CSS#

ماهي الانماط الانسيابية What is CSS#

ماهي الانماط الانسيابية What is CSS#

مزيد من المعلومات »

مقدمة عن الأنماط الإنسيابية CSS Tutorial#

مقدمة عن الأنماط المتتالية الإنسيابية CSS Tutorial#

مقدمة عن الأنماط الإنسيابية المتتالية CSS Tutorial#

مزيد من المعلومات »