摘取 Extract CSS | Illustrator

  1. Illustrator 使用手冊
  2. 認識 Illustrator
    1. Illustrator 簡介
      1. Illustrator 新增功能
      2. 常見問題
      3. Illustrator 系統需求
      4. 適用於 Apple Silicon 的 Illustrator
    2. 工作區
      1. 工作區基本介紹
      2. 建立文件
      3. 工具預設鍵盤快捷鍵 | Illustrator
      4. 自訂鍵盤快速鍵
      5. 工作區域
      6. 自訂工作區
      7. 屬性面板
      8. 工具收藏館
      9. 設定偏好設定
      10. 觸控工作區
      11. Illustrator 中的 Microsoft Surface Dial 支援
      12. 復原、還原與自動化
      13. 旋轉檢視
      14. 尺標、格點和參考線
      15. Illustrator 協助工具
      16. 安全模式
      17. 檢視圖稿
      18. 搭配 Illustrator 使用 Touch Bar
      19. 檔案和範本
      20. 使用 Adobe Creative Cloud 進行同步設定
  3. iPad 版 Illustrator
    1. iPad 版 Illustrator 簡介
      1. iPad 版 Illustrator 概觀
      2. iPad 版 Illustrator 常見問題集
      3. 系統需求 | iPad 版 Illustrator
      4. 在 iPad 版 Illustrator 上可以和不可以做的事
    2. 工作區
      1. iPad 版 Illustrator 工作區
      2. 觸控快捷鍵與手勢
      3. iPad 版 Illustrator 鍵盤快捷鍵
      4. 管理您的應用程式設定
    3. Documents
      1. 在 iPad 版 Illustrator 中處理文件
      2. 讀入 Photoshop 和 Fresco 文件
    4. 選取和排列物件
      1. 建立重複物件
    5. 繪圖
      1. 繪製及編輯路徑
      2. 繪製及編輯形狀
    6. 文字
      1. 使用類型和字體
      2. 沿路徑建立文字設計
      3. 新增自有字體
    7. 處理影像
      1. 處理影像
    8. 顏色
      1. 套用顏色和漸層
  4. 雲端文件
    1. 基本概念
      1. 使用 Illustrator 雲端文件
      2. 共用 Illustrator 雲端文件和協作
      3. 升級 Adobe Illustrator 的雲端儲存空間
      4. Illustrator 雲端文件 | 常見問題
    2. 疑難排解
      1. 疑難排解 Illustrator 雲端文件的建立或儲存問題
      2. 疑難排解 Illustrator 雲端文件問題
  5. 新增並編輯內容
    1. 繪圖
      1. 繪圖基本介紹
      2. 編輯路徑
      3. 繪製像素級最佳化線條圖
      4. 使用筆型、曲線或鉛筆工具繪圖
      5. 繪製簡單線條和形狀
      6. 影像描圖
      7. 簡化路徑
      8. 定義透視格點
      9. 建立 3D 物件
      10. 符號工具和符號組
      11. 調整路徑區段
      12. 以 5 個簡單步驟設計花朵
      13. 透視繪圖
      14. 符號
      15. 繪製網頁工作流程的像素對齊路徑
    2. 顏色
      1. 關於色彩
      2. 選取顏色
      3. 使用及建立色票
      4. 調整顏色
      5. 使用「Adobe Color 主題」面板
      6. 顏色群組 (調協)
      7. 顏色主題面板
      8. 重新上色您的圖稿
    3. 上色
      1. 關於上色
      2. 使用填色與筆畫上色
      3. 即時上色群組
      4. 漸層
      5. 筆刷
      6. 透明度和漸變模式
      7. 將筆畫套用至物件
      8. 建立和編輯圖樣
      9. 網格
      10. 圖樣
    4. 選取和排列物件
      1. 選取物件
      2. 圖層
      3. 群組和展開物件
      4. 移動、對齊和均分物件
      5. 堆疊物件    
      6. 鎖定、隱藏及刪除物件
      7. 複製物件
      8. 旋轉及鏡射物件
    5. 改變物件外框
      1. 裁切影像
      2. 將物件變形
      3. 組合物件
      4. 剪下、分割和剪裁物件
      5. 操控彎曲
      6. 縮放、傾斜及扭曲物件
      7. 漸變物件
      8. 使用封套改變外框
      9. 使用效果改變物件外框
      10. 使用 Shaper 和形狀建立程式工具建立形狀
      11. 使用即時轉角
      12. 增強型改變外框工作流程和觸控支援
      13. 編輯剪裁遮色片
      14. 即時形狀
      15. 使用「形狀建立程式」工具建立形狀
      16. 整體編輯
    6. 文字
      1. 建立文字
      2. 字體和印刷樣式
      3. 設定文字格式
      4. 讀入和轉存文字
      5. 格式化段落
      6. 特殊字元
      7. 建立路徑文字
      8. 字元與段落樣式
      9. 定位點
      10. 文字
      11. 尋找遺失字體 (Typekit 工作流程)
      12. 更新來自 Illustrator 10 的文字
      13. 阿拉伯文和希伯來文文字
      14. 字體 | 常見問答和疑難排解提示
      15. 營造 3D 文字效果
      16. 創意印刷樣式設計
      17. 縮放與旋轉文字
      18. 行和字元間距
      19. 連字和分行符號
      20. 文字增強功能
      21. 拼字及語言字典
      22. 設定亞洲字元格式
      23. 亞洲撰寫程式字體
      24. 使用漸變物件建立文字設計
      25. 使用影像描圖建立文字海報
    7. 建立特效
      1. 使用效果
      2. 繪圖樣式
      3. 建立陰影
      4. 外觀屬性
      5. 建立素描和馬賽克
      6. 陰影、光暈和羽化
      7. 效果摘要
    8. 網頁圖形
      1. 建立網頁圖形的最佳作法
      2. 圖表
      3. SVG
      4. 建立動畫
      5. 切片和影像地圖
  6. 讀入、轉存及儲存
    1. 讀入
      1. 讀入圖稿檔案
      2. 讀入點陣影像
      3. 從 Photoshop 讀入圖稿
      4. 置入多個檔案 | Illustrator CC
      5. 取消嵌入影像
      6. 讀入 Adobe PDF 檔案
      7. 讀入 EPS、DCS 及 AutoCAD 檔案
      8. 連結資訊
    2. Illustrator 中的 Creative Cloud 資料庫 
      1. Illustrator 中的 Creative Cloud Libraries
    3. 儲存
      1. 儲存圖稿
    4. 轉存
      1. 轉存圖稿
      2. 以批次方式收集資產及轉存
      3. 封裝檔案
      4. 建立 Adobe PDF 檔案
      5. 摘取 Extract CSS | Illustrator CC
      6. Adobe PDF 選項
      7. 檔案資訊和中繼資料
  7. 列印
    1. 準備列印
      1. 設定列印的文件
      2. 變更頁面大小和方向
      3. 指定剪裁或對齊的裁切標記
      4. 開始使用大型畫布
    2. 列印
      1. 疊印
      2. 使用色彩管理進行列印
      3. PostScript 列印
      4. 列印預設集
      5. 印表機的標記和出血
      6. 列印和儲存透明圖稿
      7. 補漏白
      8. 分色列印
      9. 列印漸層、網格及色彩漸變
      10. 白色疊印
  8. 自動化工作
    1. 使用「變數」面板進行資料合併
    2. 以指令碼自動化
    3. 以動作自動化
  9. 疑難排解 
    1. 啟動時當機問題
    2. 當機後復原檔案
    3. 檔案問題
    4. GPU 裝置驅動程式問題
    5. Wacom 裝置問題
    6. DLL 檔案問題
    7. 記憶體問題
    8. 偏好設定檔案問題
    9. 字體問題
    10. 印表機問題
    11. 與 Adobe 分享當機報告

您可以在 Illustrator 中建立 HTML 頁面的設計。這對網路開發人員是很好的視覺引導,他們可以在 HTML 編輯器中將配置、樣式、物件的代碼寫入頁面。不過,完全複製元件和物件的外觀和位置是一件耗時乏味的事。

有了 Illustrator ,當您建立 HTML 頁面的配置時,您也可以產生和轉存基本 CSS 代碼,這些代碼決定了頁面上元件和物件的外觀。CSS 可讓您控制文字和物件的外觀 (類似字元和圖形樣式)。您可以選擇轉存個別物件的 CSS 代碼,或轉存在 Illustrator 中設計的整個配置。   

CSS 屬性面板 (Window > CSS 屬性) 可以讓使用者進行下列作業:

  • 檢視選取物件的 CSS 代碼
  • 複製選取物件的 CSS 代碼
  • 轉存一個、多個或全部的 Illustrator 元素到 CSS 檔案。
  • 轉存所使用的可點陣化圖片
  • 產生特定瀏覽器專用的 CSS 代碼

檢視和摘取 CSS 代碼

註解:

若要產生 CSS 代碼,可採用下列其中一項做法:

  • 確定 Illustrator 文件中的物件,在「圖層」面板中有名稱。
  • 按一下 Window > CSS 屬性 > 彈出式選單 > 轉存選項,然後選取產生無名稱物件的 CSS 核取方塊。 
  1. 選取 Window > CSS 屬性

    CSS 屬性代碼

    A. 警告,如果某些樣式無法轉換為 CSS 代碼 B. 「CSS 轉存選項」對話框 C. 轉存選取的 CSS 為檔案 D. 拷貝所選項目樣式到剪貼簿 E. 產生 CSS F. 彈出式選單 G. 所選物件使用的樣式 H. CSS 代碼 

  2. 在開啟的 Illustrator 文件中,執行下列其中一個作業:

    • 選取一個物件。在 CSS 屬性 面板中會顯示該物件的 CSS 代碼。
    • 按住 Shift,選取多個物件,然後按一下 CSS 屬性面板中的產生 CSS 按鈕。
    • 按 Ctrl/Cmd + A 選取所有物件,然後按一下 CSS 屬性面板中的產生 CSS 按鈕。

    隨即顯示產生的 CSS 代碼。

  3. 若要取得已產生的 CSS 代碼,執行下列其中一個作業:

    • 若要複製選取的代碼,選取特定代碼,然後:
      • 若要複製到剪貼簿,按一下複製選取的樣式
      • 若要轉存到檔案,按一下彈出式選單,然後按一下轉存選取的 CSS
    • 若要複製全部代碼,不要選取 CSS 代碼中任何部分,然後:
      • 若要複製到剪貼簿,按一下複製選取的樣式
      • 若要轉存到檔案,按一下彈出式選單,然後按一下全部轉存
  4. 將 CSS 代碼儲存到檔案時,選擇下列選項:

    CSS 轉存選項

    註解:

    若要修改所產生 CSS 代碼的內容,在CSS 屬性面板中,按一下轉存選項,然後進行所需的選擇。

範例 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; }
Adobe 標誌

登入您的帳戶