Yilia主題-社交圖標優化

pxfasjfasedbf.jpg

對以前的社交圖標有些審美疲勞了((/ω\)其實是發現了問題),優化一下。

Before ↓

可以看到,矢量圖標有些泛黃,圓形圖標邊框也不太美觀。

GIF2020030303.gif

Ps:這裏的泛黃,是因爲把"一言"以及"菜單"的hover設爲了淡黃,優先級定太高了  ̄□ ̄||,
後面針對這個我把每個矢量圖標的:before都設了白色。

20200303162113.png

After ↓

是不是好看了點()

GIF20200303.gif

修改如下:

這裏以Github圖標爲例,其他的也一樣,打開yilia\source\main.xxxx.css,
搜索社交圖標名,這裏需要搜 github

20200303163046.png

  • 1、這裏的 border 可以用來移動中心的矢量圖標
  • 2、給 :hover 加個同樣背景的顏色

如果想改圖標的形狀,直接搜 #header .header-nav .social a {,修改邊框半徑 (border-radius),
大於自身的50%,就是圓形,這裏我改成了10%(方形)。

20200303164123.png

Finally ↓

GIF202020sskf.gif

添加自己想要的社交圖標,參見:https://anyway1314.cn/post/e4525229.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章