ハクト@WEBエンジニア

70年代生まれの地方在住フリーランスWEBエンジニア。
いつもの操作や挙動に少し変化を加えるWebパーツやツールを、AIと一緒につくって紹介しています。

[ハクト@WEBエンジニア @hakuto00]

アイコンをPNGでダウンロード可能にしました。

アイコンに色を入れたり、グラデーションにしたり、枠を付けたりできます。

https://t.co/qZeBeRIsti

#css #アイコン #webデザイン

[ハクト@WEBエンジニア @hakuto00]

20万以上のアイコンを日本語で横断検索できるツールを作成しました。

Iconify APIを使って、Material・Lucideなど200種以上のオープンソースアイコンセットを検索し、SVG・CSSクラスなどをそのままコピーできます。

#icon #webデザイン #css

[ハクト@WEBエンジニア @hakuto00]

キーボードを鍵盤代わりにピアノの曲を演奏できるツールを作成しました。

キーを押すとカノンを演奏できます。

https://t.co/TtprYahrY5

#music #ピアノ #個人開発

[ハクト@WEBエンジニア @hakuto00]

Googleフォントをドット文字に変換するツールに編集機能をつけました。

ペン/直線/消しゴムで、微調整できて、ブラシサイズや色も変えられます。

#ピクセルアート #ドット絵 #フォント

https://t.co/QnF9yZWBqS

[ハクト@WEBエンジニア @hakuto00]

50種類の日本語Googleフォントをドット文字に変換して画像をダウンロードできるツールを作成しました。

Canvasで実装していて、透過やグラデーションも適用できます。
Slackの絵文字などにも利用可能です。

#ピクセルアート #フォント

[ハクト@WEBエンジニア @hakuto00]

ツールは以下
https://t.co/oukbQVwRh4

[ハクト@WEBエンジニア @hakuto00]

画像をアップすると、40以上のフィルターを一覧で確認しながら、CSSのコピペもできるツールを作成しました。

グラス風、デュオトーン、アニメ風など色々と選べて調整も可能です。

調整した画像はそのままダウンロードできます。

#CSS #写真 #webデザイン

[ハクト@WEBエンジニア @hakuto00]

ツールは以下
https://t.co/Of3UYq97jb

[ハクト@WEBエンジニア @hakuto00]

20万以上のアイコンを日本語で横断検索できるツールを作成しました。

Iconify APIを使って、Material・Lucideなど200種以上のオープンソースアイコンセットを検索し、SVG・CSSクラスなどをそのままコピーできます。

#icon #webデザイン #css

[ハクト@WEBエンジニア @hakuto00]

ツールは以下
https://t.co/L9T2D8AUnm

[ハクト@WEBエンジニア @hakuto00]

Googleフォントを一覧でプレビューしながら、文字や背景、枠線に100種類のグラデーションを適用するツールを作りました。

ChatGPTなどで作成したグラデの追加可能。CSSコピペ以外に画像保存もできます。

#CSS #WEB制作 #グラデーション

[ハクト@WEBエンジニア @hakuto00]

ツールは以下
https://t.co/PPSm9d34zC

[ハクト@WEBエンジニア @hakuto00]

テキストや絵文字をドット絵スタンプに変換して、写真の上などに自由に配置できるツールを作成しました。

50種類以上のGoogle Fontsを使用。画像のピクセル化も切り替え可能です。

#ドット絵 #個人開発 #アプリ

[ハクト@WEBエンジニア @hakuto00]

ソースは以下
https://t.co/HES3Dy4ro9

[ハクト@WEBエンジニア @hakuto00]

ホバー時にノートアイコンに赤ペンを引く編集ボタンを作りました。

SVG + CSS keyframesでペンの動きを制御して、 stroke-dasharray で赤線を描画しています。

#CSS #アニメーション #Webデザイン

[ハクト@WEBエンジニア @hakuto00]

ソースは以下
https://t.co/dn4nlEZa8v

[ハクト@WEBエンジニア @hakuto00]

「LOADING」文字が 🤔 にドットが変形するローディングアニメーションを作りました。

Canvasでドット座標取得 → 大量のdiv要素に変換し、JSでアニメーション化させてます。

#CSS #アニメーション #Webデザイン

[ハクト@WEBエンジニア @hakuto00]

ソースは以下
https://t.co/SFW4HFggoM

[ハクト@WEBエンジニア @hakuto00]

カレンダーアイコン自体を操作する日付ピッカーを作りました。

日付はスライドで調整、クリックでカレンダーを展開し細かく調整できます。

#CSS #WEBデザイン #javascript

[ハクト@WEBエンジニア @hakuto00]

ソースは以下
https://t.co/WRj7PykzQw

[ハクト@WEBエンジニア @hakuto00]

CSSだけで実装した一部分だけカラーにした画像を滑らかに切り替えるカードデザインです。

position: absolute で2枚の画像を重ねて opacity と transitionを指定して遷移させてます。

#CSS #Webデザイン #UI

[ハクト@WEBエンジニア @hakuto00]

ソースは以下
https://t.co/p7DCGsORAl

[ハクト@WEBエンジニア @hakuto00]

ホバーで矢印が肉球に変わり手を降るログアウトボタンを作りました。

SVGをrotate(90deg→0deg)で回転させて、opacity表示で肉球を表示。keyframesで左右に回転させ手を降るようにしてます。

#css #アニメーション #web制作