ಠ_ಠ
<語法討論>
ಠ_ಠ
原需求
自介、卡馬那些區塊都縮左邊,留一個像是頁面的一串(類似把電腦工具列放在最左邊)
然後點(滑鼠放在那邊就好)那個標示就會跳出一個簡單視窗
dove1687
ಠ_ಠ:要分的區塊分別有那些?(例如名字和自介還有統計和友粉要不要分開
ಠ_ಠ
dove1687: 如果都分開就能做好幾個圖示了?!
dove1687
是的,就看你想怎麼顯示
ಠ_ಠ
我想想,考慮大家都方便使用的話:
名字跟自介是在一起的
粉絲跟加粉鍵同區
好友跟加友鍵同區
卡瑪那邊噗文目前想到跟血條那種方式,但好像過於複雜
但卡瑪跟統計是跟自介分區那樣
ಠ_ಠ
想到加入粉絲用成「接受任務」這樣的表現感覺會很酷
但怎麼表現想不到
dove1687
https://images.plurk.com/AKc9DlCoLLxcCRQlpr8ef.png
是像這樣分五區嗎?然後發噗區留在中間
ಠ_ಠ
像這樣(?
https://images.plurk.com/3XlUnDxF1V8UXkmVmRQN0j.jpg 不過視窗不用跳那麼出來
ಠ_ಠ
https://images.plurk.com/1Pf13pabFhxlvXWYDHKnoI.jpg 類似這樣?
dove1687
gif注意
目前的效果是這樣 https://images.plurk.com/5WP06vdDpJjRxQOcLxV9Ou.gif
但是要這樣向上如果游標沒有一起向上會造成像這樣卡著的問題 https://images.plurk.com/5rvbgfs6ILFJLfcywVWYjX.gif
代替方法是只向左不向上 https://images.plurk.com/4kXQ18lRz2xtkTuiGZtW5V.gif
ಠ_ಠ
我等回家打開來看看!感覺很酷
ಠ_ಠ
我的網路有點不夠力但第一個有看到!
感覺很接近!如果能改變區塊形狀背景就超讚的!!
dove1687
ಠ_ಠ: 可以喔
改顏色或是直接丟圖片都能
dove1687
https://images.plurk.com/1upr1WQ2uRlCMmcoef1F7S.png
大概像這樣
libra2432
>>想到加入粉絲用成「接受任務」這樣的表現感覺會很酷
可能設定成游標移動到按鈕上會變成白色手指(遊戲裡點道具欄的那種手),然後按鈕本身是gif像素圖(平常不動,移上會閃動)
ಠ_ಠ
dove1687: 感覺好有希望
之後抓到他的大小感覺就能做了!!
dove1687
對了
圖片/按鈕也能用成游標放上去會變別張圖片
如果有什麼需要可以再跟我說,晚些放上整個css
ಠ_ಠ
dove1687: 做成游標是甚麼意思?
dove1687
啊就是游標放上去圖片會換
放上去游標會換也可以的!
ಠ_ಠ
好酷!!!
dove1687
/*頭貼區*/ (Plurk Paste)
有什麼想加都可以再說
dove1687
忘記改回一些東西,麻煩f5一下
ಠ_ಠ
感謝您開出這樣的語法!
等回家有電腦來實驗!
想問看看那個自介區的圓角是有辦法刪除的嗎?
dove1687
ಠ_ಠ: border-radius:0;
加上這句就好!
ಠ_ಠ
您好,目前這裡是用後有些疑問:
1.不知該如何個別定義每個區塊的背景?
2.情況:
https://images.plurk.com/RbcG5AQv7SSTO57XQT3Ty.png
如同您設計的語法,各圖示會向右移一段位置,但這樣很容易導致您說卡住(如果滑鼠沒有跟著往右),而各區塊跳出左邊會留著跳出的位置,這邊想詢問:
在同樣保留我這邊定義的,觸碰後往右25px的情況下,我應該如何讓整個畫面變成這樣:
https://images.plurk.com/5bNMT8mezj56V3WLwmtBrB.png
也就是讓每個區塊多長25px,且讓裡面的文字內容物皆往右25px
3.希望這個不會跳出來直接消失
https://images.plurk.com/103K5CujtKeWB3UrnPKQZ2.png
ಠ_ಠ
ಠ_ಠ
另外其實還有徽章區好像會卡住
dove1687
1.加上這句
backgrond:url(網址) no-repeat center / cover;

2. https://images.plurk.com/dYh7sH6O3U2tiPFc1yZ3N.png
把這裏改成0px

3.加上這句
._lch_ ~ .pop-view.karma_tooltip{display:none !important;}
ಠ_ಠ
dove1687: 2把那句改成0的話 字會被擋到
ಠ_ಠ
dove1687: 3.
._lch_ ~ .pop-view.karma_tooltip{display:none !important;}
使用後,原本卡瑪統計區塊會整個消失,這邊需要消失的是自動彈出來的那個條碼(?)
ಠ_ಠ
更正
3. 把那句加在} 以後就可以了~
dove1687
那麼再加一句padding-left:25px;
dove1687
不好意思剛剛才記起
如果想區塊蓋過河道的箭頭z-index要改成至少6000
ಠ_ಠ
dove1687: 前面正在調整先感謝
那個z-index可以理解成優先度嗎?
dove1687
z-index可以看成堆疊的高度(?
數字越大越上面
ಠ_ಠ
喔喔喔喔
我想到了
之後把區塊背景弄成透明
再加上自定義圖片做背景
這樣能夠做出彈出對話框的感覺!
ಠ_ಠ
ಠ_ಠ
backgrond:url(https://images.plurk.com/364ySodyeZBLTmm7tVAVkj.png ) no-repeat center / cover;

目前嘗試似乎無法用?
dove1687
啊啊啊應該是background才對打錯字了不好意思
ಠ_ಠ
background:url( https://images.plurk.com/364ySodyeZBLTmm7tVAVkj.png ) no-repeat center / cover;

這樣可以了,那之後是嘗試對應大小...
ಠ_ಠ
每區塊的高度好像不太一樣
dove1687
現在這樣圖片會放大到可以覆蓋整個背景(不會改變比例)
高度可以用height: px;設定,不然每一個裝置看都有機會不一樣
ಠ_ಠ
dove1687: 我正在長是我應該放哪邊...慧根不夠
dove1687
是改區塊高度的話就放在那五個區塊內!
ಠ_ಠ
height
改了會直接變透明的耶
ಠ_ಠ
margin-top: 0px;
margin-left: 0px;
height: 25px;
background:url(https://images.plurk.com/364ySodyeZBLTmm7tVAVkj.png ) no-repeat center / cover;
ಠ_ಠ
給您看一下我目前改的
dove1687
因為25太低了再加上你的margin-top又是負數就整個飛上去了
然後background那邊不用加image
ಠ_ಠ
ooooooooooooo
我終於看懂了救命
我直接先自己畫我要的背景再去把東西塞進去
ಠ_ಠ
按照這改法甚至能收在上面
ಠ_ಠ
不過要收在上面的話,有辦法調整河道噗都一起往下一點嗎
ಠ_ಠ
((觸碰就會變圖案的話,可以參考互動噗寶?
dove1687
對喔可以改成top是負的,游標移上去再變成正的
河道噗往下:
.timeline-cnt{
position:relative;
margin-top: px;
}
ಠ_ಠ
那有辦法觸碰後更變圖案+彈出嗎?
ಠ_ಠ
感覺愈來愈看到夢想了(?)
dove1687
互動噗寶那個以我的理解應該是沒辦法這樣用,這個可能就要等神人打臉我了
單純游標放上去改變圖案是可以的
ಠ_ಠ
dove1687: 因為我想了很久,覺得很難在好看同時可以使用
假設能夠讓所有區塊的文字跟按鈕暫時失效,只留按鈕區塊,之後碰觸到按鈕區塊就彈出完整視窗,這樣就會蠻理想的?
dove1687
https://images.plurk.com/6Wc3MZpZM17iwWQbduUXwN.gif
噗主覺得這樣可以嗎
dove1687
https://images.plurk.com/4VGEh20u9hGZQQFRrk9ScW.gif
也可以像這樣弄
ಠ_ಠ
dove1687: 1很接近!
dove1687
https://images.plurk.com/2R33dtNpA9iFQ5G0HTEo5u.gif
目前做出來的效果大概是這樣!
等我一下弄好再給語法你
dove1687
/*頭貼區*/ (Plurk Paste)
有問題可以再問我!
ಠ_ಠ
借我試個按鈕
https://images.plurk.com/7hOwcVc0dGqxHdMJCnkYnU.png
ಠ_ಠ
https://images.plurk.com/55Qdh8dQs0sefGbASSoRKU.png
這邊的圖案那邊的間隔,有辦法去掉嗎?
dove1687
https://images.plurk.com/4SuROP4kBWaEEwSSJcJIyR.png
是指這裏嗎
ಠ_ಠ
不適
是對圖案而言的區塊
會需要觸碰後更變區塊的功能,是為了之後直接改變背景
如果之後背景改變上方也會跟著留空白,這樣會不好看XD
dove1687
不知道你方不方便圈一下
ಠ_ಠ
上圖粉粉的左邊
dove1687
在小圖案那邊加top:0px;
應該是這樣(?
ಠ_ಠ
dove1687: 那邊比較看不懂
而且我大概加錯位置了
他直接消失
dove1687
這樣!
/小圖案/
.dash-segment-profile .segment-content:nth-child(1)::before{
content:
url(https://images.plurk.com/7hOwcVc0dGqxHdMJCnkYnU.png );
position:absolute;
left:5px;top:0;
}
ಠ_ಠ
dove1687: 感謝旅人
不過在調整時我突然有新想法
https://images.plurk.com/1R6ZenoHNPG9HuTAWolU07.png https://images.plurk.com/1ZfnvYWPLwzP1dZO89Qg6L.png
能夠把噗文調整成這樣的感覺嗎?
因為噗文的長寬似乎不固定,感覺比較麻煩
這部分我先提供參考圖,可以自由使用與裁切塗改
因為如果噗文能達到的話,無論要把河道變成張貼紙張的布告欄還是一堆角色的發言欄應該都行得通
若能做到甚至能調整私噗、偷偷說的個別圖案(?)
ಠ_ಠ
另一個重點是,設計噗的造型,這會是商機
dove1687
這個要研究一下
但比較重要的是噗主想怎麼處理留言區的部分呢?
dove1687
https://images.plurk.com/4OaoN1b6VgR57mJDZA2zPF.png
玩語法的時候還弄了這樣的小東西ww
dove1687
ಠ_ಠ
dove1687: 救命可愛
ಠ_ಠ
dove1687: 留言區對耶…… https://images.plurk.com/5katItn5yKSiiiw6uc52a7.png 單純白框呢
dove1687
https://images.plurk.com/6AosSygWt18P8YEHHgWYKM.png
圖片可以拉伸,但用在較長的噗文效果就很差了
雖然能夠控制噗文的最大高度,但會造成噗文不能完全顯示,反而變得更糟
所以這個可能就沒辦法了
ಠ_ಠ
dove1687: 謝謝旅人願意研究!能知道沒辦法也是很重要的!
而且重要的是前面竟然已經有小剪頭!!
dove1687
謝謝噗主還給幣我
之後有什麼需要或是有新的靈感都可以找我的!
dove1687
https://images.plurk.com/7ssyRZtnu4yRrdKQv0eIMr.png
又是偶然弄出來的神秘東西(?
因為噗主說想要像rpg風的河道,這樣的話名字後面感覺能放職業或是種族的圖示!也可以在不同噗友的名字後或是偷偷說後用不同的圖示
dove1687
.cboxAnchor:not(.response) .plurk_cnt .name::after{
content:url(圖片網址);
position:absolute;
top:4px;
}

.cboxAnchor:not(.response) .plurk_cnt .name{padding-right:圖的闊度px;}
ಠ_ಠ
感覺看不太懂?
是增加別人名字圖示嗎?
這樣的話能否依照不同使用者ID調整?
dove1687
是的,也可以按id調整,就將括號前改成這樣就好
.cboxAnchor:not(.response) .plurk_cnt .name[data-uid="使用者id"]::after
dove1687
uid不是平常@的那個是一串數字那個(?
ಠ_ಠ
dove1687: 那個我會抓(?)
我河道上不同人的大頭都我個別設定www
載入新的回覆