מדריך למשתמש ביטול

חילוץ Illustrator | CSS

חפש

עודכן לאחרונה בתאריך 17 בנובמבר 2022

המדריך למשתמש של Illustrator
הכרת Illustrator
1. מבוא ל-Illustrator
2. מרחב עבודה
3. כלים ב-Illustrator
  1. כלים – סקירה כללית
  2. כלי בחירה
  3. כלי ניווט
    1. יד
    2. Rotate View
    3. Zoom
  4. כלי Paint
  5. כלים לטקסט
  6. כלי שרטוט
  7. שינוי כלים
    1. Rotate
    2. רפלקציה
    3. Scale
    4. Shear
    5. רוחב
    6. Free Transform
    7. Eyedropper
    8. Blend
    9. Eraser
    10. Scissors
    11. Dimension
4. Generative AI (לא זמין בסין היבשתית)
5. פעולות מהירות
Illustrator ב-iPad
1. מבוא ל-Illustrator ב-iPad
2. סביבת עבודה
3. מסמכים
  1. עבודה עם מסמכים ב-Illustrator ב-iPad
  2. ייבוא מסמכי Photoshop ו-Fresco
4. בחירה וסידור של אובייקטים
  1. יצירת אובייקטים חוזרים
  2. מיזוג אובייקטים
5. ציור
  1. ציור ועריכת נתיבים
  2. יצירה ועריכה של צורות
6. טקסט
7. עבודה עם תמונות
  1. הפיכת תמונות רסטר לווקטורים
8. צבע‎
  1. החלת צבעים ומעברי צבע
מסמכי ענן
1. מידע בסיסי
2. פתרון בעיות
  1. פתרון בעיות ביצירה או שמירה של מסמכי ענן של Illustrator
  2. פתרון בעיות במסמכי Illustrator בענן
הוספה ועריכה של תוכן
ייבוא, ייצוא ושמירה
הדפסה
1. להתכונן להדפסה
2. הדפסה
הפיכת משימות לאוטומטיות
פתרון בעיות

למד כיצד לחלץ ולייצא קוד CSS עבור אובייקטים יחידים או עבור הפריסה המלאה שעוצבה ב-Illustrator.

ניתן ליצור עיצוב של דף HTML ב- Illustrator. עיצוב זה ישמש כמדריך חזותי עבור מפתח האתרים שיוכל לאחר מכן לקודד את הפריסה, הסגנונות והאובייקטים לתוך דף בתוכנה לעריכת HTML. אך שכפול המראה והמיקום המדויק של רכיבים ואובייקטים הוא תהליך מעייף הגוזל זמן רב.

כשיוצרים פריסה עבור דף HTML ב-Illustrator ניתן גם לחולל ולייצא את קוד CSS שלה, הקובע את המראה של הרכיבים והאובייקטים באותו דף. CSS מאפשר לך לשלוט במראה של טקסט ואובייקטים (בדומה לשליטה בתווים ובסגנונות הגרפיקה).

הצגה וחילוץ של קוד CSS

החלונית CSS Properties מאפשרת למשתמשים לבצע את הפעולות הבאות:

להציג ולהעתיק את קוד ה-CSS עבור אובייקטים שנבחרו.
לייצא רכיב אחד או יותר או את כל הרכיבים של Illustrator שנבחרו לקובץ CSS.
לייצא תמונות ניתנות לסריקה שנעשה בהן שימוש.
ליצור קוד CSS מותאם לדפדפן מסוים.

A. אזהרה, אם לא ניתן להמיר חלק מהסגנונות לקוד ‏CSS‏ B. תיבת הדו-שיח של אפשרויות הייצוא של CSS‏‏ C. ייצוא CSS נבחרים לקובץ D. העתקת סגנון נבחר ללוח E. הפקת CSS F. ‏תפריט חלונית התכונות של CSS G. סגנונות המשמשים באובייקטים שנבחרו H. קוד CSS

כדי להציג ולחלץ את קוד ה-CSS, בצע את השלבים הנתונים:

בחר Window ‏> CSS Properties.

הערה:

ודא שלאובייקטים הקיימים במסמך Illustrator שיצרת יש שם בחלונית Layer.
כדי להציג את קוד ה-CSS שנוצר:

עבור אובייקט אחד:

בחר אובייקט אחד. קוד ה-CSS עבור האובייקט מוצג בחלונית CSS Properties.

עבור אובייקטים רבים:

לחץ על מקש Shift, בחר באובייקטים רבים ובחר Generate CSS בחלונית CSS Properties.

עבור כל האובייקטים:

לחץ על Ctrl/Cmd + A כדי לבחור בכל האובייקטים, ולאחר מכן בחר Generate CSS בחלונית CSS Properties.
כדי להשיג את קוד ה-CSS שנוצר, בצע אחת מהפעולות הבאות:
כדי להעתיק את הקוד שנבחר:

בחר קוד ספציפי ובחר Copy Selected Style כדי להעתיק אותו ללוח.

בחר בתפריט CSS Properties Panel ובחר Export Selected CSS כדי לייצא לקובץ.

כדי להעתיק את כל הקודים:

אל תבחר שום דבר בקוד ה-CSS ובחר Copy Selected Style כדי להעתיק אותו ללוח.

בחר בתפריט CSS Properties Panel ובחר Export All כדי לייצא לקובץ.
בעת שמירת קוד CSS בקובץ, בחר מתוך האפשרויות הנתונות בתיבת הדו-שיח CSS Export Options.

CSS 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: &quot;progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)&quot;;
  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);
}

מלבן שהוחל עליו מעבר צבע (בדפדפנים מבוססי Webkit בלבד)

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

נושאים קשורים

יש לך שאלה או רעיון?

אם יש לך שאלה לשאול או רעיון לשתף, בוא להשתתף בקהילת Adobe Illustrator. נשמח לשמוע ממך.

קבל עזרה במהירות ובקלות

משתמש חדש?