line-height:0 の使い道【文字の横に線を引く】
line-height:0 の用途 下画像のような「文字+横線」のデザインをCSSで表現する場合はどうするでしょうか? 文字+横線のデザイン これは:beforeや:afterなどの疑似要素を使えば問題なく作成できます。疑似要素を使うと細かく指定できますが記述量が多くなって面倒です。 //疑似要素はなにかと記述量が多い .text:before, .text:after { content: ''; display: inline-block; width: 200px; height: 2px; margin: 0 30px; background-color: #fff; vertical-align: middle; } この「文字+横線」はline-height: 0とborder-bottomを使って表現することも可能です。 line-heightは行の高さを変更するCSSのプロ
簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html CSSで文字の強調・飾りつけデザイン8選【コピペでOK】 | 東京のホームページ制作 / WEB制作会社 BRISK
https://twitter.com/Uotsumi/status/1409186061528440837
