画像エフェクト
エンジニアのためのWebチートシート
CSSで実現できる画像エフェクトのチートシートです。filter、clip-path、blend-modeなどを使った視覚効果と、AI画像生成用のプロンプト例をまとめました。
画像をアップロード
アップロードした画像で各エフェクトをプレビューし、加工後の画像をダウンロードできます
ドラッグ＆ドロップまたはクリックして画像を選択
カラー調整
Grayscale
画像をモノクロに変換
Sepia
レトロなセピア調
High Contrast
コントラストを強調
Brightness
明るさを調整
Saturate
彩度を強調して鮮やかに
Hue Rotate
色相を回転させて色味を変更
Invert
色を反転（ネガ効果）
Warm Tone
暖かみのある色調
Cool Tone
冷たい色調
Desaturate
彩度を下げた落ち着いた色
Color Pop
彩度とコントラストを強調
ブラー・フォーカス
Soft Blur
柔らかいぼかし効果
Vignette
周辺を暗くして中央に視線を集める
形状・切り抜き
Circular Crop
円形に切り抜き
Drop Shadow
影をつけて立体感を演出
オーバーレイ・合成
Duotone
2色のグラデーションで表現
Color Tint
色味を重ねて雰囲気を変える
特殊効果
Glitch
デジタルノイズ風の歪み
Pixelate
ピクセル化効果
Noise / Grain
ノイズ・粒子感を追加
Vintage
レトロ・ヴィンテージ感
Cinema
シネマティックな雰囲気
アート系
Posterize
ポスター風の色階調削減
Emboss
エンボス（浮き彫り）効果
Sketch
スケッチ・鉛筆画風
Comic
コミック・漫画風
引用・参考リンク
WebTerm
WebTermは、AI時代のためのブラウザベースのターミナルサンドボックスです。
AIコーディングツールの普及に伴い、CLIの基礎知識はエンジニアだけでなく非エンジニアにとっても重要になっています。
WebTermは、ローカル環境を壊す心配なく、Linuxコマンド、Gitワークフロー、CLI AIツールを安全に学べる「一時的・無料・ノーサインアップ」の環境を提供します。
WebTerm
Browser Terminal Sandbox for Learning CLI
Related Cheatsheets
- CSS Flexbox-FlexboxとはFlexible Box Layout Moduleのことで、柔軟なレイアウトを簡単に実現することができるCSS3の新しいレイアウトモジュールです。 要素の横並びにfloatやinline-blockを使用するのは時代遅れです。 Flexboxのプロパティをチートシートにまとめてみました。
- Sass-SassとはSyntactically Awesome Stylesheetsのことで、CSSをより構造的に記述することのできるCSSのメタ言語です。SASS記法とSCSS記法の二種類が存在します。 変数、四則演算、if文やwhile文が使えるため、リーダブルでメンテナブルに記述することができ、開発効率が向上します。 そんな便利なSass(SCSS記法)をチートシートにまとめました。
- CSS セレクタ-【図解付き】知っておくと便利なCSSのセレクタの種類と使用例を図解付きでチートシートにまとめました。 隣接セレクタやbefore/afterといった疑似要素、何番目の要素かを指定するnth-childやhoverなどのよく使用する疑似クラスを表現する方法をまとめてみました。
- CSS cursorプロパティ-【図解付き】cursor: pointer以外にも、moveやgrabなどの知っておくと便利なcursorプロパティをチートシートにまとめてみました。
- タイポグラフィ-CSSタイポグラフィのチートシートです。折り返し制御、文字詰め、カーニング、流体タイポグラフィなど、テキスト表示を美しく制御するためのプロパティをまとめました。
- テキストアニメーション-CSSで実現できるテキストアニメーションのチートシートです。フェードイン、スライド、タイプライター、グリッチ、ネオン効果など、様々なテキストエフェクトをライブプレビューで確認できます。
All Cheatsheets
エンジニア・プログラマー向けの便利なチートシートを多数まとめています(SP/Tablet/PC対応)
すべてのチートシートを見るComments