[み]CSSでステッチ(縫い目)を表現する方法

今回は、こんな風なステッチ(縫い目)をCSSだけで表現する方法を紹介します。基本的にはコピペで大丈夫ですので、どんどんコピペして使ってください。

つくり方←こっちがおススメ

まず、コードから。

.stitched {
    padding:15px;
    background:#f9f9f9;
    border-radius: 3px;

    border: dashed 2px #d9d9d9;
    /* ↑これがステッチになります */
    box-shadow: 0 0 0 10px #f9f9f9;
    /* ↑これがポイントです */
}

こんな風になります

borderプロパティで縫い目をつくり、その外側の領域は、box-shadowプロパティで塗ることで、borderが内側に来たような表現ができます。妙に横に長くなっているのは、単にpタグだからです。

つくり方その2

まず、コードから。

.stitched {
    padding:25px;
    background:#f9f9f9;
    border-radius: 3px;
    box-shadow: 1px 1px 6px 3px rgba(10,10,0,.5);

    outline: dashed 2px #d9d9d9;
    /* ↑これがステッチになります */
    outline-offset: -10px;
    /* ↑内側に移動させます */
}

こんな風になります

こちらの方法では、outlineプロパティを使っています。

注意するところ

どちらのコードも、Chromeの最新版でしか確認していませんので、そこはまず注意して下さい。それと、outlineプロパティを使ったときには、どうしても縫い目の角が直角になってしまうようです。そのあたりだけ注意してお使いください。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup