CSS 筆記 - 金魚系列 15 - 訊息對話紀錄視窗

學習重點

• 加號選取器的用途
• 金魚都能懂的 CSS 選取器，購書連結
• 區塊尺寸計算
• Absolute 絕對定位教學
• Relative 相對定位教學

HTML 架構

這次的 HTML 的架構很重要，有兩個區塊，有圖示+名字，對話框，並有本地用戶與遠端用戶，雖然對話框會產生很多，但結構都是一樣，所以先把一組做出來後，後續 JS 帶入文字訊息即可。

<div class="dialogue">
  <div class="user remote">
    <div class="avatar">
      <div class="pic">
        <img src="https://picsum.photos/100/100?random=12" />
      </div>
      <div class="name">You</div>
    </div>
    <div class="text">這是妳的對話文字</div>
  </div>
  <div class="user local">
    <div class="avatar">
      <div class="pic">
        <img src="https://picsum.photos/100/100?random=16" />
      </div>
      <div class="name">Me</div>
    </div>
    <div class="text">這是我的對話文字</div>
  </div>
</div>

CSS 樣式

這次 CSS 比較複雜，分別記錄。

dialogue 主架構樣式

就一般的外觀設定，不贅述。

.dialogue {
  width: 500px;
  padding: 20px;
  box-shadow: 0 0 10px #000;
  background-color: #f4f5f7;
  border-radius: 20px;
}

user 結構樣式

• 使 .user 的元素橫排並靠左對齊，往下推擠 20px。
• 大頭照樣式設定，因 flex 會自動收縮，所以使域 flex-shrink:0，取消其自動縮放的特性。
• 使圖片為圓形，並佔滿空間。
• 文字區域設定。

.user {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  .avatar {
    width: 60px;
    text-align: center;
    flex-shrink: 0;
  }
  .pic {
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      vertical-align: middle;
    }
  }
  .name {
    color: #333;
  }
  .text {
    background-color: #aaa;
    padding: 16px;
    border-radius: 10px;
    position: relative;
  }
}

remote 與 local 架構樣式

這兩者基本上架構相同，只是方向不同。

remote 用戶端樣式

• 因 .user 已經設定靠左對齊，所以這邊不再重複設定。
• 文字區域重要的地方是偽元素的設定，是三角形本體的顏色與位置。

.remote {
  .text {
    margin-left: 20px;
    margin-right: 80px;
    color: #eee;
    background-color: #4179f1;
    &::before {
      border-right: 10px solid #4179f1;
      left: -10px;
    }
  }
}

local 本地端樣式

• 使本地用戶靠右對齊。
• 文字區域重要的地方式偽元素的設定，是三角形本體的顏色與位置。

.local {
  justify-content: flex-end;
  .text {
    margin-right: 20px;
    margin-left: 80px;
    order: -1;
    background-color: #fff;
    color: #333;
    &::before {
      border-left: 10px solid #fff;
      right: -10px;
    }
  }
}

共同使用樣式 - 三角形

三角形怎麼寫可以看CSS 筆記 - 三角形演進史。

.remote,
.local {
  & .text::before {
    content: "";
    position: absolute;
    top: 20px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }
  .text {
    font-weight: 300;
    box-shadow: 0 0 10px #888;
  }
}

這樣就完成囉!!

CodePen https://codepen.io/hnzxewqw/full/xxZedag

參考資料

• 金魚都能懂的這個網頁畫面怎麼切 : 訊息對話紀錄