CSS 彙整 - VECTOR COOL 威得數位行銷

全景圖片容器，卷軸自動滾動至圖片中央，自製 jQuery 插件

在互動式網頁設計中，有時我們會遇到需要將全景圖片展示在容器中，並希望頁面加載時自動將滾動條調整至圖片的正中央位置。這篇文章將通過一個簡單的例子，展示如何自製一個 jQuery 插件來達成這個目的。

HTML 結構

使用了一張 Unsplash 全景的風景照片作為範例

CSS 樣式

要確保圖片可以超出其容器的寬度並觸發滾動效果，我們需要適當的 CSS 樣式。

自製 jQuery 插件

封裝成一個 jQuery 插件，使其易於在不同項目中重複使用。

使用範例

使用這個插件很簡單，您只需要選擇您的容器並調用 centerPanoramaScroll() 方法。

這個插件幫助您實現了在頁面加載時自動將橫向滾動條滾動至全景圖片中央的功能，無需進行繁瑣的計算或手動調整。

我們在 CodePen 上面看效果吧

See the Pen
Panoramic image container that automatically scrolls to the center of the image, a custom jQuery plugin. by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

透過這篇技術分享，您學到了如何利用 jQuery 插件將全景圖片容器的滾動條自動定位至圖片中央。這不僅提升了用戶體驗，也為您的網站增添了一點小巧思。這種方法適用於各種需要強調視覺中心的場景，無論是圖片展示、產品介紹，還是其他創意應用。

[……]

純CSS方型圖片，RWD自適應父容器寬度

在現代網頁設計中，我們經常需要在不同裝置和螢幕大小下展示圖片。有時，我們希望圖片能夠以方型的形式呈現，並自動適應其父容器的寬度。在這篇文章中，我們將使用純 CSS 技術來實現這樣的效果。

HTML 結構

首先，讓我們來看一下 HTML 結構。我們將使用以下代碼：

在這個結構中，我們使用了一個包含 image-square 類別的容器，並在其中插入一個 <img> 元素。src 屬性設置為 Unsplash 提供的隨機圖片 URL，這樣我們可以獲得一個無版權的圖片來完整演示這個範例。

CSS 樣式

現在，我們來看一下 CSS 樣式，以實現方型圖片並使其自適應父容器的寬度。

在這個 CSS 樣式中，我們對 .image-square 類別設置了以下屬性：

對於 .image-square img 選擇器，我們設置了以下屬性：

完整示例

您可以在 CodePen 上查看完整的示例，並進行測試和修改。

See the Pen
Untitled by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

結論

透過使用純 CSS 技術，我們可以輕鬆地創建方型圖片容器並實現自適應父容器寬度的效果。這個技巧可以應用於各種網頁設計場景中，為使用者提供更好的視覺體驗。透過設置容器的寬度為父容器的百分比，並使用 padding-bottom 屬性創建一個方形容器，我們可以確保圖片在不同裝置和螢幕大小下都能自動調整大小，並保持比例。這種技術的優點是簡單且無需任何 JavaScript 庫或框架的依賴。希望這篇文章能幫助您理解如何使用純 CSS 創建自適應的方型圖片容器。

[……]

Swiper with lightbox 輪播插件結合燈箱

Swiper 是一個功能豐富且流行的 JavaScript 輪播插件，廣泛應用於網站和行動應用程式的圖片輪播、幻燈片和滑塊展示。它提供了豐富的配置選項和自定義功能，非常容易擴充，不僅如此還有完整的Example，可讓開發者快速開始輕鬆創建出優雅且互動性強的輪播效果。

為何要加入燈箱功能

在很多使用場景下，只有輪播功能可能無法完全滿足需求，特別是當用戶想要更專注地放大圖片並細看細節時，我發現 Swiper 沒有預設這樣的功能，所以在這樣的情況下，將 Lightbox（燈箱）功能加入 Swiper 是一個明智的選擇。Lightbox 是一種常見的互動式圖片展示方式，它可以讓用戶單擊圖片時在一個彈出視窗中放大圖片，以提供更好的使用者體驗。這種結合可以為用戶提供更大的圖片展示空間，更方便地觀看圖片細節，並增加了互動性和使用便利性。

如何合併燈箱功能

這部分我已經實作在CodePen上，有興趣的可以參考下列程式碼，並可以直接在codePen上看執行結果，這樣最快

See the Pen
Untitled by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

[……]

CSS 選取同層偶數元素，當 nth-child(even) 不起作用

在編輯網頁的時候很常會遇到這種情況，讓單數列與偶數列交錯，這次修改HTML不是我自己產生的，是由WordPress產生的，因此要透過CSS選擇器選取偶數列，將偶數的欄反轉，HTML結構大致如下，內容我省略

HTML:

CSS:

上述CSS不起作用，有點納悶查了一下，改用下列方法，就成功了

有遇到這問題的朋友可以試試看喔

[……]

CSS RWD square 正方形

純 CSS 製作自適應 RWD 正方形，可隨容器寬度大小改變，自動調整容器高度，維持正方形比例，而正方形容器中一樣可以有內容，不受影響

HTML:

CSS:

example:

See the Pen
CSS RWD square 正方形 by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

Refrance:
https://spin.atomicobject.com/2015/07/14/css-responsive-square

[……]

CSS 載入外部字型 / 字體

漂亮的字體可以讓增添網頁個性及可讀性，但要注意載入外部字型 / 字體則會增加網站下載的時間，這兩者的平衡則交由網頁設計師的判斷，本篇介紹如何將外部字型載入 CSS 中

CSS 載入字型 / 字體

font-family: 定義字體的名稱 'Helvetica' ，這名稱是可以自定義的
src: 依序載入字體，而 local( "Helvetica" )，會先找使用者電腦中是否有安裝此字體，如果有則直接使用使用者的系統字體，如果使用者系統沒此字體再依序下載字體
url: 相對路徑或絕對路徑

CSS 使用已載入字型 / 字體

字體格式 ( format ) 對照表

字型格式附檔名format() 指定方式WOFF（Web Open Font Format）.woff"woff"TrueType.ttf"truetype"OpenType.ttf 或 .otf"opentype"Embedded OpenType.eot"embedded-opentype"SVG Font.svg 或 .svgz"svg"

Refrance:
https://blog.gtwang.org/web-development/css-font-face/
https://www.iware.com.tw/qa-508.html

[……]