CSS

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

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

[ads_center]

ストライプ

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

Stripes in CSS | CSS-Tricks

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

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

GoPro HERO3+に使えるアクセサリーGoPro HERO3+に使える25の凄いアクセサリー前のページ

紙のようなエフェクトのスライダーを実装できるjQueryプラグイン「Paper Slider」次のページ

関連記事

  1. CSS

    CSSのfloatで回り込みさせたテキストを画像や要素の下に回り込ませないやり方

    ちょっとしたCSSのTipsです。結構使う機会があるのでメモがてら残し…

  2. CSSで文字の長さに合わせる

    CSS

    CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方

    CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介し…

  3. CSS3を使ったツールチップ

    CSS

    CSS3を使ってアニメーションするツールチップを実装するコード

    これすごくよかったのでメモがてらエントリー。CSS3を使ってアニメーシ…

  4. CSS

    WebデザインのためCSSエフェクトを実装できる5つのライブラリ

    とても役立ちそうなまとめだったのでメモがてらご紹介します。Webデザイ…

  5. CSSチュートリアルまとめ

    CSS

    CSS初心者のための役立つ75のチュートリアルまとめ

    とても便利で役立つチュートリアル集「75 CSS Tutorial f…

  6. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP