ಠ_ಠ
@anonymous
偷偷說
Mon, Feb 18, 2019 3:59 PM
23
1
【噗浪CSS】

三天前有問過一個問題
個人喜好的噗浪底是黑色，因為想保有噗友自己選擇的顏色，又希望可以看見黑色的暱稱，所以求問將黑色改顯示為白色的方法

雖然不是完美的辦法，但得到解方了！當時看到有人按喜歡，因此來分享一下
ಠ_ಠ
Mon, Feb 18, 2019 4:00 PM
因為在噗浪上沒問到，又Google很久，最後找到了
噗浪版型研究社 Plurk Layout CSS Research Society
真的超級感謝！
ಠ_ಠ
Mon, Feb 18, 2019 4:01 PM
因為實在找不到結果，最後私訊詢問了，回應與方法如下

「如果暱稱顏色噗友已選定的話，由於這部分功能是噗浪用程式另外設定的，所以無法用CSS改特定顏色，要突顯在黑底上的黑色或暗色暱稱的話，建議將暱稱區塊加上底色來處理。

語法：
.td_qual a {background: f0f0f0 !important;}

f0f0f0 色碼可改成自己喜歡的顏色」
ಠ_ಠ
Mon, Feb 18, 2019 4:01 PM
之後就成功啦！
ಠ_ಠ
Mon, Feb 18, 2019 4:02 PM
再次感謝噗浪版型研究設的幫忙～
sun132
Mon, Feb 18, 2019 4:23 PM
這邊是用text-shadow蓋很多層陰影+霧化白邊來解決，不過看起來還是會有點糊XD（字體看起來發著白霧光
ಠ_ಠ
Mon, Feb 18, 2019 4:28 PM
sun132: 感覺好像很酷炫耶！XD 可以請問是怎麼寫的嗎？
sun132
Mon, Feb 18, 2019 4:38 PM
https://images.plurk.com/6ikogmOPvMzOngqbz52tqJ.jpg
寫太多行超出了畫面 XD
其實覺得效果沒很好……
melon724
Mon, Feb 18, 2019 6:41 PM
其中一個按喜歡的路人在這邊感謝噗主
ಠ_ಠ
Tue, Feb 19, 2019 1:08 PM
sun132: 我覺得很酷耶！個人很喜歡！謝謝分享XDD
ಠ_ಠ
Tue, Feb 19, 2019 1:09 PM
melon724: 不用客氣，感謝給予解決方法的人們wwww
ಠ_ಠ
Tue, Feb 19, 2019 1:10 PM
附上使用後的效果

/暱稱背景色/
.td_qual a {background: FFFFFF !important;
/為了方便閱讀稍微調寬字距/
letter-spacing: 1.03px;}
https://images.plurk.com/1sFbwff1sBrGmWREn3j7zV.png
ಠ_ಠ
Tue, Feb 19, 2019 1:57 PM
sun回應的方式，太長了意思意思寫一下XD 有改一些數值

.name {
/強調暱稱文字/ front-weight:250;
text-shadow:
/陰影文字描邊/ 0.2px 0.2px 0px 303030,
/霧化文字邊緣/ 3px 3px 5px FFFFFF,}
https://images.plurk.com/TwMWJlTsyyGtbZwKQ7sM8.png
ಠ_ಠ
Tue, Feb 19, 2019 1:59 PM
剛剛試了很多種數值，目前還沒找到最喜歡的，但個人還滿喜歡sun提供的這種方法～
希望大家都能找到自己最喜歡的設計，嘿嘿
sun132
Tue, Feb 19, 2019 3:52 PM
我是sun，後來也改了數值，現在變成黑字沒問題但深藍色的字不清楚XDDD
CSS回家貼
ಠ_ಠ
Tue, Feb 19, 2019 3:54 PM
sun132: 這邊是淺色字不清楚XDD 像黃、粉紅和淺綠
還有注音會有點模糊哈哈
sun132
Tue, Feb 19, 2019 4:44 PM
我是換成這樣
font-weight:250;
filter:contrast(150%) brightness(108%); ←幫文字加強對比，以及一點點亮度
text-shadow:（黑邊取消，直接霧化）
0.5px 0.5px 1px 9e8e50,
-0.5px -0.5px 1px 9e8e50,
0.5px -0.5px 1px 9e8e50,
-0.5px 0.5px 1px 9e8e50;
===========
故意選了一個不是黑-灰-白色系的顏色
試了頗多種顏色，想藉由顏色之間的對比讓文字比較明顯些
sun132
Tue, Feb 19, 2019 4:45 PM
https://images.plurk.com/2aZRTSpSKpjzvCMaYyx2nt.jpg 顯示起來變降子
ಠ_ಠ
Tue, Feb 19, 2019 5:18 PM
我我我！突然找到直接框起來的方法了！
ಠ_ಠ
Tue, Feb 19, 2019 5:20 PM
.name{text-shadow: -1px 0 White, 0 1px White, 1px 0 White, 0 -1px White}
長這樣！
https://images.plurk.com/6mveg4UwKMiTHEWgLX43PN.png
ಠ_ಠ
Tue, Feb 19, 2019 5:20 PM
還在看要怎麼讓他整個包起來XDD
sun132
Tue, Feb 19, 2019 5:26 PM
我以前也想直接把字框起來，但那個語法好像不太常見，怕沒辦法讓所有瀏覽器都正常顯示所以作罷了……
噗浪版型研究社大概也是考量這點，所以會傾向建議比較不花俏的確實方法 不過我愛花俏所以(ry
ಠ_ಠ
Tue, Feb 19, 2019 5:34 PM
sun132: 原來不太常見！！沒關係，剛好可以不同河道用不同的語法做區隔XDD
再次感謝嗚嗚！越寫越覺得好好玩，超開心的XDDDD
ಠ_ಠ
Tue, Feb 19, 2019 6:36 PM
目前看起來包得最完整的是
.name{ text-shadow: 0 0 0.2em FFFFFF, 0 0 0.2em FFFFFF, 0 0 0.2em FFFFFF, 0 0 0.2em FFFFFF }
其中0 0 0.2em FFFFFF可以重複好幾次，次數愈多越強烈
視覺上是這樣
https://images.plurk.com/34dDV40OJTmbgPeMmwjWQr.png
sun132
Tue, Feb 19, 2019 7:00 PM
單位居然用em！ 沒想過欸
實際展示 EM 與 REM 的差異 | 六角學院
ಠ_ಠ
Tue, Feb 19, 2019 7:08 PM
sun132: 糟糕超沒概念的www 要花點時間消化
因為你的text-shadow讓我想到可能有其他寫法，Google後看到這篇就試試了XD
CSS: 文字陰影
sun132
Tue, Feb 19, 2019 7:19 PM
text-shadow的數值意義是這樣的
水平位移值(可負數)、垂直位移值(可負數)、模糊值(可省掉不寫)、陰影的顏色
.
前面你的寫法較像是，位移都不要，只靠模糊值去撐出白色的底，所以蓋愈多樓愈白、愈明顯（一開始我也這樣蓋）
不過伴隨瀏覽器字型，筆劃細的地方會顯得不夠，所以我還是有保留位移，只是設成低於1px（目前是0.2px，還會再調
sun132
Wed, Feb 20, 2019 7:14 AM
>>位移都不要，只靠模糊值去撐出顏色底
突然想通了？
先來一行 0px 0px 0.1em ＃303030, 極細黑邊
再蓋個六行的 0px 0px 0.2em ＃8c8c00, 黃光霧化邊（最後一行記得用;結尾）
https://images.plurk.com/2mvrMWjkX2nwWuVsTSIIvE.jpg 變成降子
ಠ_ಠ
Wed, Feb 20, 2019 11:04 AM
sun132: 看懂了！感謝解說！！（前面都用湊的XDD）
如果不用黑邊的話好像也可以？嗎？
sun132
Wed, Feb 20, 2019 1:44 PM
可以啊，看各人調整後看起來的感覺比較重要XD
berry196
Wed, Mar 6, 2019 7:43 AM
偷偷說一下，疊太多層陰影會影響效能喔www
sun132
Wed, Mar 6, 2019 8:04 AM
對，所以我會想用非白色/非黑色，來增強對比
可以不必蓋太多層陰影
ಠ_ಠ
Wed, Mar 6, 2019 3:07 PM
這噗居然被頂起來了XDDD
berry196: 想請問影響效能是什麼概念呢？
sun132: 原來如此～
berry196
Wed, Mar 6, 2019 3:17 PM
ಠ_ಠ: 電腦爛一點的話捲動河道會變很卡
ಠ_ಠ
Thu, Mar 7, 2019 4:37 PM
berry196: （趕緊把因為看起來很酷炫而打的一堆刪減成五個）
感謝樓上兩位的提醒XDDD
kitty796
Mon, Nov 18, 2019 6:17 PM
好像挖舊噗了 不過還是貼個
單把黑色名字改白色：
http://a.name/...:not([style]){ color:#FFFFFF !important; }
另外還可以設定指上去的顏色：
http://a.name/...:not([style]):hover { color:#DDDDDD !important; }
kitty796
Mon, Nov 18, 2019 6:24 PM
只改黑色名字： (Plurk Paste)
載入新的回覆