2013/07/28
[CSS] 疑似要素を使って画像にワンポイントのデザイン
DEMO
①画像の下に矢印のような三角をつける。
NEW②画像の左にラベル。
NEW③画像の左に縦書きラベル。
NEW④画像の上から縦書きラベル。
NEW⑤画像の左にリボン。
NEW⑥画像の上から縦書きリボン。
NEW⑦右上に三角ラベル。
NEW⑧右下に三角ラベル。
NEW⑨左上に三角ラベル。
NEW⑩左下に三角ラベル。
HTML
①画像の下に矢印のような三角をつける。
NEW
②画像の左にラベル。
③画像の左に縦書きラベル。
④画像の上から縦書きラベル。
⑤画像の左にリボン。
⑥画像の上から縦書きリボン。
⑦右上に三角ラベル。
⑧右下に三角ラベル。
⑨左上に三角ラベル。
⑩左下に三角ラベル。
CSS
.points > div {
display: inline-block;
width: 200px;
margin-right: 15px;
vertical-align: top;
}
.points p {
margin: 1em 0;
}
/* 共通 */
.points .image {
position: relative;
}
/* ①triangle-b */
.point-triangle-b:after {
position: absolute;
content: " ";
bottom: 0;
left: 50%;
height: 0;
width: 0;
border:10px solid transparent;
border-bottom:10px solid #fff;
margin-left: -10px;
}
/* ②③④sticky */
.point-sticky {
position: absolute;
line-height: 1;
background: #FF797D;
font-size: 12px;
color: #fff;
}
.point-sticky:after {
position: absolute;
content: " ";
height: 0;
width: 0;
}
/* ②sticky-l */
.point-sticky-l {
top: .5em;
left: -6px;
padding: .2em;
}
.point-sticky-l:after {
left: 0;
top: 100%;
border-top:6px solid #C83539;
border-left:6px solid transparent;
}
/* ③sticky-lv */
.point-sticky-lv {
top: .5em;
left: -6px;
width: 1.5em;
padding: .2em;
word-wrap: break-word;
text-align: center;
}
.point-sticky-lv:after {
left: 0;
top: 100%;
border-top:6px solid #C83539;
border-left:6px solid transparent;
}
/* ④sticky-tv */
.point-sticky-tv {
top: -.5em;
left: .5em;
width: 1.5em;
padding: .2em;
word-wrap: break-word;
text-align: center;
}
.point-sticky-tv:after {
left: 100%;
top: 0;
border-bottom:6px solid #C83539;
border-right:6px solid transparent;
}
/* ⑤⑥ribbon */
.point-ribbon {
position: absolute;
background: #FF797D;
font-size: 12px;
color: #fff;
}
.point-ribbon:before {
position: absolute;
content: " ";
height: 0;
width: 0;
}
.point-ribbon:after {
position: absolute;
content: " ";
height: 0;
width: 0;
}
/* ⑤ribbon-l */
.point-ribbon-l {
top: .5em;
left: -6px;
height: 1.5em;
line-height: 1.5;
padding-left: .5em;
}
.point-ribbon-l:before {
left: 0;
top: 100%;
border-top:6px solid #C83539;
border-left:6px solid transparent;
}
.point-ribbon-l:after {
left: 100%;
bottom: 0;
border:.8em solid #FF797D;
border-right:.7em solid transparent;
}
/* ⑥ribbon-tv */
.point-ribbon-tv {
top: -.5em;
left: .5em;
width: 1.5em;
line-height: 1;
padding: .25em .25em 0;
word-wrap: break-word;
text-align: center;
}
.point-ribbon-tv:before {
left: 100%;
top: 0;
border-bottom:6px solid #C83539;
border-right:6px solid transparent;
}
.point-ribbon-tv:after {
left: 0;
top: 100%;
border:.8em solid #FF797D;
border-bottom:.7em solid transparent;
}
/* ⑦⑧⑨⑩triangle */
.point-triangle {
position: relative;
}
.point-triangle:after {
position: absolute;
content: " ";
height: 0;
width: 0;
}
.point-triangle span {
position: absolute;
content: " ";
font-size: 12px;
font-weight: bold;
color: #fff;
z-index:100;
}
/* ⑦triangle-rt */
.point-triangle-rt:after {
top: 0;
right: 0;
border-bottom:3em solid transparent;
border-right:3em solid #FF797D;
}
.point-triangle-rt span {
top: .5em;
right: .2em;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
/* ⑧triangle-rb */
.point-triangle-rb:after {
bottom: 0;
right: 0;
border-top:3em solid transparent;
border-right:3em solid #FF797D;
}
.point-triangle-rb span {
bottom: .6em;
right: 0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
/* ⑨triangle-lt */
.point-triangle-lt:after {
top: 0;
left: 0;
border-bottom:3em solid transparent;
border-left:3em solid #FF797D;
}
.point-triangle-lt span {
top: .5em;
left: .2em;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
/* ⑩triangle-lb */
.point-triangle-lb:after {
bottom: 0;
left: 0;
border-top:3em solid transparent;
border-left:3em solid #FF797D;
}
.point-triangle-lb span {
bottom: .5em;
left: .2em;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
0 件のコメント :
コメントを投稿