上周末看到 EasyUI 的 tooltip 元件範例, 突然發現用 tooltip 來呈現留言很不錯, 但試了兩天還是放棄了, 原因是 tooltip 預設為隱藏, 等游標移到上面時才會現身, 而留言板是進入頁面就應該顯示最近幾筆留言, 若還要使用者移到人名或日期上才顯示內容, 還要多一步操作, 這樣就有點怪了.
在看過幾本 PHP 書籍的範例仍無頭緒後, 開始上網以留言板為 keyword 去搜尋, 啊哈, 經由 "那些 CSS 偽元素可以幫你做的 10 個效果" 找到下面兩個超棒網站 :
# Pure CSS speech bubbles
# How to Create CSS3 Speech Bubbles Without Images
OK, 現在就來測試一下. 我的留言板規劃是左邊隨機顯示一個圖檔與留言者, 其下顯示留言日期, 右方則顯示其留言內容, 因此我需要的是一個箭頭在左邊的交談氣泡, 也就是 "Pure CSS speech bubbles" 中 "Sample Examples" 倒數第二個圖. 觀其網頁原始碼, 可以發現其樣式設定在 default.css 這個檔 :
# http://nicolasgallagher.com/pure-css-speech-bubbles/demo/default.css
我需要的是 triangle border 與其 left 部分, 也就是將 "BUBBLE WITH A BORDER AND TRIANGLE" 這區塊中的 top 與 right 部分去除即可.
.triangle-border {
position:relative;
padding:15px;
margin:1em 0 3em;
border:1px solid #95B8E7;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.triangle-border:before {
content:'';
position:absolute;
bottom:-20px;
left:40px;
border-width:20px 20px 0;
border-style:solid;
border-color:#5a8f00 transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
.triangle-border:after {
content:"";
position:absolute;
bottom:-13px;
left:47px;
border-width:13px 13px 0;
border-style:solid;
border-color:#fff transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
.triangle-border.left {margin-left:30px;}
/* creates the larger triangle */
.triangle-border.left:before {
top:10px;
bottom:auto;
left:-20px;
border-width:10px 20px 10px 0;
border-color:transparent #95B8E7;
}
/* creates the smaller triangle */
.triangle-border.left:after {
top:11px;
bottom:auto;
left:-19px;
border-width:9px 19px 9px 0;
border-color:transparent #fff;
}
這裡我修改了原作者關於邊框顏色與粗細的設定, 因為我的邊框只要 1px 即可, 原作是設為 5px, 太粗了. 需要修改的數據如上藍色部分, 目的是擠出一個邊框 1px 的三角形, 其計算原理如下 :
這裡我們的交談氣泡指標是以交談框的左上角為原點, 外三角往左 20px, 往下 10px 開始描繪, 故 triangle-border.left:before 裡, top 設為 10, left 設為 -20 (負為往左), 其邊框寬度要設為 10 (上), 20 (右), 10(下), 左邊要壓扁, 故為 0. 而內三角的底與外三角的底 (右方) 重疊, 高少 1px, 因此 triangle-border.left:after 的 top 設為 11, left 設為 -19, 其邊框寬度設為 9 (上), 19 (右), 9(下), 同樣左邊要壓扁, 故為 0. 重點是內三角邊框顏色設為白色, 剛好把外三角的顏色蓋掉, 只剩上下兩個 1px 的線.
網頁部分如下, 只要設定 P, SPAN, 或 DIV 元素的樣式類別為 "triangle-border left" 即可 :
<div>
<img src="male.png" style="border-width:0px;">
<span class="triangle-border left">
Hello Emma!
How is everything going?
</span>
</div>
<div>
<img src="female.png" style="border-width:0px;">
<span class="triangle-border left">
Hi, Sam!
Ya, just fine. And You?
</span>
</div>
測試範例 1 : http://mybidrobot.allalla.com/css3test/speech-bubble-1.htm [看原始碼]
下面是用 Chrome 瀏覽的結果, 看來很不錯 (版本 39.0.2171.95 m) :
下面是用 IE 瀏覽結果, 不佳 (版本 11.0.9600) :
下面是用 Firefox, 同樣不佳 (版本 35.0) :
最後是 Opera, 雖然渲染效果與 Chrome 稍有不同, 但也 OK (版本 26.0.1656.60) :
從這一點可看出, Chrome 與 Opera 還是瀏覽器界數一數二的優等生, 對於 CSS3 與 HTML5 的支援度是最棒的. Firefox 與 IE 則要加油了.
下午又找到一個更棒的 CSS 箭頭產生器, 直接選取所需要的屬性, 就會自動產生 CSS 檔 :
# CSS Arrow Please: CSS 箭頭產生器
# http://cssarrowplease.com/
我選了左方箭頭, 寬度 1px 的, 然後稍加調整屬性如下 :
.arrow_box {
padding: 15px;
height: auto;
border-radius: 10px;
position: relative;
background: #ffffff;
border: 1px solid #95B8E7;
}
.arrow_box:after, .arrow_box:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-right-color: #ffffff;
border-width: 13px;
margin-top: -10px;
}
.arrow_box:before {
border-right-color: #95B8E7;
border-width: 14px;
margin-top: -11px;
}
原理其實跟上面範例 1 是一樣的, 只是所用的樣式屬性稍有不同而已. 我改動了一些屬性值來達成與範例 1 同樣的結果. 只要把上面範例 1 的 class 改為 arrow_box 即可 :
<div>
<img src="male.png" style="border-width:0px;">
<span class="arrow_box">
Hello Emma!
How is everything going?
</span>
</div>
<div>
<img src="female.png" style="border-width:0px;">
<span class="arrow_box">
Hi, Sam!
Ya, just fine. And You?
</span>
</div>
如下範例 2 所示 :
測試範例 2 : http://mybidrobot.allalla.com/css3test/speech-bubble-2.htm [看原始碼]
這個做法比範例 1 要好, 在 Chrome, Firefox, 與 Opera 均正常, 僅 IE 無法覆蓋與三角形重疊的邊框. IE 到底是哪根筋不對啊? 是因為老大當太久了嗎?
上面兩個範例都有一個問題, 就是留言內容不可太長, 否則留言內容框會斷成兩節 :
這是因為我們使用 span 元素之故, 若使用 div 元素就不會這樣, 但如此一來留言框就會佔據整列了. 所以現在考慮改用向上箭頭 :
.arrow_box {
margin-top:30px;
padding: 15px;
height: auto;
border-radius: 10px;
position: relative;
background: #ffffff;
border: 1px solid #95B8E7;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 60px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-bottom-color: #ffffff;
border-width: 15px;
margin-left: -12px;
}
.arrow_box:before {
border-bottom-color: #95B8E7;
border-width: 16px;
margin-left: -13px;
}
網頁部分做了些修改, 加上姓名與時間 :
<div>
<img src="male.png" style="border-width:0px;"> Sam 於 2015-01-13 23:11:06
<div class="arrow_box">
Hello Emma!
How is everything going?
</div>
</div>
<div>
<img src="female.png" style="border-width:0px;"> Emma 於 2015-01-13 23:12:50
<div class="arrow_box">
Hi, Sam!
Ya, just fine. And You?
</span>
</div>
如下列範例 3 所示 :
測試範例 3 : http://mybidrobot.allalla.com/css3test/speech-bubble-3.htm [看原始碼]
沒有留言 :
張貼留言