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

最終更新日:2016-02-17

dfafad

以前、記事「刺繍で縫いつけたようなボックスを描くためのCSS」において、ボックスの内側に点線をひく方法を紹介しましたが、

afadf
“Stitched” Look | CSS-Tricks

ie 8 ではちゃんと表示されません。

IETester-1
ie8 での表示(by IETester

そういった中、記事「パーセントで指定された大きさを持つボックスを記事の中央に配置する方法についての考察」を書いていて、原理的にはだいたい同じなので、ボックスの内側に点線をひくことに応用できないかと試してみたところ、うまくいったのでその覚書です。

以下の HTML を記事に追加し、かつ、CSS をブログに追加したら、ボックスの内側に点線を入れたりすることができました。 

記事に以下のような感じの記述をし、

<h2 class="entry-title"><a href="#">記事タイトル</a></h2>

以下の CSS を CSS スタイルシートエディターへ追加したら、

/* 刺繍で縫いつけたようなボックスを描くための CSS(改) -comemo- */
.entry-title {
margin: 0 0 30px;
padding: 20px 25px;
/*
background-image: url("http://asazuki.net/comemodemo/wp-content/uploads/2013/07/FabricPlain0083_1_S_01.jpg");
*/
color: #FFF;
border-radius: 5px;
text-shadow: -1px -1px 2px rgba(0,0,0,0.5);
position: relative;
z-index: 0;
}

.entry-title:after {
content: "";
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
border: 2px dashed #fff;
padding: 3px;
margin: -5px;
border-radius: 5px;
z-index: -1;
}

.entry-title:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #feb9c1;
background-color: rgba(254,185,193,0.9);
border-radius: 5px;
box-shadow: inset -1px -1px 2px rgba(0,0,0,0.6), inset 1px 1px 2px rgba(255,255,255,1);
z-index: -1;
}

.entry-title a {
color: #fff;
}

.entry-title a:hover {
color: #af535d;
text-shadow: 1px 1px 2px #fff;
}

ボックスの内側に点線を入れたりすることができました。

dfafad
刺繍で縫いつけたようなボックス | comemo demo (org)

ie 8 ではこんな感じで表示されました。

IETester-2

上記の CSS はテーマ「Twenty Twelve 」等でそのまま適用可能です。

 

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

%d人のブロガーが「いいね」をつけました。