مولد خصائص CSS: أنشئ تدرجات، ظلال وحدود

قم بإنشاء كود CSS مخصص للتدرجات، وظلال الصندوق، ونصف القطر للحدود، وظلال النص باستخدام واجهة بصرية سهلة الاستخدام. قم بضبط المعلمات باستخدام المنزلقات وشاهد المعاينات الحية.

مولد خصائص CSS

نوع التدرج

خطّي

دائري

زاوية90°

اللون 1

الموقع 10%

اللون 2

الموقع 2100%

CSS الناتج

معاينة

نسخ إلى الحافظة

📚

التوثيق

مولد خصائص CSS: أنشئ تدرجات جميلة، ظلال، وزوايا مدورة

مقدمة لمولد خصائص CSS

مولد خصائص CSS هو أداة قوية وسهلة الاستخدام مصممة لمساعدة مطوري الويب والمصممين على إنشاء تأثيرات CSS جميلة دون الحاجة لكتابة الكود من الصفر. تتيح لك هذه الأداة البصرية تخصيص خصائص CSS الأساسية مثل التدرجات، ظلال الصناديق، نصف القطر، وظلال النص، ثم توليد كود CSS المقابل على الفور جاهز للنسخ واللصق في مشاريعك. سواء كنت مطورًا متمرسًا تبحث عن توفير الوقت أو مبتدئًا يتعلم CSS، فإن هذه الأداة تبسط عملية إنشاء تأثيرات بصرية احترافية لمواقع الويب الخاصة بك.

مع مولد خصائص CSS الخاص بنا، يمكنك:

إنشاء تدرجات خطية وشعاعية بألوان ومواقع مخصصة
تصميم ظلال صناديق مع تحكم دقيق في الإزاحة، الضباب، الانتشار، واللون
توليد قيم نصف القطر لجميع الزوايا أو الزوايا الفردية
إنشاء ظلال نص مع خيارات مخصصة للإزاحة، الضباب، واللون

توفر الأداة معاينات في الوقت الحقيقي لتخصيصاتك، مما يتيح لك رؤية كيف ستبدو تأثيرات CSS الخاصة بك قبل تنفيذها في مشروعك. تجعل هذه الطريقة البصرية من السهل تجربة إعدادات مختلفة وتحقيق المظهر المثالي لعناصر الويب الخاصة بك.

فهم خصائص CSS

التدرجات

التدرجات في CSS هي وسيلة قوية لإنشاء انتقالات سلسة بين لونين أو أكثر محددين. إنها تلغي الحاجة إلى ملفات الصور، مما يقلل من أوقات التحميل ويسمح بتصاميم أكثر استجابة. يدعم مولدنا نوعين من التدرجات:

التدرجات الخطية

تنتقل التدرجات الخطية بين الألوان على طول خط مستقيم. يمكنك التحكم في:

الاتجاه/الزاوية: تحدد اتجاه تدفق اللون (0-360 درجة)
نقاط اللون: الألوان التي ستنتقل بينها
مواقع الألوان: حيث يبدأ كل لون وينتهي في التدرج

تتبع صيغة CSS للتدرجات الخطية هذا النمط:

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

على سبيل المثال، تدرج من الأحمر إلى الأزرق بزاوية 45 درجة:

1background: linear-gradient(45deg, #ff0000 0%, #0000ff 100%);
2

التدرجات الشعاعية

تنتقل التدرجات الشعاعية بين الألوان للخارج من نقطة مركزية في نمط دائري أو بيضاوي. يمكنك تخصيص:

الشكل: دائرة أو بيضاوي
نقاط اللون: الألوان في تدرجك
مواقع الألوان: حيث يبدأ كل لون وينتهي في التدرج

تتبع صيغة CSS للتدرجات الشعاعية هذا النمط:

1background: radial-gradient(shape, color1 position1%, color2 position2%);
2

على سبيل المثال، تدرج دائري من الأحمر في المركز إلى الأزرق عند الحواف:

1background: radial-gradient(circle, #ff0000 0%, #0000ff 100%);
2

ظلال الصناديق

تضيف ظلال الصناديق عمقًا وأبعادًا للعناصر من خلال إنشاء تأثيرات الظل. مع مولدنا، يمكنك التحكم في:

الإزاحة الأفقية: مدى امتداد الظل أفقيًا
الإزاحة الرأسية: مدى امتداد الظل رأسيًا
نصف قطر الضباب: مدى ضبابية الظل
نصف قطر الانتشار: مدى اتساع الظل
اللون والشفافية: لون الظل وشفافيته
خيار الإدخال: ما إذا كان الظل يظهر داخل العنصر

تتبع صيغة CSS لظلال الصناديق هذا النمط:

1box-shadow: h-offset v-offset blur spread color;
2

لظلال الإدخال، أضف الكلمة الرئيسية inset:

1box-shadow: inset h-offset v-offset blur spread color;
2

على سبيل المثال، ظل خفيف:

1box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);
2

نصف القطر

يخلق نصف القطر زوايا مدورة على العناصر، مما يخفف من مظهرها. يتيح لك مولدنا:

تعيين نفس نصف القطر لجميع الزوايا
تخصيص كل زاوية بشكل فردي (الزاوية العلوية اليسرى، العلوية اليمنى، السفلية اليمنى، السفلية اليسرى)

تتبع صيغة CSS لنصف القطر هذه الأنماط:

للزوايا الموحدة:

1border-radius: value;
2

للزوايا الفردية:

1border-radius: top-left top-right bottom-right bottom-left;
2

على سبيل المثال، زر مع زوايا مدورة:

1border-radius: 10px;
2

أو فقاعة حديث مع نصف قطر زوايا مختلفة:

1border-radius: 20px 20px 5px 20px;
2

ظلال النص

تضيف ظلال النص عمقًا وتأثيرًا للنص. مع مولدنا، يمكنك التحكم في:

الإزاحة الأفقية: مدى امتداد الظل أفقيًا
الإزاحة الرأسية: مدى امتداد الظل رأسيًا
نصف قطر الضباب: مدى ضبابية الظل
اللون والشفافية: لون الظل وشفافيته

تتبع صيغة CSS لظلال النص هذا النمط:

1text-shadow: h-offset v-offset blur color;
2

على سبيل المثال، ظل نص خفيف:

1text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
2

كيفية استخدام مولد خصائص CSS

تم تصميم مولد خصائص CSS ليكون بديهيًا وسهل الاستخدام. اتبع هذه الخطوات لإنشاء خصائص CSS مخصصة لمشاريع الويب الخاصة بك:

الخطوة 1: اختر خاصية CSS

اختر نوع خاصية CSS التي تريد توليدها عن طريق النقر على أحد الأربعة علامات:

التدرج
ظل الصندوق
نصف القطر
ظل النص

الخطوة 2: خصص إعداداتك

كل نوع من الخصائص له مجموعة من المعلمات القابلة للتخصيص:

للتدرجات:

اختر نوع التدرج (خطّي أو شعاعي)
بالنسبة للتدرجات الخطية، اضبط الزاوية باستخدام شريط التمرير
اختر الألوان باستخدام مختارات الألوان
اضبط موقع كل نقطة لون باستخدام الأشرطة المتحركة

لظلال الصناديق:

اضبط الإزاحة الأفقية والرأسية باستخدام الأشرطة المتحركة
حدد نصف قطر الضباب ونصف قطر الانتشار
اختر لون الظل واضبط الشفافية
قم بتفعيل خيار "ظل الإدخال" إذا كنت تريد ظلًا داخليًا

لنصف القطر:

اختر بين الزوايا الموحدة أو إعدادات الزوايا الفردية
اضبط قيم نصف القطر باستخدام الأشرطة المتحركة
شاهد التغييرات في الوقت الحقيقي في منطقة المعاينة

لظلال النص:

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

الخطوة 3: انسخ CSS المولد

بمجرد أن تكون راضيًا عن تخصيصك:

راجع كود CSS المولد المعروض في مربع الكود
انقر على زر "نسخ إلى الحافظة"
ألصق الكود في ملف CSS الخاص بك أو في نمط داخلي

تقوم الأداة بتحديث كود CSS تلقائيًا كلما قمت بتعديل الإعدادات، لذا سترى دائمًا أحدث نسخة من تخصيصك.

التطبيقات العملية وحالات الاستخدام

التدرجات لعناصر واجهة المستخدم

يمكن أن تعزز التدرجات عناصر واجهة المستخدم المختلفة:

الأزرار: أنشئ أزرار دعوة للعمل جذابة بخلفيات متدرجة

1   .cta-button {
2     background: linear-gradient(45deg, #ff416c 0%, #ff4b2b 100%);
3     color: white;
4     padding: 10px 20px;
5     border: none;
6     border-radius: 5px;
7   }
8

الرؤوس والتذييلات: أضف اهتمامًا بصريًا لأقسام الصفحة

1   header {
2     background: linear-gradient(to right, #2c3e50 0%, #4ca1af 100%);
3     color: white;
4     padding: 20px;
5   }
6

أشرطة التقدم: اجعل مؤشرات التقدم أكثر جاذبية

1   .progress-bar {
2     background: linear-gradient(to right, #1fa2ff 0%, #12d8fa 50%, #a6ffcb 100%);
3     height: 10px;
4     border-radius: 5px;
5   }
6

ظلال الصناديق للعمق والارتفاع

يمكن أن تخلق ظلال الصناديق إحساسًا بالهرمية والعمق:

البطاقات: أضف ظلال خفيفة لإنشاء تأثير عائم

1   .card {
2     box-shadow: 0 4px 8px rgba(0,0,0,0.1);
3     padding: 20px;
4     background: white;
5   }
6

القوائم المنسدلة: أنشئ إحساسًا بالارتفاع للتراكبات

1   .dropdown {
2     box-shadow: 0 6px 12px rgba(0,0,0,0.15);
3     background: white;
4     border-radius: 4px;
5   }
6

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

1   input:focus {
2     box-shadow: 0 0 0 3px rgba(66,153,225,0.5);
3     outline: none;
4     border-color: #4299e1;
5   }
6

نصف القطر لواجهات أكثر نعومة

يمكن أن تجعل الزوايا المدورة الواجهات تبدو أكثر قربًا:

صور الملف الشخصي: أنشئ حاويات دائرية أو مدورة للصور

1   .profile-pic {
2     border-radius: 50%; /* دائرة مثالية */
3     width: 100px;
4     height: 100px;
5     object-fit: cover;
6   }
7

الأزرار: ليكن حواف الأزرار أكثر نعومة

1   .button {
2     border-radius: 8px;
3     padding: 10px 20px;
4     background: #4299e1;
5     color: white;
6   }
7

فقاعات الرسائل: أنشئ واجهات شبيهة بالدردشة

1   .message-bubble {
2     border-radius: 18px 18px 18px 4px;
3     background: #e2f5fe;
4     padding: 12px;
5   }
6

ظلال النص لتعزيز الطباعة

يمكن أن تحسن ظلال النص من قابلية القراءة وتضيف أسلوبًا:

نص البطل: اجعل النص بارزًا ضد خلفيات الصور

1   .hero-title {
2     text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
3     color: white;
4     font-size: 3rem;
5   }
6

تأثير الضغط على الحروف: أنشئ مظهرًا بارزًا

1   .letterpress {
2     text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
3     color: #444;
4     font-weight: bold;
5   }
6

نص نيون: أنشئ تأثيرات نص متوهجة

1   .neon-text {
2     text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6;
3     color: #fff;
4   }
5

توافق المتصفح واعتبارات الأداء

توافق المتصفح

بينما تدعم المتصفحات الحديثة جميع خصائص CSS في مولدنا، هناك بعض اعتبارات التوافق:

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

1   .gradient-element {
2     background: #5433FF; /* لون احتياطي */
3     background: -webkit-linear-gradient(45deg, #5433FF, #20BDFF);
4     background: linear-gradient(45deg, #5433FF, #20BDFF);
5   }
6

ظلال الصناديق: مدعومة بشكل جيد عبر المتصفحات. بالنسبة لإصدارات IE القديمة، ضع في اعتبارك استخدام طرق بديلة مثل صور الحدود أو صور الخلفية.
نصف القطر: مدعوم في جميع المتصفحات الحديثة. للحصول على مظهر متسق في المتصفحات القديمة، ضع في اعتبارك استخدام أشكال SVG أو خلفيات الصور للعناصر المدورة.
ظلال النص: دعم جيد في المتصفحات الحديثة. بالنسبة لـ IE9 وما دونه، ضع في اعتبارك تنسيقًا بديلًا أو قبول عدم وجود ظل كتحلل جميل.

اعتبارات الأداء

بينما تعتبر خصائص CSS عمومًا ذات أداء جيد، يمكن أن تؤثر التأثيرات المعقدة على سرعة العرض:

ظلال الصناديق المتعددة: تطبيق ظلال صناديق متعددة على عنصر واحد يمكن أن يبطئ من عملية العرض. ضع في اعتبارك استخدام عدد أقل من طبقات الظل للحصول على أداء أفضل.
التدرجات المعقدة: التدرجات التي تحتوي على العديد من نقاط اللون يمكن أن تؤثر على الأداء. قم بتبسيط التدرجات عندما يكون ذلك ممكنًا أو ضع في اعتبارك استخدام صور مسبقة التقديم لنماذج معقدة جدًا.
الرسوم المتحركة: يمكن أن تؤدي الرسوم المتحركة لخصائص مثل ظل الصندوق إلى مشاكل في الأداء. عند الإمكان، قم بتحريك الخصائص مثل التحويل والشفافية بدلاً من ذلك، أو استخدم خاصية will-change لتحسين الرسوم المتحركة.
الأجهزة المحمولة: قد يكون للتأثيرات المعقدة في CSS تأثير أكبر على الأداء على الأجهزة المحمولة. اختبر تصميماتك على أجهزة مختلفة واعتبر تبسيط التأثيرات لنسخ الهاتف المحمول.

الأسئلة الشائعة

ما الفرق بين التدرجات الخطية والشعاعية؟

تنتقل التدرجات الخطية بين الألوان على طول خط مستقيم في اتجاه محدد (زاوية)، بينما تنتقل التدرجات الشعاعية بين الألوان للخارج من نقطة مركزية في نمط دائري أو بيضاوي. التدرجات الخطية رائعة للخلفيات، الأزرار، والانتقالات الأفقية/الرأسية، بينما تعمل التدرجات الشعاعية بشكل جيد لتأثيرات بقعة الضوء، الأزرار الدائرية، أو إنشاء نقطة تركيز.

هل يمكنني إنشاء ظلال صناديق متعددة على عنصر واحد؟

نعم، يمكنك تطبيق ظلال صناديق متعددة على عنصر واحد عن طريق فصل كل تعريف ظل بفاصلة. على سبيل المثال:

1box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);
2

هذا ينشئ ظلًا رئيسيًا أسفل العنصر وظلًا علويًا خفيفًا لإضافة البعد.

كيف يمكنني جعل زوايا معينة فقط مدورة باستخدام نصف القطر؟

يمكنك تحديد قيم نصف القطر المختلفة لكل زاوية باستخدام خاصية border-radius مع أربعة قيم بالترتيب: الزاوية العلوية اليسرى، العلوية اليمنى، السفلية اليمنى، السفلية اليسرى. على سبيل المثال:

1border-radius: 10px 0 0 10px;
2

هذا سيجعل الزوايا اليسرى فقط (العلوية اليسرى والسفلية اليسرى) مدورة، تاركًا الزوايا اليمنى مربعة.

لماذا يبدو ظل النص مختلفًا عبر المتصفحات؟

يمكن أن يختلف عرض ظل النص قليلاً بين المتصفحات بسبب الاختلافات في مضاد التعرج ومحركات العرض. للحصول على نتائج أكثر اتساقًا، استخدم قيم ضبابية معتدلة (1-3px) واختبر عبر متصفحات مختلفة. غالبًا ما تظهر الظلال الدقيقة جدًا (0-1px ضباب) أكبر قدر من التباين بين المتصفحات.

هل يمكنني تحريك هذه الخصائص CSS؟

نعم، يمكن تحريك معظم خصائص CSS، لكن بعضها يعمل بشكل أفضل من الآخرين:

التدرجات: لا يمكن تحريكها مباشرة باستخدام انتقالات CSS، ولكن يمكنك تحريك background-position أو استخدام keyframes CSS للتبديل بين تعريفات التدرج المختلفة
ظلال الصناديق: يمكن تحريكها ولكن قد تسبب مشاكل في الأداء؛ ضع في اعتبارك استخدام التحويل لتأثيرات الحركة بدلاً من ذلك
نصف القطر: يتحرك بسلاسة وعادة ما يكون صديقًا للأداء
ظلال النص: يمكن تحريكها ولكن قد تسبب مشاكل في عرض النص أثناء الرسوم المتحركة

كيف يمكنني ضمان أن تأثيرات CSS الخاصة بي قابلة للوصول؟

عند استخدام تأثيرات CSS، ضع في اعتبارك هذه الإرشادات الخاصة بإمكانية الوصول:

حافظ على تباين الألوان الكافي حتى عند استخدام التدرجات
لا تعتمد فقط على تأثيرات الظل للإشارة إلى العناصر التفاعلية
تأكد من أن النص يبقى قابلًا للقراءة عند تطبيق ظلال النص
ضع في اعتبارك المستخدمين الذين يفضلون تقليل الحركة وقدم بدائل باستخدام استعلام وسائط prefers-reduced-motion

هل يمكنني توليد بادئات البائع باستخدام هذه الأداة؟

تولد أداتنا خصائص CSS القياسية دون بادئات البائع. للاستخدام في الإنتاج، ضع في اعتبارك تشغيل CSS الخاص بك عبر أداة autoprefixer أو استخدام معالج CSS يقوم بإدارة بادئات البائع تلقائيًا.

المراجع وقراءة إضافية

وثائق MDN: استخدام تدرجات CSS
CSS-Tricks: دليل كامل لتدرجات CSS
وثائق MDN: ظل الصندوق
CSS-Tricks: نصف القطر
وثائق MDN: ظل النص
مجلة Smashing: ظلال CSS، تخصيصها وتحريكها
هل يمكنني استخدام: جداول دعم ميزات CSS
Web.dev: تحسين أداء CSS

الخاتمة

يبسط مولد خصائص CSS عملية إنشاء تأثيرات CSS جميلة ومخصصة لمشاريع الويب الخاصة بك. من خلال توفير واجهة بصرية بديهية لتصميم التدرجات، ظلال الصناديق، نصف القطر، وظلال النص، فإنه يلغي الحاجة لتذكر الصياغة المعقدة أو تعديل القيم يدويًا من خلال التجربة والخطأ.

سواء كنت تبني موقعًا احترافيًا، أو تنشئ نموذجًا أوليًا، أو تتعلم CSS، تساعدك هذه الأداة على تحقيق نتائج مصقولة بسرعة. تتيح لك ميزة المعاينة في الوقت الحقيقي رؤية كيف ستبدو تخصيصاتك بالضبط، وتسهّل وظيفة النسخ بنقرة واحدة تنفيذ تصميماتك في مشروعك.

ابدأ في تجربة خصائص CSS المختلفة اليوم لتعزيز تصميمات الويب الخاصة بك وإنشاء واجهات مستخدم أكثر جاذبية!

💬

تغذية راجعة

💬

انقر فوق الرسالة المنبثقة لبدء إعطاء تعليق حول هذه الأداة

🔗

الأدوات ذات الصلة

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