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

    CSSでテキストを縦の位置にするやり方

    ちょっと便利そうだったのでメモがてらご紹介。CSSでテキストを縦の位置…

  2. Media Queriesの@media
  3. 動画をレスポンシブにするCSS

    CSS

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

  4. CSS

    よく見かけるblockquoteの左上と右下にダブルクォートつけるやつをCSSだけで作ってみる

    blockquoteのデザインって色んなパターンがあって面白いですよね…

  5. CSS

    ulのリストを横並びにしてtext-alignを適用させる方法

    ちょっと悩んじゃいました。ulのli要素を横並びにしてそれにtext-…

  6. Ember Burger Menu

    CSS

    豊富なアニメーションを有するハンバーガーメニュー「Ember Burger Menu」

    Ember Burger Menuは、豊富なアニメーションを有するカス…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP