Read Article
具体的な適用例を確認しながらcubic-bezier()の値をコピー・調整できる「Easings」
「Easings」は、CSSでアニメーションを表現する際などに利用する`cubic-bezier()`の値を出力するジェネレータで、`easeInSine`や`easeOutSine`といった代表的なイージング関数に加え、任意で調整した動きの実装値も出力してくれます。
Tag : Generator
- 8 Articles -
Read Article
スタイル作成の時間短縮や勉強にも使える、CSS関連の便利ジェネレータ 20
用意された項目を数値入力や操作していくだけで簡単に見栄えが再現でき、必要なCSSコードなどを出力してくれるCSS関連のジェネレータのまとめです。CSSが苦手な人は上手く利用すればスタイル作成の時間短縮になりますし、CSSを勉強中またはこれから勉強しようと思っている人の学習ツールとして使えるものもあります。
Read Article
HTMLとCSSで表現するセパレータを生成できるジェネレータ「CSS Section Separator Generator」
「CSS Section Separator Generator」は、セクションの区切りを示す際などに配置するセパレータをHTMLとCSSで表現するコードを生成してくれるジェネレータです。サイズや位置などのオプションも用意されており、斜め・波・ギザギザなど種類も複数用意されています。
Read Article
ニューモーフィズムな見栄えのCSSを生成できる「Neumorphism/Soft UI CSS shadow generator」
「Neumorphism/Soft UI CSS shadow generator」は、各種項目を調整・選択するだけでニューモーフィズムな見栄えを実装できるCSSを生成してくれるジェネレータです。
Read Article
ジェネレーティブアートなダミーイメージを表示させる「Generative Placeholders」
「Generative Placeholders」は、ジェネレーティブアートなダミーイメージを表示させるツールです。サイズ指定はもちろん、7タイプのスタイルと100種類のカラーパレットを任意で組み合わせたイメージを表示させることができます。
Read Article
ダミーテキストで遊びたい人向け！ユニークなLorem Ipsumジェネレータ 10
カップケーキ・野菜・猫・ゾンビ・海賊など、様々なテーマに沿ったLorem Ipsumを生成できるジェネレータを紹介します。いずれも英語になるので実際に案件で使うとなると日本語ベースとか一般的なLorem Ipsumを用いるのが好ましいとは思いますが、個人プロジェクトだったりダミーテキストで遊びたいと思う人は試してみてください。
Read Article
必要な機能項目を選択することでwebpack.config.jsを出力してくれるジェネレータ「Webpack configurator」
「Webpack configurator」は、その名の通りwebpackに関する設定を記述する`webpack.config.js`を各項目を選択するだけで出力してくれるジェネレータです。React, CSS, Sass, SVG, lodashなど、現状で10個の項目が用意されています。
Read Article
各項目を選択・入力するだけでgulpで使用するソースを出力してくれるジェネレータ「gulp generator」
ちょっと便利そうだったので備忘録兼ねてご紹介。「gulp generator」はgulpで使用する`gulpfile.js`と`package.json`に記述するソースを出力してくれるジェネレータで、用意されている各項目を選択したりファイルの読み込み・出力箇所を入力していくだけで簡単に必要なソースを出力してくれます。