Sokkary | Code3arabi

مثال تطبيقي شامل على دروس CSS <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <title>تجربة CSS</title> <style> body { background-color: #f5f5f5; font-family: Tahoma, sans-serif; margin: 20px; color: #333; } h1 { text-align: center; color: #006699; text-transform: uppercase; border-bottom: 2px solid #ccc; padding-bottom: 10px; } .intro { background-color: #ffffff; padding: 15px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 8px; } .colored-box { background-color: rgb(255, 235, 205); border: 2px dashed #ff6600; padding: 10px; margin-bottom: 20px; } .custom-list { list-style-type: square; background-color: #e0f7fa; padding: 10px; max-width: 300px; } .custom-list li { padding: 5p...

CSS - استخدام المتغيرات مع Media Queries 🔸 يمكنك استخدام CSS Variables مع @media لتعديل القيم بناءً على حجم الشاشة أو الجهاز، مما يساعدك في إنشاء تصميم متجاوب بطريقة أنيقة وفعالة. --- 🔹 تعريف متغير عام في :root :root { --main-padding: 20px; } 📌 هذا المتغير سيتم استخدامه كقيمة افتراضية في كل الأحجام. --- 🔹 تعديل المتغير داخل media query @media screen and (max-width: 600px) { :root { --main-padding: 10px; } } 📌 عند تصغير عرض الشاشة إلى 600px أو أقل، سيتم تعديل قيمة المتغير --main-padding تلقائيًا. --- 🧪 مثال عملي كامل <!DOCTYPE html> <html> <head> <style> :root { --main-padding: 20px; } .box { background-color: lightblue; padding: var(--main-padding); transition: all 0.3s ease; } @media screen and (max-width: 600px) { :root { --main-padding: 5px; } } </style> </head> <body> <div class="box">صندوق مرن padding حسب حجم الشاشة</div> </body> </htm...

CSS - استخدام متغيرات CSS مع JavaScript 🔸 يمكنك الوصول إلى متغيرات CSS (التي تُعرف باستخدام --اسم ) والتعديل عليها باستخدام JavaScript، مما يتيح لك إنشاء ثيمات ديناميكية أو تخصيص التصميم حسب تفاعل المستخدم. --- 🔹 تعريف متغير في CSS :root { --main-bg-color: lightblue; } --- 🔹 الوصول إلى المتغير باستخدام JavaScript // استهداف العنصر الجذر let root = document.documentElement; // الحصول على قيمة المتغير let bgColor = getComputedStyle(root).getPropertyValue('--main-bg-color'); console.log(bgColor); // lightblue 📌 getComputedStyle() تُستخدم لقراءة الأنماط النهائية المحسوبة، ثم تُستخدم getPropertyValue لقراءة المتغير. --- 🔹 تعديل قيمة المتغير باستخدام JavaScript document.documentElement.style.setProperty('--main-bg-color', 'lightgreen'); 📌 هذا يغير القيمة في الوقت الحقيقي، ويمكنك استخدامه لإنشاء تأثيرات مثل التبديل بين الوضع الفاتح والداكن. --- 🧪 مثال عملي كامل <!DOCTYPE html> <html> <head> <...

CSS - الدوال (CSS Functions) 🔸 توفر CSS مجموعة من الدوال (Functions) التي تُستخدم داخل الخصائص المختلفة لإضافة مرونة أو حسابات أو تأثيرات بصرية أكثر تقدمًا. --- 🔹 أشهر دوال CSS url() – تُستخدم لتحديد رابط صورة أو ملف خارجي. rgb() / rgba() – لتحديد الألوان بناءً على القيم الحمراء والخضراء والزرقاء، مع الشفافية. hsl() / hsla() – لتحديد الألوان بنظام Hue Saturation Lightness، مع الشفافية. calc() – لإجراء عمليات حسابية. var() – لاستخدام متغيرات CSS. min() , max() , clamp() – دوال رياضية لضبط القيم المتجاوبة. attr() – لاسترجاع قيمة خاصية من HTML (يُستخدم بشكل محدود). env() – لاستدعاء متغيرات بيئية من الجهاز (مثل مساحة الآمنة في أجهزة iPhone). --- 🧪 أمثلة على الاستخدام /* استخدام url() */ body { background-image: url("background.jpg"); } /* استخدام rgba() */ p { color: rgba(255, 0, 0, 0.5); /* أحمر نصف شفاف */ } /* استخدام calc() */ div { width: calc(100% - 80px); } /* استخدام var() */ :root { --main-color: blu...

CSS - التحويل من px إلى em 🔸 في CSS، تُستخدم الوحدة px كوحدة مطلقة، بينما em هي وحدة نسبية تُحسب بناءً على حجم الخط (font-size) للعنصر الأب. لذلك من المفيد معرفة كيفية التحويل بينهما عند تصميم تخطيطات متجاوبة. --- 🔹 القاعدة الأساسية للتحويل 📌 إذا كان حجم الخط الافتراضي في المتصفح هو 16px (وهو الشائع)، فإن: 1em = 16px ولذلك: 2em = 32px 1.5em = 24px 0.875em = 14px --- 🔹 التحويل من px إلى em يدويًا 📌 استخدم هذه المعادلة: em = px ÷ base font-size مثال: إذا كان العنصر font-size: 16px ، وأردت تحويل 24px إلى em : 24 ÷ 16 = 1.5em --- 🔹 مثال عملي على em <style> html { font-size: 16px; } h1 { font-size: 2em; /* 32px */ } p { font-size: 0.875em; /* 14px */ } </style> <h1>عنوان</h1> <p>فقرة بحجم أصغر</p> --- 📌 ملاحظات مهمة em يعتمد على السياق — إذا وُضع داخل عنصر له font-size خاص، فسيُحسب بناءً عليه. rem يستخدم دائمًا html كمرجع، وله سلوك ثابت. التحويل إلى em مفيد لجع...

CSS - الوحدات (Units) 🔸 في CSS، يتم استخدام وحدات لقياس الأحجام، الأطوال، المسافات، والخطوط، وهي تنقسم إلى نوعين رئيسيين: الوحدات المطلقة (Absolute Units) : دائمًا لها نفس القيمة الثابتة. الوحدات النسبية (Relative Units) : تعتمد على عنصر آخر مثل حجم الخط الأساسي أو أبعاد العنصر الأب. --- 🔹 الوحدات المطلقة (Absolute Units) تشمل: cm - سنتيمتر mm - مليمتر in - إنش (1in = 2.54cm) px - بكسل (الافتراضي في الشاشات) pt - نقطة (1pt = 1/72 إنش) pc - بيكا (1pc = 12pt) div { width: 200px; height: 50mm; } --- 🔹 الوحدات النسبية (Relative Units) تشمل: % - نسبة مئوية من العنصر الأب em - نسبة إلى حجم الخط الحالي rem - نسبة إلى حجم خط العنصر html vw - نسبة من عرض نافذة المتصفح (viewport width) vh - نسبة من ارتفاع نافذة المتصفح (viewport height) vmin - الأصغر بين vw و vh vmax - الأكبر بين vw و vh ch - عرض الحرف "0" في الخط المستخدم ex - ارتفاع الحرف "x" في الخط المستخدم div ...

CSS - دوال الرياضيات (Math Functions) 🔸 توفر CSS مجموعة من الدوال الرياضية التي تتيح لك إجراء عمليات حسابية مباشرة داخل ملف CSS، مما يُسهل التعامل مع القياسات بطريقة ديناميكية ومرنة. --- 🔹 1. calc() - الحسابات تُستخدم لإجراء عمليات حسابية بين وحدات مختلفة مثل % و px و em . .box { width: calc(100% - 50px); } 📌 هذه القاعدة تعني أن عرض العنصر سيكون 100% ناقص 50px. --- 🔹 2. min() - أصغر قيمة تُرجع أصغر قيمة بين القيم المحددة. .box { width: min(50%, 400px); } 📌 سيتم تطبيق أصغر قيمة بين 50% من عرض الحاوية و400px. --- 🔹 3. max() - أكبر قيمة تُرجع أكبر قيمة بين القيم المحددة. .box { width: max(300px, 30%); } 📌 سيتم تطبيق القيمة الأكبر بين 300px و30% من عرض الحاوية. --- 🔹 4. clamp() - النطاق المحدد تُستخدم لتحديد قيمة تتغير ضمن حد أدنى وحد أقصى. .box { font-size: clamp(16px, 2vw, 24px); } 📌 هذا يعني أن حجم الخط سيتغير مع عرض الشاشة ولكن لن يقل عن 16px ولن يزيد عن 24px. --- 📌 ملاحظات هامة ضع مسافات حول ال...

CSS - الأولوية (Specificity) 🔸 عندما تنطبق أكثر من قاعدة CSS على نفس العنصر، يتم تحديد أي قاعدة يتم تطبيقها حسب مبدأ الأولوية (Specificity) ، وليس فقط حسب الترتيب. --- 🔹 ما هي Specificity؟ هي نظام نقاط يُستخدم لتحديد أي قاعدة CSS تُطبق في حال تعارض عدة قواعد. كل نوع من أنواع المحددات (selectors) له وزن معين: Inline style (مثل style=""): 1000 نقطة المعرف (ID) : 100 نقطة الكلاس أو الـ attributes أو pseudo-classes : 10 نقاط العناصر (element) أو pseudo-elements : 1 نقطة --- 🔹 مثال توضيحي /* specificity = 1 */ p { color: red; } /* specificity = 10 */ .intro { color: blue; } /* specificity = 100 */ #main { color: green; } <p id="main" class="intro">هذا النص سيكون لونه أخضر</p> ✅ يتم تطبيق اللون الأخضر لأنه يأتي من معرف (ID) وقيمته أعلى من الكلاس والعنصر. --- 🔹 inline style تتفوق على الكل <p id="main" class="intro" style="color: orange;"> سيتم تطبيق ا...

CSS - استخدام !important 🔸 تُستخدم !important في CSS لإعطاء خاصية معينة أولوية قصوى، بحيث لا يتم تجاهلها حتى لو كانت هناك قواعد أخرى أكثر تحديدًا (مثل inline styles أو قواعد أخرى أكثر تفصيلًا). --- 🔹 الصيغة العامة selector { property: value !important; } 📌 يتم كتابة !important بعد القيمة مباشرة، وقبل الفاصلة المنقوطة ; . --- 🧪 مثال على تجاوز قواعد أخرى <style> p { color: blue !important; } #special { color: red; } </style> <p id="special">هذا النص سيكون باللون الأزرق، رغم وجود قاعدة أخرى!</p> ✅ تم تطبيق اللون الأزرق لأنه يحتوي على !important ، رغم أن القاعدة الثانية أكثر تحديدًا. --- ⚠️ ملاحظات وتحذيرات !important يجب استخدامه فقط عند الضرورة القصوى. الإفراط في استخدامه يجعل كود CSS صعب الصيانة والتعديل لاحقًا. الحل الأفضل هو استخدام قواعد CSS دقيقة ومتسلسلة بشكل صحيح لتجنب الحاجة إلى !important . إذا كان هناك أكثر من قاعدة تحتوي على !important ، يتم تطبيق القاعدة الأحدث أو الأكثر تحديدًا. ...

CSS - تجاوز المتغيرات (Overriding Variables) 🔸 تُستخدم ميزة تجاوز المتغيرات (Overriding) لتغيير قيمة متغير CSS في نطاق محدد (عنصر معين أو داخل مكون معين)، بدلًا من استخدام القيمة العامة المعرفة في :root . --- 🔹 1. المتغيرات العامة في :root :root { --main-color: blue; } 📌 هذه القيمة ستُستخدم بشكل افتراضي في جميع أنحاء الصفحة. --- 🔹 2. تجاوز المتغير داخل عنصر معين .box { --main-color: red; } 📌 داخل العنصر .box (وأطفاله فقط)، ستُستخدم قيمة red بدل blue . --- 🧪 مثال عملي على التجاوز <style> :root { --main-color: blue; } p { color: var(--main-color); } .container { --main-color: green; } </style> <p>هذا النص باللون الأزرق (من :root)</p> <div class="container"> <p>هذا النص باللون الأخضر (تم تجاوزه داخل container)</p> </div> --- 📌 تذكير مهم يمكنك تعريف نفس المتغير بعدة أماكن، والقيمة الأقرب للعنصر (في التسلسل الهرمي) هي التي تُطبَّق. المتغيرات لا ترث (inherit) بشكل...

CSS - المتغيرات (CSS Variables) 🔸 تسمح لك المتغيرات في CSS بتخزين القيم (مثل الألوان أو الأحجام) في مكان مركزي، ومن ثم إعادة استخدامها في أي مكان ضمن الملف. هذا يُسهل التعديلات لاحقًا ويحسّن قابلية الصيانة. --- 🔹 تعريف المتغير يتم تعريف المتغيرات داخل محدد :root لجعلها متاحة في جميع أجزاء الصفحة. :root { --main-color: #3498db; --padding: 20px; --font-size: 18px; } --- 🔹 استخدام المتغير لاستخدام المتغير، نستعمل الدالة var() : .box { background-color: var(--main-color); padding: var(--padding); font-size: var(--font-size); } --- 🔹 يمكن تعريف متغير داخل عنصر معين فقط .container { --box-color: green; } .box { background-color: var(--box-color); } 📌 في هذه الحالة، المتغير --box-color متاح فقط داخل .container وكل عناصره الفرعية. --- 🔹 تعيين قيمة افتراضية للمتغير .box { background-color: var(--unknown-color, pink); } 📌 إذا لم يكن المتغير --unknown-color معرفًا، سيتم استخدام pink كقيمة بديلة. --- 🧪 مثال عملي ك...

CSS - عناصر الشبكة (Grid Items) 🔸 عند استخدام display: grid على عنصر حاوي، فإن كل عنصر بداخله يُصبح عنصر شبكة (Grid Item) ويمكنك التحكم في موقعه وحجمه باستخدام خصائص محددة. --- 🔹 1. grid-column 🔹 تُستخدم لتحديد من أي عمود يبدأ العنصر وإلى أي عمود يمتد. .item1 { grid-column: 1 / 3; } 📌 يبدأ من العمود 1 وينتهي قبل العمود 3 (أي يشغل عمودين). --- 🔹 2. grid-row 🔹 تُستخدم لتحديد من أي صف يبدأ العنصر وإلى أي صف يمتد. .item1 { grid-row: 1 / 3; } 📌 يشغل الصفين الأول والثاني. --- 🔹 3. grid-area 🔹 اختصار لـ: grid-row-start / grid-column-start / grid-row-end / grid-column-end .item1 { grid-area: 1 / 2 / 3 / 4; } 📌 يبدأ من الصف 1، العمود 2، وينتهي قبل الصف 3، العمود 4. --- 🔹 4. justify-self و align-self 🔹 تُستخدم لمحاذاة العنصر داخل خلية الشبكة. .item { justify-self: center; /* أفقيًا */ align-self: end; /* رأسيًا */ } 📌 القيم المتاحة: start , end , center , stretch --- 🧪 مثال عملي على التحكم بموقع ا...

CSS - حاوية الشبكة (Grid Container) 🔸 في CSS Grid، عندما تضيف الخاصية display: grid أو display: inline-grid إلى عنصر، فإنه يُصبح "حاوية شبكة" (Grid Container)، والعناصر بداخله تُصبح "عناصر شبكة" (Grid Items). --- 🔹 1. تفعيل الشبكة .container { display: grid; } 📌 هذا يجعل العنصر حاوية Grid. إذا كنت تريده داخل السطر، استخدم inline-grid . --- 🔹 2. تحديد الأعمدة والصفوف .container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 80px 80px; } 📌 هذا يُحدد 3 أعمدة عرضها 100px، وصفين ارتفاع كل منهما 80px. --- 🔹 3. إضافة فجوات بين العناصر (gap) .container { display: grid; gap: 10px; } 📌 تستخدم gap لتحديد المسافة بين الصفوف والأعمدة بدون الحاجة لـ margin . --- 🧪 مثال عملي <style> .container { display: grid; grid-template-columns: auto auto auto; gap: 10px; background-color: #2196F3; padding: 10px; } .item { background-color: white; padding: 20px; font-size: ...

CSS - الأعمدة والصفوف في Grid 🔸 في CSS Grid، يتم تعريف الأعمدة والصفوف باستخدام الخصيتين: grid-template-columns و grid-template-rows . وهما يُحددان عدد الأعمدة والصفوف، وحجم كل منها. --- 🔹 تحديد الأعمدة باستخدام grid-template-columns .container { display: grid; grid-template-columns: 100px 200px auto; } 📌 هذا يُنشئ شبكة مكونة من 3 أعمدة: الأول 100px، الثاني 200px، والثالث يأخذ المساحة المتبقية تلقائيًا. --- 🔹 استخدام repeat لتقليل التكرار .container { display: grid; grid-template-columns: repeat(3, 1fr); } 📌 يُستخدم لتكرار قيمة معينة عدة مرات. هنا نُنشئ 3 أعمدة متساوية العرض باستخدام وحدة fr (جزء نسبي). --- 🔹 تحديد الصفوف باستخدام grid-template-rows .container { display: grid; grid-template-rows: 100px auto 50px; } 📌 هنا لدينا 3 صفوف: الأول 100px، الثاني تلقائي حسب المحتوى، والثالث 50px. --- 🧪 مثال عملي <style> .container { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 100px 100px; ...

CSS - تصميم الشبكة (CSS Grid) 🔸 CSS Grid Layout هو نظام تخطيط ثنائي الأبعاد يسمح بإنشاء تخطيطات معقدة تعتمد على الصفوف والأعمدة بسهولة. بعكس Flexbox الذي يتعامل مع بُعد واحد (إما أفقي أو عمودي)، فإن Grid يتعامل مع كليهما معًا. --- 🔹 تفعيل التصميم الشبكي .container { display: grid; } 📌 عند تعيين display: grid ، يُصبح العنصر حاوية شبكة، والعناصر بداخله تصبح عناصر شبكة (grid items). --- 🔹 تحديد الأعمدة والصفوف .container { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 100px 100px; } 📌 يُنشئ شبكة من 3 أعمدة عرض كل منها 200px، وصفين ارتفاع كل منهما 100px. --- 🔹 استخدام repeat لتقليل التكرار .container { display: grid; grid-template-columns: repeat(3, 1fr); } 📌 يُنشئ 3 أعمدة متساوية العرض باستخدام وحدة fr (نسبة من المساحة المتاحة). --- 🧪 مثال عملي على شبكة بسيطة <style> .container { display: grid; grid-template-columns: auto auto auto; gap: 10px; background-color: #2196F3; paddi...

CSS - التصميم المتجاوب باستخدام Flexbox 🔸 باستخدام Flexbox، من السهل إنشاء تخطيطات مرنة تتكيف تلقائيًا مع حجم الشاشة، خاصة عند دمجه مع خاصية flex-wrap وMedia Queries. --- 🔹 حاوية Flex قابلة للالتفاف يمكنك جعل العناصر تلتف تلقائيًا باستخدام flex-wrap: wrap; .row { display: flex; flex-wrap: wrap; } --- 🔹 تقسيم الأعمدة المتجاوبة باستخدام Flexbox وpercentages يمكنك تحديد عرض الأعمدة بشكل مرن. .column { flex: 50%; padding: 10px; } 📌 هذا يجعل كل عمود يأخذ نصف عرض الحاوية. وعند الالتفاف (wrap)، يتم توزيعهم عموديًا تلقائيًا. --- 🧪 مثال عملي كامل على تخطيط متجاوب <style> .row { display: flex; flex-wrap: wrap; } .column { flex: 50%; padding: 10px; background-color: #f2f2f2; border: 1px solid #ccc; box-sizing: border-box; } @media screen and (max-width: 600px) { .column { flex: 100%; } } </style> <div class="row"> <div class="column">عمود 1</div> <div class=...

CSS - خصائص العناصر داخل Flexbox (Flex Items) 🔸 عند وضع عناصر داخل حاوية Flex (أي عنصر عليه display: flex )، يمكنك التحكم في سلوك كل عنصر على حدة باستخدام مجموعة من الخصائص المخصصة للعناصر الأبناء. --- 🔹 1. order 🔹 تُستخدم لتحديد ترتيب ظهور العنصر داخل الحاوية. كلما كانت القيمة أقل، يظهر العنصر قبل غيره. .item1 { order: 2; } .item2 { order: 1; } --- 🔹 2. flex-grow 🔹 يُحدد مدى قدرة العنصر على التمدد لملء المساحة المتاحة في الحاوية. .item { flex-grow: 1; } 📌 إذا كانت كل العناصر flex-grow: 1 ، فستتقاسم المساحة بالتساوي. إذا كانت واحدة 1 وأخرى 2 ، فالثانية تأخذ ضعف المساحة. --- 🔹 3. flex-shrink 🔹 يُحدد ما إذا كان العنصر سينكمش عند ضيق الشاشة، وكم سينكمش مقارنة بغيره. .item { flex-shrink: 1; } 📌 القيمة الافتراضية 1، وتعني أن العنصر يمكنه الانكماش. إذا وضعت 0 فلن ينكمش أبدًا. --- 🔹 4. flex-basis 🔹 تُحدد الحجم الابتدائي للعنصر قبل توزيع المساحة المتاحة. .item { flex-basis: 200px; } 📌 تشبه width ، لكن تُستخ...

CSS - خصائص الحاوية Flex Container 🔸 عند تعيين display: flex أو inline-flex على عنصر، يُصبح هذا العنصر Flex Container ، وجميع العناصر بداخله تُصبح Flex Items . وفيما يلي أهم الخصائص الخاصة بالحاوية: --- 1. display .container { display: flex; /* يجعل الحاوية Flex Block */ /* أو */ display: inline-flex; /* يجعل الحاوية Flex داخل السطر */ } --- 2. flex-direction 🔹 تُحدد الاتجاه الرئيسي للعناصر داخل الحاوية (أفقي أو عمودي). flex-direction: row; /* أفقي من اليسار لليمين (افتراضي) */ flex-direction: row-reverse; /* أفقي من اليمين لليسار */ flex-direction: column; /* عمودي من الأعلى للأسفل */ flex-direction: column-reverse;/* عمودي من الأسفل للأعلى */ --- 3. flex-wrap 🔹 تُحدد هل يُسمح للعناصر بالانتقال لسطر جديد عند امتلاء السطر الحالي. flex-wrap: nowrap; /* لا يلتف (افتراضي) */ flex-wrap: wrap; /* يلتف لأسفل */ flex-wrap: wrap-reverse; /* يلتف لأعلى */ --- 4. flex-flow 🔹 اختصار لـ flex-direction ...

CSS - Flexbox (الصندوق المرن) 🔸 Flexbox هو نموذج تخطيط قوي في CSS يسمح لك بمحاذاة العناصر وتوزيع المساحات بينها بطريقة مرنة وسهلة، خاصة عندما تكون الأحجام غير معروفة أو تتغير ديناميكيًا. --- 🔹 الخطوة الأولى: تحديد العنصر الحاوي كـ flex container .container { display: flex; } 📌 بعد تفعيل display: flex على العنصر الأب، يتم توزيع كل العناصر بداخله بشكل أفقي بشكل افتراضي. --- 🔹 الخصائص الخاصة بالعنصر الحاوي (Container) flex-direction : اتجاه العناصر (row, column, row-reverse, column-reverse) justify-content : المحاذاة الأفقية (start, center, space-between...) align-items : المحاذاة الرأسية (stretch, center, flex-start...) flex-wrap : هل يتم لف العناصر أم لا align-content : محاذاة الصفوف عند وجود أكثر من صف .container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; } --- 🔹 الخصائص الخاصة بالعناصر الأبناء (Items) flex-grow : نسبة النمو عند توفر مساحة إضافية. f...

CSS - فلاتر الصور (Image Filters) 🔸 تُستخدم خاصية filter في CSS لتطبيق تأثيرات بصرية على الصور (أو أي عناصر HTML) مثل التمويه، التباين، الرمادي، وغيرها. تُستخدم بكثرة في التصميم الحديث لإضافة لمسة جمالية بدون الحاجة لتعديل الصورة باستخدام برامج خارجية. --- 🔹 أمثلة على تأثيرات الفلاتر img.blur { filter: blur(5px); } img.brightness { filter: brightness(150%); } img.contrast { filter: contrast(200%); } img.grayscale { filter: grayscale(100%); } img.invert { filter: invert(100%); } img.sepia { filter: sepia(100%); } img.saturate { filter: saturate(8); } img.huerotate { filter: hue-rotate(180deg); } img.shadow { filter: drop-shadow(10px 10px 10px gray); } 📌 يمكنك تطبيق هذه الكلاسات على الصور لتجربة التأثيرات المختلفة. --- 🧪 مثال عملي بسيط <img src="example.jpg" class="grayscale" alt="صورة رمادية"> <img src="example.jpg" class="blur" alt="صورة ضبابية"> <img s...