資訊專欄INFORMATION COLUMN
摘要：全解法如何在文件里扣出圖層里的圖標右鍵選中這個圖層右擊這個圖層把這個圖層放到新文件點擊圖片的按鈕自動切圖到最小再調整一下畫布大小將圖片設置為長寬一樣導出即可在頁面里圖片會默認保持比例所以只要設置寬高的其中一種就可以了摳圖的前端現在基本沒有了
CSS4:icon全解 1.img法 1.1如何在psd文件里扣出圖層里的圖標
右鍵選中這個圖層
右擊這個圖層,把這個圖層放到新文件
點擊圖片的trim按鈕,自動切圖到最小
再調整一下畫布大小,將圖片設置為長寬一樣
導出PNG即可
在頁面里,PNG圖片會默認保持比例,所以只要設置寬高的其中一種就可以了1.2 如果設計師給的是PNG(設計師不專業)摳圖的前端現在基本沒有了.屬于落后的技術
用PS扣.具體步驟是選中按鈕,crop,得到新圖片,魔棒工具選中按鈕,反選,刪除背景,trim后,調整大小
1.3第一種引入圖標方法代碼直接使用img標簽
將圖標當做div[display,inline-block]的背景圖.
好處是圖片大小固定,不隨div寬高改變而改變
直接搜 CSS sprites Generator,直接生成
不要自己手動做,麻煩
css.spritegen.com
上傳PNG文件,自動生成一個整的文件
圖片另存為,然后復制代碼
粘貼代碼,做修改
雪碧圖方法老套,現在很少用了.
3.iconfont-HTML形式使用iconfont.cn網站
大概原理:把字體變成圖標,用什么字體中的字母就有什么圖標
iconfont.cn
很多圖標添加至購物車
把這些圖標組成一種新字體.
知識點:html字符實體
如果實體編號大于某個數值了,就以x開頭,x表示為16進制.比如"你"的編碼
也就是說所有的符號,大于小于,空格,文字,都可以用實體編碼表示,瀏覽器會解析
所以
使用字體
使用方法:
可以使用偽類CSS來添加圖標
當只用iconfont類的時候,告訴瀏覽器我這個容器要是用iconfont字體.
源代碼:原理
第二個class就是寫里面是什么圖標
然后用span
這種方法也快要被淘汰了,接下來看第三種方法
目前大家優先使用這樣一種方法
5.1使用sketch做一個SVG圖,插卡看SVG圖特性SVG其實是一段代碼
瀏覽器可以解析這段代碼,將它變成圖形
漸變,五角星位置,都是代碼,根據代碼,就可以生成圖形
只要將代碼放到瀏覽器,就可以出現圖片
查看幫助文檔
1,2引入js和style,3直接使用
SVG是矢量圖,不會失真,默認居中
如果是沒有顏色的SVG,可以用fill屬性來改,如果有顏色,就不能用了.也可以給svg描邊
以后做圖標就是SVG的時代了,他可以漸變,可以不失真,甚至可以動
推薦在任何時候都用第三種SVG方式
cssicon.space
只用css做出圖標
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116733.html
摘要：怎么樣好不好最近美國新的全解鎖原生段上架開售，支持等，原一期產品可加價更換年付免費更換，美國原生段仍有少量剩余，套餐原價基礎上每月加價元可更換美國原生，更換的為純凈新分配美國段，絕對傳家寶產品，支持解鎖美區游戲，，等，同時支持。lisahost怎么樣？lisahost好不好？lisahost最近美國新的全解鎖原生IP 206段上架開售，支持tiktok等，原CN2一期產品可加價更換(年付免費...
摘要：艾雲怎麼樣，艾雲好不好，昨天收到艾雲家發的消息，商家宣布聖何塞機房的都已經更換完成，全部更新為原生，商家還提供一張圖，幾乎是全解，目前聖何塞機器的價格還是比較便宜的，月付元起，給的是口的帶寬，自帶的防禦，同時商家還推出了一個特價年付套餐，有艾雲怎麼樣，艾雲好不好，昨天收到艾雲家發的消息，商家宣布聖何塞機房的IP都已經更換完成，全部更新為原生IP，商家還提供一張圖，幾乎是全解，目前聖何塞機器的...
閱讀 3729·2021-11-24 09:39
閱讀 3442·2019-08-30 15:56
閱讀 1369·2019-08-30 15:55
閱讀 1031·2019-08-30 15:53
閱讀 1918·2019-08-29 18:37
閱讀 3600·2019-08-29 18:32
閱讀 3128·2019-08-29 16:30
閱讀 2918·2019-08-29 15:14
