Fig 1: 擬似要素を利用してテキストをベースライン・グリッドに揃える CSS でテキストをベースライン・グリッドに揃えるとなると、ベースラインの高さに応じて上下のパディングやマージンを調整するアプローチがよく見受けられますが、あまり実用的なものとは言いがたかったと思います。 p { padding-top: 0.30116em; padding-bottom: 0.19884em; /* ... */ } しかし、::before と ::after 擬似要素を利用すると、かんたんにベースライン・グリッドに合わせることができます (Fig 1)。 /* Vertical rhythm unit: 0.5rem */ p { line-height: 1.5rem; margin: 0.5rem 0; } p::before, p::after { content: ""; displa
JavaScript で要素のクラス属性を操作してスタイルを変更するような場合、IE8 には :before/:after 擬似要素のスタイルが再描画されないというバグがある。 <p> <a href="#" class="selected">One</a> <a href="#">Two</a> <a href="#">Three</a> <a href="#">Four</a> </p> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $('p').each(function () { var $links = $(this).find('a'), i = $links.filter('.selected').eq(0).index(), len =
http://css-tricks.com/css-animation-tricks/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約3時間前 Zach SaucierがCSSアニメーションを駆使したテクニックを披露しています。 #1) Jump to another state mid-animation CSS animationで、微妙に数値の違う二つのkeyframe（例えば、.001%）を利用して、propertyを新しい値に即ジャンプする方法。 CSSコード @keyframes toggleOpacity { 50% { opacity: 1; } /* Turn off / 50.001% { opacity: 0.4; } / Keep off state for a short perio
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
