【コピペでOK】画像に斜めのリボンを重ねる方法【CSS】
2013/12/15 (更新日: 2016/08/23) 【コピペでOK】画像に斜めのリボンを重ねる方法【CSS】 CSS PROGRAMMING ※記事が古いのでちょっと修正中 画像に斜めがけの『激かわリボン』をつける方法です( ◜◡‾) かわいいので備忘録的にメモしておきます。 完成予想図は以下。 右上部分に『新着』とかをつけれます。 上記画像でいう『新着』の部分はテキストなので、簡単に変更可能です。 ではさっそく解説。 HTMLは以下を例にしていきます。 <div class="four columns"> <article class="post" id="#"> <div class="btitle"> <h2><a href="#" rel="bookmark" title="#">ここに記事のタイトル</a></h2> <p id="topgazou-p"><span id=
[CSS] 疑似要素を使って画像にワンポイントのデザイン
DEMO ①画像の下に矢印のような三角をつける。 NEW ②画像の左にラベル。 NEW ③画像の左に縦書きラベル。 NEW ④画像の上から縦書きラベル。 NEW ⑤画像の左にリボン。 NEW ⑥画像の上から縦書きリボン。 NEW ⑦右上に三角ラベル。 NEW ⑧右下に三角ラベル。 NEW ⑨左上に三角ラベル。 NEW ⑩左下に三角ラベル。 HTML ①画像の下に矢印のような三角をつける。 NEW ②画像の左にラベル。 NEW ③画像の左に縦書きラベル。 NEW ④画像の上から縦書きラベル。 NEW ⑤画像の左にリボン。 NEW ⑥画像の上から縦書きリボン。 NEW ⑦右上に三角ラベル。 NEW ⑧右下に三角ラベル。 NEW ⑨左上に三角ラベル。 NEW ⑩左下に三角ラベル。 CSS .points > div { display: inline-block; width: 200px; m
簡単☆CSSでリボンをつくろう - ぴよぴよ.py
今回作ったのは new! こんなかんじに右上にタグを書けるようなリボン。 最近イラレ開くのがめんどくさいから出来るだけCSSでなんでも作ってしまいたい。 リボンのCSSもたくさん配布されていたのだけど、あんまり気にいるのがなかったので自分でつくってみました。 コード htmlはこんなかんじ <div class="ribbon-article"> <div class="side-corner-tag"> <div class="label">new!</div> </div> </div> CSSはこれ 感想 適当に書いたので、いらない行とかあるかも。 CSS気づいたらめっちゃ強くなってて全然時代についていけてない(´ε｀；) 巻かれてるかんじの影？とかがついたらいいと思うのだけど、 CSSがながーくなるので今回はこんな感じで。 参考 [CSS]画像やパネルに斜めにしたリボンを重ねるスタ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Step 03 – #tm .ribbon の中身を作っていこう | ページ右上に表示するリボンを CSS3 で作ってみた with LESS - jsdo.it - Share JavaScript, HTML5 and CSS