Hello~歡迎來到「30天前端設計之旅」的DAY 23！今天我們將學習如何運用照片濾鏡、偽元素、以及創意文字排版技巧，來提升網站的視覺效果。這些技巧將讓你能夠設計出更具個性化的圖片與文字組合，創造出具有藝術感的頁面。

D-23的學習目標：

1. 為照片添加濾鏡效果。
   • 照片濾鏡效果：讓照片更具氛圍感
   • 透過 CSS 的 filter 屬性，我們可以為照片添加各種濾鏡效果，讓圖片呈現不同的視覺風格，如黑白、模糊、對比調整等。
   • 對應學習日：第十ㄧ天（色彩屬性）、第十四天（顯示屬性）。
   • 說明：filter 屬性提供了多種照片濾鏡效果，從黑白到模糊效果皆可輕鬆實現。

img {
    filter: grayscale(100%); /* 黑白濾鏡 */
    /* 其他濾鏡效果範例 */
    /* filter: blur(5px); */
    /* filter: contrast(150%); */
    /* filter: sepia(50%); */
}

2. 使用偽元素製作雙色線標題。
   • 雙色線標題：使用偽元素裝飾標題
   • 利用 CSS 的偽元素 ::before 和 ::after，我們可以在標題旁添加裝飾性雙色線，讓標題更加突出且具有設計感。
   • 對應學習日：第十二天（框線屬性與背景屬性）。
   • 說明：使用 ::before 和 ::after 偽元素在標題兩側加上裝飾性線條，提升視覺效果。

<h1 class="double-line-title">雙色線標題</h1>

.double-line-title {
    position: relative;
    font-size: 2em;
}

.double-line-title::before,
.double-line-title::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 3px;
    background-color: #b8a29c;
    top: 50%;
    transform: translateY(-50%);
}

.double-line-title::before {
    left: -60px;
    background-color: #8c8a83; /* 第一條線的顏色 */
}

.double-line-title::after {
    right: -60px;
    background-color: #b8a29c; /* 第二條線的顏色 */
}

3. 設計以手寫英文字母背景的標題。
   • 為了讓標題更具個性，我們可以使用手寫風格的英文字母作為背景，通過疊加讓文字和背景融合在一起。
   • 對應學習日：第十一天（背景屬性）、第十四天（顯示屬性與文字屬性）。
   • 說明：透過偽元素 ::before 添加手寫字母背景，讓標題更加具有藝術風格。

<h2 class="handwriting-bg-title">藝術背景標題</h2>

.handwriting-bg-title {
    font-family: 'Courier New', Courier, monospace;
    position: relative;
    font-size: 2em;
    color: #8c8a83;
}

.handwriting-bg-title::before {
    content: 'Artistic';
    font-family: 'Brush Script MT', cursive;
    font-size: 5em;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    color: #c7b8a5;
    opacity: 0.2; /* 半透明效果 */
    transform: rotate(-10deg); /* 旋轉字體 */
}

4. 利用半透明英文字母作為背景。
   • 透過將半透明英文字母放置於背景中，我們可以增加文字的層次感，讓頁面更加有深度。
   • 對應學習日：第十三天（顯示屬性與透明效果）。
   • 說明：rgba 讓我們可以為文字設置半透明效果，從而創造出更具層次感的背景。

<h3 class="transparent-bg-title">半透明背景標題</h3>

.transparent-bg-title {
    position: relative;
    font-size: 2em;
    font-weight: bold;
    color: #333;
}

.transparent-bg-title::before {
    content: 'Transparent';
    position: absolute;
    font-size: 6em;
    top: -30px;
    left: 10px;
    color: rgba(0, 0, 0, 0.1); /* 半透明文字 */
}

5. 學習文字移位技巧，創造視覺層次感。
   • 透過改變文字的定位與移位技巧，我們可以讓文字產生動態感，營造視覺上的獨特風格。
   • 對應學習日：第十天（字型與文字屬性）。
   • 說明：利用 letter-spacing 和 position 屬性讓文字有輕微的移動，營造出動態效果。

<p class="shifted-text">文字移位效果</p>

.shifted-text {
    position: relative;
    font-size: 2em;
    color: #8c8a83;
    letter-spacing: 2px;
}

.shifted-text::before {
    content: '移位效果';
    position: absolute;
    top: 0;
    left: -5px;
    color: #c7b8a5;
    z-index: -1;
}