11/06/2018

如何讓星級評價效果以百分比呈現﹍CSS 技巧詳解

如何讓星級評價效果以百分比呈現﹍CSS 技巧詳解

A+
star-rating-percentage-css.jpg-如何讓星級評價效果以百分比呈現﹍CSS 技巧詳解最近接到需求要在網頁呈現「五顆星評等」的效果,就像搜尋結果常會看到的星級評等:

star-rating-percentage-css-1.png-如何讓星級評價效果以百分比呈現﹍CSS 技巧詳解

或 Google 商家的評分星等:

star-rating-percentage-css-2.png-如何讓星級評價效果以百分比呈現﹍CSS 技巧詳解

從上面的示意圖可發現,以 5 分為滿分的情況下,4.5 分(也就是 90%)所呈現的星等並非 4 星(無條件捨去法),也不是 5 星(四捨五入法),而是忠實地呈現 4.5 星。

這要如何做到呢,是否除了一顆星以外,還要額外準備半顆星的圖案呢?經研究的結果,只要使用簡單的 CSS 就能達成,而且任何小數點、百分比,都能依照比例呈現。

(圖片出處: pixabay.com)


一、CSS 製作原理


在網路上找了幾個範例效果作為參考:

1. 使用偽類


這個範例算是最簡潔的一個,只是利用偽類會導致在修改字元時,比較不方便一些。比較過其他版本後,發現可以用這組程式改成擴充性比較佳的最終版本。


2. 使用 display:flex


這組程式碼的版面對齊效果很好,研究了 CSS 發現原來是使用了 display: flex 的方式。

但因為是比較新的 CSS 語法,導致會有跨瀏覽器(及版本)的問題,同時在不同行動裝置的呈現效果也不容易預期,因此最終還是捨棄了這個方案。


3. 使用背景圖


這組程式碼有兩個效果,一個使用透明背景圖(包含前景、背景兩顆星的圖案),導致擴充性比較差,因為想套用、又想變換圖案的話,自己也得製作類似的圖。

另一個使用 UNICODE 字元,修改比較方便。不過這兩個效果的缺點都一樣,為每個星星圖案設定了固定寬度,將來要變更圖案大小的話,設定上會比較麻煩。


4. 製作原理

從以上範例可歸納出,製作星級評價效果的原理為:

  • 分別產生前景、背景兩組不同顏色的 5 顆星
  • 這兩組圖案位置必須互相重疊,前景會蓋過背景
  • 為前景的 5 顆星設定評比的寬度百分比,例如 80%,那麼前景就只會顯示 4 顆星
  • 超出前景寬度的部分設定隱藏,那麼超出的部分就只會顯示背景的圖案

以下依據此原理,製作出簡單又方便任意調整星星大小的範例程式碼。


二、範例程式碼



★★★★★
★★★★★


以上範例效果的 HTML / CSS 請見以下程式碼:

<style>
.ratings {
position: relative;
vertical-align: middle;
display: inline-block;
color: #ddd; /*背景星星顏色*/
overflow: hidden;
font-size: 20px; /*調整字體大小可放大縮小星星*/
text-shadow: 0px 1px 0 #999;
}
.full_star {
width: 90%; /*調整寬度可變更星等*/
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #D56A16; /*前景星星顏色*/
}
</style>
<div class="ratings">
<div class="empty_star">★★★★★</div>
<div class="full_star">★★★★★</div>
</div>

  • 最重要的是修改 width 百分比,這會改變顯示的星等,例如 80% 會顯示 4 顆星
  • 星星圖案使用了 Unicode 圖案 "★",可置換為其他字元,也可使用 img 圖案
  • CSS 修改請見註解文字說明
  • 可分別修改星星大小、顏色



三、範例效果


以下提供各種修改的效果:

1. 放大縮小 5 顆星

★★★★★
★★★★★
★★★★★
★★★★★
★★★★★
★★★★★

以上為修改 font-size 數值的各種效果


2. 改用 10 顆星也行

★★★★★★★★★★
★★★★★★★★★★


以上為調整 HTML 顯示字元數量的效果,寬度設定為 75%,所以顯示 7.5 顆星


3. 也可用別的 Unicode 圖案、Font Awesome 圖示

❤❤❤❤❤
❤❤❤❤❤


可參考「Unicode 表情圖案(emoji ) + 特殊符號字元一覽表」,挑選想要置換星星圖案的字元。




可參考「Font Awesome 圖示速查表」,挑選想要置換星星圖案的字元。但記得要先引用 Font Awesome 外連。


更多 CSS 相關技巧:
如這篇文章對你有幫助,歡迎「分享」或給我個讚:

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP