刺繍で縫いつけたようなボックスを描くためのCSS

刺繍で縫いつけたようなボックスを描くことができます。

以下のCSSを追加し、

.stitched {
   padding: 15px 30px;
   margin: 10px;
   background: #fcb9c0;
   color: #fff;
   font-size: 16px;
   line-height: 1.3em;
   border: 2px dashed #fff;
   border-top-left-radius: 3px;
   -moz-border-radius-topleft: 3px;
   -webkit-border-top-left-radius: 3px;
   border-bottom-right-radius: 3px;
   -moz-border-radius-bottomright: 3px;
   -webkit-border-bottom-right-radius: 3px;
   border-top-right-radius: 3px;
   -moz-border-radius-topright: 3px;
   -webkit-border-top-right-radius: 3px;
   border-bottom-left-radius: 3px;
   -moz-border-radius-bottomleft: 3px;
   -webkit-border-bottom-left-radius: 3px;
   -moz-box-shadow: 0 0 0 4px #fcb9c0, 2px 1px 4px 4px rgba(10,10,0,.5);
   -webkit-box-shadow: 0 0 0 4px #fcb9c0, 2px 1px 4px 4px rgba(10,10,0,.5);
   box-shadow: 0 0 0 4px #fcb9c0, 2px 1px 6px 4px rgba(10,10,0,.5);
   text-shadow: -1px -1px #b5737a;
   font-weight: normal;
}

以下のHTMLの記述を記事に入力すると

</pre>
<div class="stitched">刺繍で縫いつけたようなボックスを描くことができます。</div>
<pre>



刺繍で縫いつけたようなボックスを描くことができます。

刺繍で縫いつけたようなボックスを描くことができます。

参照:“Stitched” Look

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中