استخراج CSS‏ | Illustrator CC

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

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

لوحة CSS Properties ‏(Window > CSS Properties) تتيح للمستخدمين القيام بما يلي:

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

فيديو: استخراج CSS في Illustrator CC

راجع كيفية إنشاء مواقع الويب بشكل أسرع من خلال إتاحة برنامج Illustrator CC لإنشاء رمز CSS لك - للنصوص، الكائنات، وحتى المخططات بالكامل.

روفوس دوشلر

ملاحظة:

لإنشاء رمز CSS، اتبع أحد الإجراءات التالية:

تأكد من أن الكائنات في مستند Illustrator الخاص بك مسمّاة في لوحة Layer.
انقر فوق Window > CSS Properties > flyout menu > Export Options، وحدد خانة الاختيار Generate CSS for Unnamed Objects.

حدد Window > CSS Properties.

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 الذي تم إنشاؤه، قم بأحد الإجراءات التالية:

لنسخ الرمز المحدد، حدد الرمز الخاص، ثم:
- للنسخ إلى الحافظة، انقر فوق Copy Selected Style
- للتصدير إلى ملف، انقر فوق قائمة flyout، ثم انقر فوق Export Selected CSS
لنسخ جميع الرموز، لا تقم بتحديد أي شيء في رمز CSS، ثم:
- للنسخ إلى الحافظة، انقر فوق Copy Selected Style
- للتصدير إلى ملف، انقر فوق قائمة flyout، ثم انقر فوق Export All

أثناء حفظ رمز CSS إلى ملف، اختر من الخيارات التالية:

ملاحظة:

تعديل محتوى رمز CSS الذي تم إنشاؤه؛ في لوحة CSS Properties، انقر فوق Export Options، ثم قم بالتحديدات المناسبة.

.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;
}

إشعارات قانونية | سياسة الخصوصية على الإنترنت

استخراج CSS‏ | Illustrator CC

فيديو: استخراج CSS في Illustrator CC

عرض رمز CSS واستخراجه

عينة رمز CSS

مستطيل مطبّق عليه تدرج (جميع المتصفحات)

مستطيل مع التدرج المطبّق (المتصفحات المستندة إلى مجموعة أدوات الويب فقط)

كائنات متعددة

طرح سؤال على المجتمع

اتصل بنا