CSSでデジタルっぽい数字の表現をする - Qiita

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

qiita.com/hiloki@github

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

コメント

1

記事へのコメント1件

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

teppeis currentColor

css

2014/12/20 リンク

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

規約違反を報告

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

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

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

アプリをダウンロード

関連記事

CSSでデジタルっぽい数字の表現をする - Qiita

実際のサンプルとコードはCodepenで確認できる。（Google Chrome 39.0.2171.71 だけでしかまだ確認して... 実際のサンプルとコードはCodepenで確認できる。（Google Chrome 39.0.2171.71 だけでしかまだ確認していない）よくある<div></div>一個でシリーズとかでもなく、<span></span>でドット部分を用意し、position:absoluteで配置し、点灯箇所を数字ごとに変えているだけ。上下のドットだけで構成しているような場合は、<div></div>一個でもつくれそうな気がしないでもないが、真ん中のタイプはちょっと苦しそうだったので、素直に<span></span>を並べてつくった。真ん中のやつ上下は特に難しいことはしていないが、真ん中のやつは、少しばかりどうつくるか悩んだ。コード全体は先ほどのCodepenのCSSペインにある、.counter-digitalのあたりをみると良い。悩んだ割には単純で、擬似要素で配置した上で隣接する部分の隙間を

css
color

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

usagi_f2015/02/18
teppeis2014/12/20
tarchan2014/12/10
otsune2014/12/04
deepblue_will2014/12/03
kyaido2014/12/03
vent08192014/12/02
tksnesne2014/12/02
wo-horn2014/12/02
macky12072014/12/02
yuhiisk2014/12/02
kyo_ago2014/12/02
kojika172014/12/02
murokaco2014/12/02

同じサイトの新着

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

いま人気の記事

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

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

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

新着記事 - テクノロジー

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

設定を変更しましたx