舉例說明photoshop中的設定與css哪些屬性是對應的呢？

王铁柱6發表於2024-12-09
CSS

Photoshop 中的很多設定都能在 CSS 中找到對應屬性，以下是一些例子：

1. 佈局 (Layout):

  • Photoshop: 畫布大小 (Canvas Size) 對應於 CSS 中 width 和 height 屬性，用於設定元素的尺寸。
  • Photoshop: 對齊 (Align) 與 CSS 中的 text-align (文字對齊), justify-content (Flexbox 和 Grid 佈局中的對齊), align-items (Flexbox 和 Grid 佈局中的對齊) 等屬性相關。
  • Photoshop: 圖層順序 (Layer Order) 類似於 CSS 中的 z-index 屬性，控制元素的堆疊順序。

2. 排版 (Typography):

  • Photoshop: 字型 (Font Family) 對應於 CSS 中的 font-family 屬性。
  • Photoshop: 字號 (Font Size) 對應於 CSS 中的 font-size 屬性。
  • Photoshop: 字重 (Font Weight) 對應於 CSS 中的 font-weight 屬性 (例如：bold, normal, lighter)。
  • Photoshop: 行高 (Leading/Line Height) 對應於 CSS 中的 line-height 屬性。
  • Photoshop: 字間距 (Tracking/Letter Spacing) 對應於 CSS 中的 letter-spacing 屬性。
  • Photoshop: 顏色 (Color) 對應於 CSS 中的 color 屬性。

3. 樣式 (Styling):

  • Photoshop: 不透明度 (Opacity) 對應於 CSS 中的 opacity 屬性。
  • Photoshop: 混合模式 (Blending Modes) 部分對應於 CSS 中的 mix-blend-mode 和 background-blend-mode 屬性 (並非所有 Photoshop 混合模式都有 CSS 對應)。
  • Photoshop: 陰影 (Drop Shadow, Inner Shadow) 對應於 CSS 中的 box-shadow 和 text-shadow 屬性。
  • Photoshop: 描邊 (Stroke) 部分對應於 CSS 中的 border、outline 和 text-stroke 屬性 (功能上略有差異)。
  • Photoshop: 漸變 (Gradient) 對應於 CSS 中的 linear-gradient、radial-gradient 和 conic-gradient 屬性。
  • Photoshop: 圓角 (Rounded Corners) 對應於 CSS 中的 border-radius 屬性。

4. 變換 (Transform):

  • Photoshop: 自由變換 (Free Transform) 中的縮放、旋轉、傾斜等操作對應於 CSS 中的 transform 屬性 (例如：scale, rotate, skew)。

示例：

假設在 Photoshop 中設計了一個按鈕，它具有以下樣式：

  • 尺寸：寬度 200px，高度 50px
  • 背景顏色：#007bff (藍色)
  • 文字：白色，字型 Arial，字號 16px
  • 圓角：5px

對應的 CSS 程式碼如下：

.button {
  width: 200px;
  height: 50px;
  background-color: #007bff;
  color: white;
  font-family: Arial, sans-serif; /* 新增 sans-serif 作為後備字型 */
  font-size: 16px;
  border-radius: 5px;
  display: flex; /*  為了讓文字居中 */
  justify-content: center; /* 文字水平居中 */
  align-items: center; /* 文字垂直居中 */
}

需要注意的是，Photoshop 和 CSS 並非完全一一對應，有些效果需要結合多個 CSS 屬性才能實現，或者需要使用一些技巧。 但是理解它們之間的對應關係，可以幫助前端開發者更有效地將設計稿轉換為網頁程式碼。

相關文章