Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8822

Qiitaアイコンをhtmlに挿入したい

$
0
0

はじめに

Qiita ファビコン
この画像かわいいですよね!!
まだまだですが,ポートフォリオ作るときにQiitaのリンクをはろうと思ったのです.
ただ,公開されてるのがこれだけなので,とりあえず,貼るのにちょうどいい画像に変換してから,乗っけました.
3Dペイントとかも使えるみたいですがよくわからなかったのでpythonで画像加工のプログラムを書きました.
たぶん大丈夫だと思うのですが,これがガイドライン的にアウトだったら教えてください
早急に消します

pythonプログラム

importcv2importnumpyasnpfromPILimportImage,ImageDraw,ImageFilter,ImageOps,ImageChops# 元画像を読み込み最大値を255,最小値を0にする
im_gray=cv2.imread('qiita-icon.png',cv2.IMREAD_GRAYSCALE)imtype=im_gray.dtypeim_gray-=np.min(im_gray)valmax=255/np.min(im_gray)im_gray=im_gray*valmax# 白黒反転
im_gray=255-im_gray#型変換してしまうので元に戻す
im_gray=im_gray.astype(imtype)#Image型に変換
img_p=Image.fromarray(im_gray)# 黒画像を作り,アルファ値の設定
im_a=Image.new("RGB",img_p.size,(0,0,0))im_a.putalpha(img_p)crop=im_a.split()[-1].getbbox()im_a.crop(crop)im_a.save('qiita-icon.png')

htmlへの実装

html

<divclass="btnce"><ahref="https://qiita.com/#"class='btn'><imgclass="qiiicon"src="img/qiita-icon.png"/> Qiita</a></div>

css

.qiiicon{height:1rem;width:auto;filter:invert(100%);}

filterで色を変えたことくらい
他の色のやり方はafterとかなのでしょうか?
うまくいかなかったです
やり方知りたい...

結果

こんな感じになりました
まあまあいい感じにはなったと思うので及第点とします
少しずれてるのでアドバイスあればお願いします
実行結果のボタンイメージ

参照

ブランドガイド
🖼【CSS】filterのみを使用して黒い画像を任意の色に変更する


Viewing all articles
Browse latest Browse all 8822

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>