ForHosting KIT · قراءة المواقع ومراقبتها

أنشئ قيمة box-shadow في CSS

حدّد إزاحة الظل وتمويهه وانتشاره ولونه، واحصل على قيمة box-shadow في CSS جاهزة للصق: القيم 4 و8 و16 و0 تصبح 4px 8px 16px 0px يليها اللون الذي اخترته. مجاني في متصفحك.

مجاني
يعمل في متصفحك
دون تسجيل
بياناتك لا تغادر جهازك

شغّل الأداة مجانًا اطّلع على الـAPI

استخدمها من الويبAPIالبريدTelegramالتطبيق قريبًا

مثال محلول

إذا أدخلت

الإزاحة x: 4
الإزاحة y: 8
التمويه: 16
التمدد: 0
اللون: rgb(15 23 42 / 0.25)

تحصل على

ظل الصندوق: 4px 8px 16px 0px rgb(15 23 42 / 0.25)

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

حدد موضع الظل باستخدام الإزاحتين الأفقية والرأسية

تظهر القيمتان بوحدات بكسل CSS في النتيجة المولدة. تنقل الإزاحة الأفقية الموجبة الظل نحو اليمين، بينما تنقله القيمة السالبة نحو اليسار. وتنقله الإزاحة الرأسية الموجبة إلى أسفل، أما القيمة السالبة فتنقله إلى أعلى.

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

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

تحكم في النعومة والمساحة باستخدام التمويه والانتشار

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

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

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

اختر لونًا وطبق القيمة التي تم توليدها

يقبل حقل اللون قيمة لون CSS واحدة غير فارغة، بما في ذلك اسم اللون أو التدوين السداسي العشري أو صيغة دالية مثل rgb() أو hsl(). غالبًا ما تكون شفافية ألفا مهمة للحصول على ظلال طبيعية، لأن اللون الداكن المعتم قد يبدو ثقيلًا فوق الأسطح الفاتحة ومتعكرًا فوق الخلفيات الملونة. يزيل المولد المسافات الخارجية غير الضرورية، ويتحقق من توازن الأقواس، ويرفض المحارف التي قد تفسد التصريح.

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

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

حالات الاستخدام

أنشئ رمز ظل لأحد المكونات

حول إعدادات التصميم المنظمة إلى قيمة box-shadow ثابتة للبطاقات والقوائم ومربعات الحوار وعناصر التحكم العائمة.

شغل محررًا مرئيًا للأنماط

حول قيم أشرطة التمرير ومنتقيات الألوان إلى CSS قابلة للنسخ، مع رفض إعدادات التمويه أو الانتشار السالبة.

ولد مخرجات أوراق أنماط قابلة للتكرار

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

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

هل يمكن أن تكون الإزاحة الأفقية أو الرأسية سالبة؟

نعم. تنقل الإزاحة الأفقية السالبة الظل إلى اليسار، وتنقله الإزاحة الرأسية السالبة إلى أعلى.

ما الوحدات المستخدمة في الناتج؟

تصدر القيم الرقمية الأربع بوحدات البكسل. قدم أرقامًا محدودة مجردة من دون إضافة نص الوحدة.

هل ينشئ المولد عدة طبقات ظل؟

لا. ينشئ كل طلب طبقة واحدة. ولد الطبقات منفصلة، ثم صل القيم التي راجعتموها بفواصل عندما تتطلب CSS عدة ظلال.

ما الفرق بين التمويه والانتشار في الظل؟

التمويه يحدد نعومة الحافة: عند الصفر تكون الحافة حادة، ومع القيم الأكبر يصبح الظل أنعم وأعرض. أما الانتشار فيكبّر شكل الظل من كل الجهات قبل التمويه، لذا لا تغني زيادة أحدهما عن الآخر.

كيف أجعل الظل شبه شفاف؟

استخدم لونًا فيه شفافية، مثل قيمة rgb() أو hsl() مع قناة ألفا، كما في rgb(15 23 42 / 0.25). اللون الداكن المعتم يبدو ثقيلًا غالبًا، أما اللون الشفاف جزئيًا فيشبه الظل الطبيعي.

أدوات ذات صلة

للمطوّرين — الوصول عبر API

كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.

الـEndpoint

POSThttps://api.kit.forhosting.com/web/box-shadow-generate

صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.

استدعِ الخدمة من بيئتك

curl -X POST https://api.kit.forhosting.com/web/box-shadow-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"offset_x":4,"offset_y":8,"blur":16,"spread":0,"color":"rgb(15 23 42 / 0.25)"}'

const res = await fetch("https://api.kit.forhosting.com/web/box-shadow-generate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "offset_x": 4,
    "offset_y": 8,
    "blur": 16,
    "spread": 0,
    "color": "rgb(15 23 42 / 0.25)"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/box-shadow-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "offset_x": 4,
    "offset_y": 8,
    "blur": 16,
    "spread": 0,
    "color": "rgb(15 23 42 / 0.25)"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/box-shadow-generate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"offset_x":4,"offset_y":8,"blur":16,"spread":0,"color":"rgb(15 23 42 / 0.25)"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"offset_x":4,"offset_y":8,"blur":16,"spread":0,"color":"rgb(15 23 42 / 0.25)"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/box-shadow-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

مثال على الطلب

{
  "offset_x": 4,
  "offset_y": 8,
  "blur": 16,
  "spread": 0,
  "color": "rgb(15 23 42 / 0.25)"
}

مثال على الاستجابة

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.box_shadow_generate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.

الحدود

`timeout_sec`	30
`max_crawl_pages`	25

الأخطاء

HTTP	الرمز	المعنى
`401`	`unauthorized`	مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك.
`402`	`insufficient_balance`	رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة.
`404`	`unknown_type`	نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب.
`429`	`rate_limited`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

ملاحظات تقنية

حدد موضع الظل باستخدام الإزاحتين الأفقية والرأسية

ابدأ بالقيمتين offset_x وoffset_y اللتين تحددان مقدار ابتعاد الظل واتجاهه بالنسبة إلى العنصر.

تحكم في النعومة والمساحة باستخدام التمويه والانتشار

ترفض هذه الإمكانية عمدًا القيم السالبة لكل من التمويه والانتشار، فتقدم قاعدة بسيطة تقبل القيم غير السالبة وخطأ invalid_input واضحًا بدلًا من إنتاج نمط غير متوقع.

اختر لونًا وطبق القيمة التي تم توليدها

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

أسئلة تقنية

ما تكلفة كل قيمة يتم توليدها؟

التشغيل في المتصفح مجاني. يكلف طلب API الناجح $0.002 لكل عنصر يتم توليده.

هل يمكن أن يكون التمويه أو الانتشار سالبًا؟

لا. تشترط هذه الإمكانية أن تكون القيمتان صفرًا أو أكبر، وتعيد خطأ invalid_input خلاف ذلك.

اطّلع على توثيق KIT الكامل ←

شغّل الأداة مجانًا

مثال محلول

حدد موضع الظل باستخدام الإزاحتين الأفقية والرأسية

تحكم في النعومة والمساحة باستخدام التمويه والانتشار

اختر لونًا وطبق القيمة التي تم توليدها

حالات الاستخدام

أنشئ رمز ظل لأحد المكونات

شغل محررًا مرئيًا للأنماط

ولد مخرجات أوراق أنماط قابلة للتكرار

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

أدوات ذات صلة

للمطوّرين — الوصول عبر API

الـEndpoint

استدعِ الخدمة من بيئتك

مثال على الطلب

مثال على الاستجابة

الأسعار

الحدود

الأخطاء

ملاحظات تقنية

حدد موضع الظل باستخدام الإزاحتين الأفقية والرأسية

تحكم في النعومة والمساحة باستخدام التمويه والانتشار

اختر لونًا وطبق القيمة التي تم توليدها

أسئلة تقنية

شكرًا