バッジ・ラベル・リボンのCSS素材

お知らせ一覧のタイトルの前に置く小さなラベルです。数秒おきに小さく揺れて目を引きます。

リボンはカードの左上から少しはみ出し、折り返しの影の三角が付きます。色の面は写真の代わりです。__img の中に <img> を入れて差し替えてください。

カードの右上の角に、斜めの帯を渡しています。カードに overflow: hidden を付けて帯の端を切っています。色の面は写真の代わりです。__img の中に <img> を入れて差し替えてください。

左側をとがらせて、ひもを通す穴をあけた値札の形です。穴は mask で抜いているので、どんな背景の上でも透けます。

数字は cs-bd05__count の中身を書き換えます。100以上は「99+」のように書くのがおすすめです。数字が0のときはバッジごと消してください。

1〜3位は cs-bd06--1 --2 --3 で金・銀・銅になります。4位以下は修飾なしで王冠が出ません。王冠は短いインラインSVGです。

二重丸のはんこが、表示されたときにポンと押されます(最初の1回だけ)。インクのかすれは模様を mask で重ねて出しています。

料金プランなどのカードの上辺に重ねる吹き出しです。カードに position: relative が必要です。

カードの上辺から垂れ下がるしおりです。文字は縦書き(writing-mode)で、下の切れ込みは clip-path です。色の面は写真の代わりです。__img の中に <img> を入れて差し替えてください。

cs-bd10--open(受付中)・--few(残りわずか)・--end(終了)を付け替えて使います。受付中だけ丸が点滅します。

ギザギザの形は clip-path の多角形です。ゆっくり回るのはギザギザの台だけで、文字は止まったままです。

左右の半円の切り欠きは mask で抜いています。クーポン・特典の表示に。