יצירת CSS משכבות

התכונה Copy CSS יוצרת מאפייני Cascading Style Sheet (CSS) ישירות מ-Layers (שכבות) של Photoshop, ותופסת מפרטי עיצוב שאפשר להדביק בקובצי גיליון הסגנון שלכם. תהליך העבודה הזה מצמצם את הפער בין עיצוב חזותי למימוש קוד, בעיקר בעת הכנת נכסים לפרויקטי אינטרנט או בשיתוף פעולה עם מפתחים שזקוקים למפרטי סגנון מדויקים.

השתמשו ב-Copy CSS כשאתם צריכים לתרגם רכיבי עיצוב חזותיים להצהרות סגנון מוכנות לקוד.התכונה הזו פועלת עם Layers (שכבות) בודדות מסוג צורה, Layers (שכבות) טקסט או קבוצות של Layers (שכבות) שמכילות רכיבים אלו. היא יוצרת CSS שאפשר להדביק ישירות בגיליון הסגנון שלכם, ותופסת מאפייני עיצוב בדיוק מושלם עד לפיקסל.לתהליכי עבודה רחבים יותר של עיצוב לאינטרנט, בדקו את Effects (אפקטים) וסגנונות של Layers (שכבות) לאפשרויות עיצוב נוספות ואת ייצוא הנכסים לפורמטים אחרים של פלט.

מאפייני CSS שנלכדו משכבות

Copy CSS מחלץ מאפיינים שונים בהתאם לסוג ה-Layer (שכבה) שתבחרו.

שכבות צורה יוצרות CSS עבור:

• קואורדינטות של גודל ומיקום
• Stroke color
• צבע מילוי, כולל הגדרות מעבר צבע
• אפקטים של הטלת צל

Layers (שכבות) טקסט תופסות את מאפייני הצורה ואת מפרטי הטיפוגרפיה:

• ‏משפחת גופנים‏
• גודל הגופן ומשקלו
• גובה שורה
• עיטור טקסט (קו תחתון, קו חוצה)
• יישור אנכי (כתב עילי, כתב תחתי)
• יישור טקסט

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

מגבלות Copy CSS

העתקת CSS אינה פועלת עם Smart Objects. אם ה-Layer (שכבה) שלכם הוא Smart Object, לחצו לחיצה כפולה כדי לערוך את התוכן שלו והעתיקו CSS משכבות בתוך מסמך ה-Smart Object, או בצעו רסטריזציה של השכבה תחילה אם זה מתאים לתהליכי העבודה שלכם.

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

יצירת קוד CSS מהשכבות שלכם

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