حدد Window > CSS Properties.
تاريخ آخر تحديث
Oct 27, 2021 12:32:19 AM GMT
- دليل مستخدم Illustrator
- التعرف على Illustrator
- مقدمة عن Illustrator
- مساحة العمل
- أساسيات مساحة العمل
- إنشاء المستندات
- شريط الأدوات
- اختصارات لوحة المفاتيح الافتراضية
- تخصيص اختصارات لوحة المفاتيح
- مقدمة حول اللوحات الفنية
- إدارة اللوحات الفنية
- تخصيص مساحة العمل
- اللوحة Properties
- تعيين التفضيلات
- مساحة العمل Touch
- دعم Microsoft Surface Dial في Illustrator
- الاسترداد والتراجع والمحفوظات والتشغيل التلقائي
- Rotate view
- المساطر والشبكات والأدلة
- إمكانية الوصول في Illustrator
- الوضع الآمن
- عرض الأعمال الفنية
- استخدام Touch Bar مع Illustrator
- الملفات والقوالب
- الأدوات في Illustrator
- لمحة عامة عن الأدوات
- تحديد الأدوات
- أدوات التصفح
- أدوات الطلاء
- أدوات النص
- أدوات الرسم
- أدوات التعديل
- Illustrator على iPad
- مقدمة حول Illustrator على iPad
- مساحة العمل
- Documents
- تحديد الكائنات وترتيبها
- الرسم
- الكتابة
- العمل باستخدام الصور
- اللون
- المستندات السحابية
- الأساسيات
- استكشاف الأخطاء وإصلاحها
- إضافة المحتوى وتحريره
- الرسم
- مبادئ الرسم
- تحرير المسارات
- إنشاء عمل فني عالي الدقة
- الرسم باستخدام الأداة Pen أو Curvature أو Pencil
- رسم الخطوط والأشكال البسيطة
- تتبع الصور
- تبسيط المسار
- تعريف شبكات المنظور
- أدوات الترميز ومجموعات الرموز
- ضبط مقاطع المسار
- تصميم زهرة في 5 خطوات سهلة
- رسم المنظور
- الرموز
- رسم مسارات محاذاة البكسل لعمليات سير عمل الويب
- التأثيرات ثلاثية الأبعاد على مواد Adobe Substance
- اللون
- الطلاء
- تحديد الكائنات وترتيبها
- إعادة تشكيل الكائنات
- اقتصاص الصور
- تحويل الكائنات
- تجميع الكائنات
- قص الكائنات واقتطاعها وتقسيمها
- أداة Puppet Warp
- تحديد حجم الكائنات، وقصها، وتشويهها
- مزج الكائنات
- إعادة التشكيل باستخدام المظاريف
- إعادة تشكيل الكائنات باستخدام التأثيرات
- إنشاء أشكال جديدة باستخدام أداتي Shaper وShape Builder
- التعامل مع Live Corners
- تدفقات عمل تغيير الشكل المحسنة مع دعم اللمس
- تحرير أقنعة القطع
- الأشكال المباشرة
- إنشاء أشكال باستخدام الأداة Shape Builder
- التحرير العمومي
- Type
- إضافة النص والعمل على كائنات الكتابة
- إنشاء قوائم ذات تعداد نقطي ورقمي
- إدارة منطقة النص
- الخطوط والطباعة
- تنسيق الكتابة
- استيراد نص وتصديره
- تنسيق الفقرات
- الحروف الخاصة
- إنشاء كتابة على مسار
- أنماط الفقرات والحروف
- علامات التبويب
- النص والكتابة
- البحث عن الخطوط المفقودة (سير عمل Typekit)
- تحديث نص من Illustrator 10
- الكتابة بالعربية والعبرية
- الخطوط | الأسئلة المتداولة وتلميحات استكشاف الأخطاء وإصلاحها
- إنشاء تأثير نص ثلاثي الأبعاد
- التصميمات الطباعية الإبداعية
- تغيير حجم الكتابة وتدويرها
- المسافات بين الأسطر والحروف
- الوصل وفواصل الأسطر
- تحسينات النصوص
- التدقيق الإملائي وقواميس اللغة
- تنسيق الحروف الآسيوية
- أدوات التأليف للبرامج النصية الآسيوية
- إنشاء التصميمات النصية باستخدام كائنات المزج
- إنشاء ملصق نصي باستخدام تتبع الصورة
- إنشاء تأثيرات خاصة
- رسومات الويب
- الرسم
- الاستيراد، والتصدير، والحفظ
- Import
- Creative Cloud Libraries في Illustrator
- حفظ
- تصدير
- الطباعة
- الإعداد للطباعة
- الطباعة
- تشغيل المهام تلقائيًا
- استكشاف الأخطاء وإصلاحها
يمكنك إنشاء التصميم لصفحة HTML في Illustrator. وهذا مفيد كدليل مرئي جيد لمطور الويب الذي يمكنه بعد ذلك ترميز المخطط والأنماط والكائنات إلى صفحة في محرر HTML. ومع ذلك، فإن محاكاة المظهر والموضع الدقيقين للمكونات والكائنات هي عملية مملة ومستغرقة للكثير من الوقت.
باستخدام Illustrator، عند إنشاء مخطط لصفحة HTML، يمكنك أيضًا إنشاء تعليمات CSS البرمجية الأساسية واستخراجها، وهي التي تحدد مظهر المكونات والكائنات على الصفحة. يتيح CSS التحكم بمظهر النصوص والكائنات (بشكل يشبه أنماط الأحرف والرسوم). يمكنك اختيار تصدير تعليمات CSS البرمجية للكائنات الفردية، أو المخطط بالكامل المصمم في Illustrator.
لوحة CSS Properties (Window > CSS Properties) تتيح للمستخدمين القيام بما يلي:
- عرض تعليمات CSS البرمجية للكائنات المحددة
- نسخ تعليمات CSS البرمجية للكائنات المحددة
- نسخ عنصر واحد أو أكثر، أو جميع عناصر Illustrator المحددة لملف CSS
- تصدير الصور النقطية المستخدمة
- إنشاء تعليمات CSS برمجية خاصة بالمتصفح
عرض تعليمات CSS البرمجية واستخراجها
ملاحظة:
لإنشاء تعليمات CSS البرمجية، اتبع أحد الإجراءات التالية:
- تأكد من أن الكائنات في مستند Illustrator الخاص بك مسمّاة في لوحة Layer.
- انقر فوق Window > CSS Properties > flyout menu > Export Options، وحدد خانة الاختيار Generate CSS for Unnamed Objects.
-
A. تحذير، في حالة تعذر تحويل بعض الأنماط إلى تعليمات CSS البرمجية B. مربع الحوار CSS Export Options C. تصدير Selected CSS إلى ملف D. نسخ Selected Style إلى الحافظة E. Generate CSS F. القائمة Flyout G. الأنماط المستخدمة في الكائنات المحددة H. تعليمات CSS البرمجية
-
في مستند Illustrator مفتوح، قم بأحد الإجراءات التالية:
- حدد كائنًا. رمز CSS للكائن معروض في لوحة CSS Properties.
- اضغط باستمرار على Shift، وحدد كائنات متعددة ثم انقر على الزر Generate CSS في لوحة CSS Properties.
- اضغط على Ctrl/Cmd + A لتحديد جميع الكائنات، ثم انقر فوق الزر Generate CSS في لوحة CSS Properties.
يتم عرض رمز CSS الذي تم إنشاؤه.
- حدد كائنًا. رمز CSS للكائن معروض في لوحة CSS Properties.
-
للحصول على رمز CSS الذي تم إنشاؤه، قم بأحد الإجراءات التالية:
- لنسخ الرمز المحدد، حدد الرمز الخاص، ثم:
- للنسخ إلى الحافظة، انقر فوق Copy Selected Style
- للتصدير إلى ملف، انقر فوق قائمة flyout، ثم انقر فوق Export Selected CSS
- لنسخ جميع الرموز، لا تقم بتحديد أي شيء في رمز CSS، ثم:
- للنسخ إلى الحافظة، انقر فوق Copy Selected Style
- للتصدير إلى ملف، انقر فوق قائمة flyout، ثم انقر فوق Export All
- لنسخ الرمز المحدد، حدد الرمز الخاص، ثم:
-
أثناء حفظ تعليمات CSS البرمجية إلى ملف، اختر من الخيارات التالية:
ملاحظة:تعديل محتوى تعليمات CSS البرمجية التي تم إنشاؤها؛ في لوحة CSS Properties، انقر فوق Export Options، ثم قم بالتحديدات المناسبة.
عينة تعليمات CSS البرمجية
مستطيل مطبّق عليه تدرج (جميع المتصفحات)
.GRADIENT_BOX { background : -moz-linear-gradient(0% 50% 0deg,rgba(255, 242, 0, 1) 0%,rgba(254, 236, 1, 1) 10.31%,rgba(253, 218, 4, 1) 24.34%,rgba(251, 190, 9, 1) 40.51%,rgba(247, 150, 15, 1) 58.28%,rgba(243, 99, 24, 1) 77.37%,rgba(238, 37, 34, 1) 97.27%,rgba(237, 28, 36, 1) 100%); background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : -o-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -ms-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)"; background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200',endColorstr='#ED1C24' , GradientType=1); }
مستطيل مع التدرج اللوني المطبّق (المتصفحات المستندة إلى مجموعة أدوات الويب فقط)
.GRADIENT_BOX { background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px; }
كائنات متعددة
.NormalCharacterStyle { font-family : Myriad Pro; font-size : 12px; } .st0 { border-style : Solid; border-color : #FFFFFF; border-color : rgba(255, 255, 255, 1); border-width : 0px; } .GRADIENT_BOX { background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px; }
تسجيل الدخول إلى حسابك