無料でビットコインをもらえるのは、ビットフライヤー

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

今回は、こんな風なステッチ(縫い目)を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

まず、コードから。

CSS
.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プロパティを使ったときには、どうしても縫い目の角が直角になってしまうようです。そのあたりだけ注意してお使いください。

コメントを残す

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