個人開発

「WEB GENERATOR(ウェブジェネレーター)」WEBツールを公開しました

この度、WEB上簡単に設定できる、HTML / CSS / JSジェネレーターの総合WEBツールを開設しました。

今後、機能を順次増やしていく予定です。

 

(「WEB GENERATOR」は下記から使うことができます )

https://web-generates.com/

 

現在の機能は下記になります

【CSS】
・ストライプCSSジェネレーター
・グラデーションCSSジェネレーター
・ボックスシャドウ(box-shadow)CSSジェネレーター
・テキストシャドウ(text-shadow)CSSジェネレーター
・変形 (transform)CSSジェネレーター
・三角形 CSS ジェネレーター
・画像フィルタCSSジェネレーター
・ブレンドモード CSS ジェネレーター

【計算 / 変換】
・比率計算
・pxからvwへの変換
・pxからemへの変換
・%からpxへの変換
・line-height計算
・アルファベットの大文字⇄小文字変換

ストライプCSSジェネレーター

ストライプ柄のCSSの設定が簡単にできるジェネレーターです。

角度 / ラインのサイズ・色を選択し、下記のようなのCSSのコードをコピーして使用してください。

background: repeating-linear-gradient(45deg, rgba(0, 145, 234, 1), rgba(0, 145, 234, 1) 10px, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 20px);

 

ボックスシャドウ(box-shadow)CSSジェネレーター

box-shadowの設定が簡単にできるCSSジェネレーターです。

影のX/Yの位置・ぼかし・広がり・色などを設定できます。

box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.4);

 

テキストシャドウ(text-shadow)CSSジェネレーター

text-shadowの設定が簡単にできるCSSジェネレーターです。

影のX/Yの位置・ぼかし・色などを設定できます。

text-shadow: 0px 0px 10px rgba(0,0,0,0.8);

 

グラデーションCSSジェネレーター

グラデーション / linear-gradient() radial-gradient()の設定が簡単にできるCSSジェネレーターです。

background: linear-gradient(180deg, rgba(228,239,250,1) 0%, rgba(25,118,210,1)100%);

 

 

画像フィルタCSSジェネレーター

画像のフィルタ / filter()の設定が簡単にできるCSSジェネレーターです。

filter:blur(7px);

変形 (transform)CSSジェネレーター

変形 / transformの設定が簡単にできるCSSジェネレーターです。

transform:rotate(38deg)scale(1.15)skew(34deg)translate(15px, 21px);

 

 

更新履歴

2021年4月19日 三角形CSSジェネレーター公開

2021年4月18日  pxからemへ変換 /  %からpxへ変換 /  line-height / 大文字小文字変換 公開

2021年4月9日 比率計算 / pxからvwへ変換公開

2021年4月9日 ブレンドモードCSSジェネレーター公開

2021年4月9日 計算/変換カテゴリ公開

2021年3月24日 画像フィルタ / 変形 CSSジェネレーター公開

2021年3月22日 グラデーションCSSジェネレーター公開

2021年3月20日 テキストシャドウ(text-shadow)CSSジェネレーター公開

2021年3月20日 ボックスシャドウ(box-shadow)CSSジェネレーター公開

2021年3月20日 テキストシャドウ(text-shadow)CSSジェネレーター公開

2021年3月20日 ストライプCSSジェネレーター公開

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。