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
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Styling for range inputs has improved dramatically since the release of IE 10. It is now possible to generate cross-browser compatible range inputs (sliders) using only CSS. In this tutorial, we will take a basic range input (<input type="range">): Screenshot of a range input, Mac Chrome 38
Firefox Nightly が CSS でスムーズスクロールを実現する scroll-behavior: smooth; をサポート 現在、Firefox Nightly としてリリースされている、Firefox 36 で、scroll-behavior: smooth; が実験的ながらサポートされました。CSS のみでスムーズスクロールを実現することができます。 現在、Firefox Nightly としてリリースされている、Firefox 36 で、scroll-behavior プロパティ、およびその値、smooth が実験的ながらサポートされました。 現状では、デフォルトで無効になっているため、about:config から layout.css.scroll-behavior.enabled、および layout.css.scroll-behavior.property-en
Form系要素スタイルの初期化 ブラウザのForm系要素の初期スタイルをはがすときには、appearance: noneをあてつつ、backgroundやborderなどのリセットをする。 select { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; border: 0; margin: 0; padding: 0; background: none transparent; vertical-align: middle; font-size: inherit; color: inherit; box-sizing: content-box; } しかし<select>だと、WebKit系のを除けば、-moz-apperanceとしているFirefoxでさえも、選択
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. We just covered shape morphing in SVG, where shapes change from one to another. Let’s look at shapes that blob into each other! You know, that gooey squishy blobby effect like droplets of mercury on a surface. I’m not sure who first discovered this was possible on the web, b
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 =
Private content!This content has been marked as private by the uploader.
2014/10/23 この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります techCSS3oldIEpolyfills 2014年9月現在、IE のシェアは過去と比べて劇的に変化しています。 http://gs.statcounter.com/#desktop-browser_version_partially_combined-JP-monthly-201309-201409 を見ると分かるように、 IE11 が全ブラウザの 30% を上回り、IE8,9,10 がそれぞれ 4% 前後の値です。 ここまで来ると、oldIE の対応は完全にマイノリティとなってきており、 出来るブラウザを基準にして作るのがもう当たり前になってきていると言っていいかもしれません。 そんな中、 『IE7,8 などでも、どうしても同じように見せなきゃいけないんだ・・・!』 という非常
https://www.youtube.com/watch?v=FEs2jgZBaQA 1 comment | 1 point | by WazanovaNews ■ comment by Jshiike | 約1時間前 CSSconf EU 2014におけるGoogleのAddy Osmaniの講演です。CSSのパフォーマンス向上に役立つツールを40個+ 紹介してくれてます。 背景 パフォーマンスの最適化において、 ベースラインとしてやること 最小化(minification) 結合(concatenation) 画像の最適化 圧縮(GZip, Zopfli) 非同期スクリプト キャッシュの利用 WOFF2フォント CSSスプライトを使う リダイレクトをしないこと スピードアップ パフォーマンス向上に重要なCSSのインライン化 レンダリングをブロックしないように、急ぎでないアセットの取
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The :placeholder-shown pseudo-class selects the input element itself when placeholder text exists in a form input. Think of it as a nice way to distinguish between inputs that are currently showing placeholder text versus those that are not. input:placeholder-shown { border: 5px solid red; }
背景に超便利!!sassのmixinでcss3グラデーション パート2★ストライプ編 | WEBデザイン&アプリ開発 flexagent ども♪mixinにハマってるwebデザイナーのつかです。 以前ボタンに超便利!!sassのmixinでcss3グラデーション パート1★をご紹介しましたが、 今回はcss3のグラデーションを使ってストライプ柄を作るmixinのご紹介です。 自作mixinでcss3(グラデーション)ストライプを簡単色変え♪ ※私がhsl(色相、彩度、明度)での指定が一番わかりやすいなってことでhslで作られてます。 hslの説明はこちら⇒カラーリング講座 CSS3で追加された hsl(hsla)編 図解付!★ @mixin m-graLineH 縦ストライプ サンプル @mixin m-graLineW ボーダー サンプル @mixin m-graLineLT 斜め
各ブラウザのCSS3の実装も進み、最近では画像を使わずにサイト上のブロックの背景をCSSだけでデザインすることが増えてきていると思います。特にスマホサイトなどではできるだけ画像を使わずに容量をおさえておきたいということから、その傾向が強いと思います。今回は背景パターンとしてよく使われる「斜めストライプ」をCSSのみで作る方法についてまとめてみようと思います。 まず、前準備として以下のようにdiv要素を作っておきます。このdiv要素に対してCSSを指定していきます。 <div class="div2269"></div>それから、斜めストライプを作成する上で必要なCSSは、「linear-gradient()関数」と「background-sizeプロパティ」となります。事前にご確認ください。 linear-gradient – CSS | MDNbackground-size – CSS
以上です。 たったこれだけです。 ※body{ margin:0; padding:0; }が前提です。 解説 まずcalc()とvhの説明を簡単にします。 詳しくは下部の参考を参照ください。 calc()は、見た目の想像通りです、()内を計算してくれます。 vhは、viewport(ブラウザの表示領域?)の高さを100とした高さの単位です。 1vhとするとviewportの1/100の高さになり、 100vhとするとviewportと同じ高さになります。 ということは、 above-Footerのmin-heightは、 「viewportの高さ」から「stickyFooterの高さ」を引いた値になります。 結果、 above-Footerの高さは、小さい値になろうとしてもなれず、 above-Footerの下には、「stickyFooterの高さ」の隙間しか出来ません。 そして、 ab
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く