ניתן ליצור עיצוב של דף 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‏ > התפריט הנשלף > Export Options וסמן את תיבת הסימון Generate CSS for Unnamed Objects. 

  1. בחר Window‏ > CSS Properties.

    A. אזהרה, אם לא ניתן להמיר חלק מהסגנונות לקוד CSS B. תיבת הדו-שיח CSS Export Options C. Export Selected CSS to file D. Copy Selected Style to the clipboard E. Generate CSS F. תפריט נשלף 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
      • כדי לייצא אותו לקובץ, לחץ על התפריט הנשלף ולאחר מכן לחץ על Export Selected CSS
    • כדי להעתיק את כל הקוד, אל תבחר אף קטע מתוך קוד ה- CSS ולאחר מכן:
      • כדי להעתיק ללוח, לחץ על Copy Selected Style
      • כדי לייצא לקובץ, לחץ על התפריט הנשלף ולאחר מכן לחץ על 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);
}

מלבן שהוחל עליו מעבר צבע (בדפדפנים מבוססי 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;
}

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת