CSS

CSSだけを使ったストライプ(斜め・水平・垂直など)の作り方

CSSだけを使ったストライプの作り方「Stripes in CSS」が紹介されていました。これとても便利ですね。見出しなどの要素の背景にストライプを使いたいって時に役立ちそうです。斜めのストライプや水平・垂直のストライプまで色々と参考になります。

[ads_center]

ストライプ

CSSでストライプを作るやり方

Stripes in CSS | CSS-Tricks

実際のCSSでは主にrepeating-linear-gradientが使われています。斜めのストライプの角度は45degに設定されています。

自分で画像を作成して用意しなくてもCSSだけでストライプができるので、お手軽ですね。

関連記事

  1. CSS

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

  2. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  3. CSSで可変式ドロップダウンメニュー

    CSS

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみた

    CSSだけでシンプルな可変式のドロップダウンメニューを作ってみました。…

  4. CSSだけで実装できるスニペット

    CSS

    CSSのコードだけで実装できるWebデベロッパーのための28のスニペット

    とてもよさそうなまとめですね。CSSのコードだけで実装できるWebデベ…

  5. li要素の折り返したテキストを揃える

    CSS

    li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

    またどこかで使いそうな感じがしたので記録として残しておきます。ulのl…

  6. CSS

    CSS3でフォントサイズを指定する単位は「rem」がとても便利

    CSS3から新しく出来たフォントサイズ指定の単位「rem」がとても便利…

最近の記事

  1. NIB2600
  2. Anker PowerPort Atom PD 4
  3. USB-2H401BKN
  4. Dyson Pure Cool Me

アーカイブ

PAGE TOP