フロントエンドエンジニアのための便利ツール

main_img

※10/4勉強会の内容を転記しました。

■css box-shadowをサクッと
https://shadows.brumm.af/

■css border-radiusの複雑なやつできるっぽい
https://9elements.github.io/fancy-border-radius/

■css clip-pathをいろいろいじれるっぽい
https://bennettfeely.com/clippy/

■3つの色を指定してグラデーションをいい感じに
https://mycolor.space/gradient3

■デザイン/UIのトレンドであるグラスモーフィズムをサクッとCSSに
https://glassgenerator.netlify.app/

■こっちはニューモーフィズム
https://neumorphism.io/#e0e0e0
https://neumorphic.design/

■フォントサイズの設定と実際のサイズ感がわかる
https://katydecorah.com/css-ruler/

■いろんなフロントエンド用のツールが揃ってるっぽい?
https://www.fetoolkit.io/

■なんか画像をいろいろ加工できる
https://cssduotone.com/

■以前有料だったフォントがいろいろあるらしい、検討(WEBフォントとして使える?)
https://www.fontshare.com/

■コードの差分チェック
https://difff.jp/

■sassをサクッとcssに
https://www.sassmeister.com/

■フリー画像
https://freephotos.cc/ja

■画像素材サイト?
https://www.vecteezy.com/

■アイコン素材サイト
https://icooon-mono.com/
https://www.flaticon.com/

■Google Invisible reCAPTCHA
Google Invisible reCAPTCHAは、たった1回のクリックで閲覧しているのがボットなのか人間なのかを見極めるリキャプチャツールを提供しています。
これまでのリキャプチャツールでは人間であることを証明するために文字や数字を入力する必要がありましたが、こちらはチェックボックスにチェックをするだけでロボットか人間かを判断することができます。
https://www.google.com/recaptcha/about/