إنشاء CSS من الطبقات

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

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

خصائص CSS الملتقطة من الطبقات

يستخرج نسخ CSS خصائص مختلفة حسب نوع الطبقة الذي تحدده.

تُنشئ طبقات الشكل CSS لـ:

• إحداثيات الحجم والموضع
• لون Stroke
• لون التعبئة، بما في ذلك تعريفات التدرج اللوني
• تأثيرات الظل المسقط

تلتقط طبقات النص خصائص الشكل بالإضافة إلى مواصفات الطباعة:

• مجموعة الخط
• حجم الخط وسمكه
• ارتفاع السطر
• تنسيق النص (تسطير سفلي، تشطيب)
• المحاذاة الرأسية (مرتفع، منخفض)
• محاذاة النص

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

قيود نسخ CSS

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

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

إنشاء كود CSS من طبقاتك

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