【CSS】しましま(縞模様)をつくる
- 2018.10.25
- CSS

画像を使わずに、シマシマ模様を作ってみる。
グラデーションを使うと簡単。
いろいろな場面で使える。
サンプル 縦しましま(縦縞)
See the Pen CSSだけで、しましま(縞模様)をつくる、縦しましま by 125naroom (@125naroom) on CodePen.
サンプル 横しましま(横縞)
See the Pen CSSだけで、しましま(縞模様)をつくる、横しましま(横縞) by 125naroom (@125naroom) on CodePen.
サンプル 斜めしましま(斜縞)
See the Pen CSSだけで、しましま(縞模様)をつくる、斜めしましま(斜縞) by 125naroom (@125naroom) on CodePen.
ポイント
背景(background)をグラデーションにする。
repeating-linear-gradientで指定。
- 縦縞 → to right(右へ)
- 横縞 → to top(下から上へ)
- 斜縞 → 45deg(45度、角度自由)
おすすめ
かんれん
- web / 2019.9.26
- 【CSS】input、textareaのCSSを初期化する(iOS対策)
- web / 2018.10.24
- 【CSS】ベンダープレフィックス 必要なもの不要なもの
- web / 2019.1.24
- 【CSS】吹き出しをつくる
- web / 2019.7.19
- 【CSS】olのリストで①、②、③(丸数字)を表示させる
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2019.7.22
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
- web / 2019.7.24
- 【jQuery】ページ内リンクでスムーズスクロール(スクロール位置の調整も簡単にできる)
- web / 2019.7.19
- 【CSS】olのリストで①、②、③(丸数字)を表示させる
- web / 2019.10.2
- 【jQuery】モーダルプラグイン『Remodal』の実装サンプル集
- web / 2019.1.22
- 【CSS】三角アイコンと矢印アイコンをつくる
Googleさんのおすすめ
デザインの記事
- 2021.01.25New
- 旅する喫茶 – tabisuru kissa.
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2021.01.25New
- 旅する喫茶 – tabisuru kissa.
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2021.01.26New
- IDÉEさんのソファ
- もくじ リビングに新しい大きな家具 テレビを見るとき、映画を観るとき 家族会議を開き…
- いつかのこと – 無印良品の家と暮らす
- 2021.01.25New
- お食い初めとお正月
- もくじ お食い初めをしました こだわりのお頭付きの鯛 娘ちゃん100日おめでとう お食い…
- いつかのこと – 無印良品の家と暮らす