WordPress Box Shadow – 高質感圖片陰影設計

max

6 年前

WordPress Box Shadow 讓照片的質感一下子就提高了許多。

在三月的時候跟大家分享過一個線上製作式樣（CSS）的網站，讓不懂得式樣設計語法的朋友，也可以輕鬆的在 WordPress 網頁設計出一些特別的式樣效果。今天延續這個設計的技巧，跟大家分享如何透過陰影的設計，讓照片的質感提升，建置出高質感的照片網站。如果您的網站使用大量的照片，而且照片多是簡約風格，那麼今天的式樣技巧可以參考，會讓照片呈現特別的質感。

WordPress Box Shadow

跟以往的教學文章相同，式樣編輯的語法都是在子佈景主題底下的 style.css 檔案來進行。照片部分的編輯與法則是在文章編輯時，切換到文字編輯模式來進行。
首先第一個方式，在還沒有任何照片的情況下，展示區塊陰影的效果。
文字編輯的圖片語法如下。

<div class="box top"></div>
<div class="box right"></div>
<div class="box bottom"></div>
<div class="box left"></div>
<div class="box all"></div>

式樣設計語法如下，共計 6 款，第一款無陰影效果，其他分別為上右下左與全部。

.box {
	height: 200px;
	width: 300px;
	margin: 20px;
	border: 1px solid #ccc;
}
.top {
	box-shadow: 0 -5px 5px -5px #333;
}
.right {
	box-shadow: 5px 0 5px -5px #333;
}
.bottom {
	box-shadow: 0 5px 5px -5px #333;
}
.left {
	box-shadow: -5px 0 5px -5px #333;
}
.all {
	box-shadow: 0 0 5px #333;
}

.box {

height: 200px;

width: 300px;

margin: 20px;

border: 1px solid #ccc;

}

.top {

box-shadow: 0 -5px 5px -5px #333;

}

.right {

box-shadow: 5px 0 5px -5px #333;

}

.bottom {

box-shadow: 0 5px 5px -5px #333;

}

.left {

box-shadow: -5px 0 5px -5px #333;

}

.all {

box-shadow: 0 0 5px #333;

}

區塊陰影效果展示如下。

第二個展示效果我們加上圖片後的陰影效果。
文字編輯的圖片語法如下，照片的位置 yourdomain.comwp-content/uploads/2018/07/your-photo.jpg 請修改並確實填上您的照片網址。

<img class="box" src="https://yourdomain.comwp-content/uploads/2018/07/your-photo.jpg" alt="" width="300" height="200" />

<img class="box top" src="https://yourdomain.comwp-content/uploads/2018/07/your-photo.jpg" alt="" width="300" height="200" />

<img class="box right" src="https://yourdomain.comwp-content/uploads/2018/07/your-photo.jpg" alt="" width="300" height="200" />

<img class="box bottom" src="https://yourdomain.comwp-content/uploads/2018/07/your-photo.jpg" alt="" width="300" height="200" />

<img class="box left" src="https://yourdomain.comwp-content/uploads/2018/07/your-photo.jpg" alt="" width="300" height="200" />

<img class="box all" src="https://yourdomain.comwp-content/uploads/2018/07/your-photo.jpg" alt="" width="300" height="200" />

式樣語法設計與上面第一款的設計相同，子佈景主題 style.css 填入以下式樣語法。

.box {
	height: 200px;
	width: 300px;
	margin: 20px;
	border: 1px solid #ccc;
}
.top {
	box-shadow: 0 -5px 5px -5px #333;
}
.right {
	box-shadow: 5px 0 5px -5px #333;
}
.bottom {
	box-shadow: 0 5px 5px -5px #333;
}
.left {
	box-shadow: -5px 0 5px -5px #333;
}
.all {
	box-shadow: 0 0 5px #333;
}

.box {

height: 200px;

width: 300px;

margin: 20px;

border: 1px solid #ccc;

}

.top {

box-shadow: 0 -5px 5px -5px #333;

}

.right {

box-shadow: 5px 0 5px -5px #333;

}

.bottom {

box-shadow: 0 5px 5px -5px #333;

}

.left {

box-shadow: -5px 0 5px -5px #333;

}

.all {

box-shadow: 0 0 5px #333;

}

加上照片後的式樣展示效果。

第三種式樣設計，我們為照片加上一些邊框，可以看到照片呈現的質感又不一樣了。
文章內容編輯區同樣的切換到文字，照片語法與第二款相同。照片的位置 yourdomain.comwp-content/uploads/2018/07/your-photo.jpg 請修改並確實填上您的照片網址。

<img class="box" src="https://yourdomain.comwp-content/uploads/2018/07/your-photo.jpg" alt="" width="300" height="200" />

<img class="box top" src="https://yourdomain.comwp-content/uploads/2018/07/your-photo.jpg" alt="" width="300" height="200" />

<img class="box right" src="https://yourdomain.comwp-content/uploads/2018/07/your-photo.jpg" alt="" width="300" height="200" />

<img class="box bottom" src="https://yourdomain.comwp-content/uploads/2018/07/your-photo.jpg" alt="" width="300" height="200" />

<img class="box left" src="https://yourdomain.comwp-content/uploads/2018/07/your-photo.jpg" alt="" width="300" height="200" />

<img class="box all" src="https://yourdomain.comwp-content/uploads/2018/07/your-photo.jpg" alt="" width="300" height="200" />

照片加上一點邊框的式樣語法如下，邊框式樣 padding 的值可以依據自己的喜好修改。

.box {
	height: 200px;
	width: 300px;
	margin: 20px;
	padding: 8px;
	border: 1px solid #ccc;
}
.top {
	box-shadow: 0 -5px 5px -5px #333;
}
.right {
	box-shadow: 5px 0 5px -5px #333;
}
.bottom {
	box-shadow: 0 5px 5px -5px #333;
}
.left {
	box-shadow: -5px 0 5px -5px #333;
}
.all {
	box-shadow: 0 0 5px #333;
}

.box {

height: 200px;

width: 300px;

margin: 20px;

padding: 8px;

border: 1px solid #ccc;

}

.top {

box-shadow: 0 -5px 5px -5px #333;

}

.right {

box-shadow: 5px 0 5px -5px #333;

}

.bottom {

box-shadow: 0 5px 5px -5px #333;

}

.left {

box-shadow: -5px 0 5px -5px #333;

}

.all {

box-shadow: 0 0 5px #333;

}

加上邊框後的照片陰影式樣效果展示。

結論

今天分享的 box shadow 式樣設計技巧，可以讓照片展示的質感一下子就提升許多。對於多數的網站內容有很大的幫助，所以您的網站內容如果經常使用到照片的話，可以試試今天分享的技巧，一定會讓您的網站內容變得非常有質感。

參考文件：CSS3 Box Shadow