CSSストライプ柄ジェネレーター
2020-06-06CSS,CSS ジェネレーター

CSSストライプ柄のカスタマイズエディタです
サンプルタイプを選んで作成できます
Base
Hard
Soft
direction
Color 1
size25px
opacity1
Color 2
size25px
opacity1
Color 3
size25px
opacity1
Color 4
size25px
opacity1
Color 5
size25px
opacity1
Color 6
size25px
opacity1
Color 7
size25px
opacity1
colors
icons
使い方・機能
CSSストライプ柄ジェネレーターはCSSで作るストライプ柄のカスタマイズエディタです
サンプルタイプを元に作成できます
- 7色まで指定可能
- くっきりタイプとふんわりタイプを変更できます
- 各ラインの色・角度・透過色設定
- 背景の色と透過色設定
- CSS出力はrepeating-linear-gradien()
ふんわりタイプは白黒黒白みたいに同じ色を並べるといい感じになるかもっ
更新履歴
2,019/03/09
公開しました
Posted by Yousuke.U
関連記事


CSS | letter-spacingとline-heightでテキストの字間と行間を変更する方法
CSSで指定したフォントサイズが大きくなると、どうしてもデフォルトのままでは表示 ...


CSS | 円柱(Cylinder)の作り方
CSSで円柱を作成する方法を紹介しています。 以下の記事にてCSSのpreser ...


CSS | display:flexのgapで要素間の余白を指定する方法
CSSのflexbox(display:flex)でgapを利用して並べる要素間 ...


円に沿って移動するCSSアニメーションサンプル
文字列や画像などのHTML要素が円枠、円縁に沿って移動するCSSアニメーションを ...


CSS | filterで画像を暗く表示する
CSSでfilterプロパティを利用して画像・写真を暗く加工した状態で表示する方 ...


CSS | テキストエリアのサイズ変更を不可にする
CSSでテキストエリアのサイズ変更を不可にするサンプルコードです。 See th ...


CSS | ひし形(Rhombus)の作り方
CSSでひし形をtransformプロパティを使って作成する方法と、clip-p ...


CSS | filterのblur()で画像や文字をぼかすサンプル集
CSSのfilterプロパティのblur()を使って画像や要素をぼかすCSSサン ...


CSS | テキストを凹んだように見せるサンプル集
CSSのtext-shadow()を使ったテキストが凹んでいるように見えるCSS ...


範囲外から落下してくるCSSアニメーションサンプル
ブラウザの表示領域の上部・範囲外・画面外から指定した要素が落下してくるCSSアニ ...


色々なパターンの点滅するCSSアニメーションサンプル集
文字や要素を点滅するCSSアニメーションのパターン集です。 各点滅アニメーション ...


CSS | 3Dなサイコロの作り方
CSSでtransform-styleのpreserve-3dを使って、3Dなサ ...


CSS | display:flexで折り返した要素も含め横幅100%にする
CSSのflexbox(display:flex)をflex-wrapで折り返す ...


CSS | 背景色とテキスト色を相互に入れ替えるサンプル集
CSSのグラデーションを使って背景色とテキスト色を相互に入れ替えツートンカラーに ...


CSS | 台形(Trapezoid)の作り方
CSSで台形の図形をborderを使って作成する方法と、clip-pathのpo ...


回転しながら落下するCSSアニメーションサンプル
CSSで要素が回転しながら落下するアニメーションのCSSサンプルです。 ひとつの ...


CSS | display: flexで子要素の高さを揃えない方法
CSSのFlexBox(フレックスボックス)で横並びにした子要素の高さを揃えない ...


CSS | Googleフォントの使い方
See the Pen CSS | Adjust the size and po ...


CSS | display: flexで子要素のサイズを固定幅にする方法
CSSのFlexBoxで子要素のサイズを固定幅にする方法とサンプルを紹介していま ...


CSS | アニメーションの再生方向で指定可能な値と比較
こちらはCSSアニメーションの再生方向指定プロパティ(animation-dir ...
ディスカッション
コメント一覧
まだ、コメントがありません