[CSS]アイデアが面白い！画像無しで、かわいいデザインのラベルをスタイルシートで実装するテクニック | コリス

テクノロジーカテゴリーの変更を依頼記事元:

coliss.com

70users がブックマークコメント

コメント

4

記事へのコメント4件

注目コメント
新着コメント

ebisu3htn ペロっとかぶさっているようなかわいいデザインのラベルを画像無し、CSSで実装したテクニックを紹介します。カード状のコンテンツにも画像に使っても面白そうです。実際のデモは、下記ページでご覧ください。テキス

2015/03/01 リンク

KumamotoLab アイデアが面白い！画像無しで、かわいいデザインのラベルをスタイルシートで実装するテクニック @colisscomさんから

CSS

2015/02/27 リンク

rouxril かわいい

css

2015/02/24 リンク

kawaosa ペロっとかぶさっているようなかわいいデザインのラベルを画像無し、CSSで実装したテクニック

CSS

2015/02/23 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

規約違反を報告

アプリのスクリーンショット

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

関連記事

[CSS]アイデアが面白い！画像無しで、かわいいデザインのラベルをスタイルシートで実装するテクニック | コリス

ペロっとかぶさっているようなかわいいデザインのラベルを画像無し、CSSで実装したテクニックを紹介しま... ペロっとかぶさっているようなかわいいデザインのラベルを画像無し、CSSで実装したテクニックを紹介します。カード状のコンテンツにも画像に使っても面白そうです。 Label Overlay 実装は、こんな感じ。 HTML ラベルは画像無し、spanを2つ使用して実装しています。 <div class="product"> <div class="product-image"> <span class="onsale-section"><span class="onsale">ラベル</span></span> </div> </div> CSS spanの:before, :afterを使用して、かわいいラベルをスタイルします。 .product { width: 300px; font-family: sans-serif; margin: 2%; } .product-image { b

ブックマークしたユーザー

keichinkob2018/10/14
mako07172016/12/11
ukspiffy2016/05/10
k_hayato9132015/08/24
ihok2015/05/22
buchiya4th2015/04/05
gotack2015/03/03
ebisu3htn2015/03/01
KumamotoLab2015/02/27
kuroaka18712015/02/25
wellwisher2015/02/24
qrac_jp2015/02/24
ayumuw2015/02/24
hayasi-n2015/02/24
takahumi_nakano2015/02/24
idiotcomputer2015/02/24
taks12015/02/24
dellab722015/02/24

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

いま人気の記事 - 企業メディア

企業メディアをもっと読む

設定を変更しましたx