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

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

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

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

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

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

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

ملاحظة:

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

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

  1. حدد Window > CSS Properties.

    A. تحذير، في حالة تعذر تحويل بعض الأنماط إلى رمز CSS B. مربع الحوار CSS Export Options C. تصدير Selected CSS إلى ملف D. نسخ Selected Style إلى الحافظة E. Generate CSS F. القائمة Flyout G. الأنماط المستخدمة في الكائنات المحددة H. رمز CSS 
  2. في مستند Illustrator مفتوح، قم بأحد الإجراءات التالية:

    • حدد كائنًا. رمز CSS للكائن معروض في لوحة CSS Properties.
    • اضغط باستمرار على Shift، وحدد كائنات متعددة ثم انقر على الزر Generate CSS في لوحة CSS Properties.
    • اضغط على Ctrl/Cmd + A لتحديد جميع الكائنات، ثم انقر فوق الزر Generate CSS في لوحة CSS Properties.

    يتم عرض رمز CSS الذي تم إنشاؤه.

  3. للحصول على رمز CSS الذي تم إنشاؤه، قم بأحد الإجراءات التالية:

    • لنسخ الرمز المحدد، حدد الرمز الخاص، ثم:
      • للنسخ إلى الحافظة، انقر فوق Copy Selected Style
      • للتصدير إلى ملف، انقر فوق قائمة flyout، ثم انقر فوق Export Selected CSS
    • لنسخ جميع الرموز، لا تقم بتحديد أي شيء في رمز CSS، ثم:
      • للنسخ إلى الحافظة، انقر فوق Copy Selected Style
      • للتصدير إلى ملف، انقر فوق قائمة flyout، ثم انقر فوق Export All
  4. أثناء حفظ رمز 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;
}

تم ترخيص هذا العمل بموجب الترخيص العام غير المعدل الخاص بالإسناد وعدم التجارة والمشاركة الإصدار 3.0 ‏من ‏‏Creative Commons‏‏  إن بنود Creative Commons لا تشمل منشورات Twitter™‎ وFacebook.

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