はじめに WebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション 一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほ
Crafting link underlines on Medium などで紹介されている、リンクの下線をグラデーションの背景とテキスト・シャドウで表現する手法をこのサイトでも試してみました。やろうとしているのは、下線の色、位置、サイズのコントロールと、ディセンダーと直接まじわらずグリフをまたぎ越すような表現。 a { background: linear-gradient(#e00000 50%, transparent 50%) 0 1.25em repeat-x; background-size: 1px 2px; text-shadow: 0 1px white, 0 -1px white, 1px 0 white, 1px 1px white, 1px -1px white, -1px 0 white, -1px 1px white, -1px -1px white; } @me
CSS で角度を扱う機会が増えてきたので、三角関数を中心にいくつかの数学関数を Sass 関数として実装してみてる。「三角関数を中心に」とかさらっと書いてるけど、書いてる本人はタンジェントとか高校で習ってないと言い張る程度の理解なので注意。書いてるうちに芋づる式に増えて手に負えなくなってきたところで GitHub に公開することにした。 terkel/mathsass · GitHub ほんとは Ruby のモジュールで書けば簡単かつ精度も高いだろうし、将来 Sass のネイティブに実装されれば用なしになるわけだけど、勉強になるのでやってて満足度は高い。 これ系の Sass 実装でまとまったものは adambom/Sass-Math と Team-Sass/Sassy-math ぐらいしか見つけられなかったし、これらの中でもものによってバグってるっぽいのもあったので、ほかに 404 Blo
What are Frameworks? 22 Best Responsive CSS Frameworks for Web Design This post aims to present what frameworks are and what they are used for, alongside a selection of the best that can be got for free on the internet. In this way, we want to help web designers and developers who are starting out to discover new resources and possibilities, as well as setting out concepts that can sometimes be to
CSS Cascading and Inheritance Level 3 W3C Recommendation, 11 February 2021 This version: https://www.w3.org/TR/2021/REC-css-cascade-3-20210211/ Latest published version: https://www.w3.org/TR/css-cascade-3/ Editor's Draft: https://drafts.csswg.org/css-cascade-3/ Previous Versions: https://www.w3.org/TR/2020/PR-css-cascade-3-20201222/ https://www.w3.org/TR/2020/CR-css-cascade-3-20200817/ https://ww
This is a very quick tip, about a pet peeve of mine in almost every CSS animation I see. As you may know, I’m a sucker for reducing the amount of code (as long as it remains human readable of course). I demonstrated a very similar example in my “CSS in the 4th dimension” talk, but I recently realized I never blogged about it (or seen anyone else do so). Lets assume you have a simple animation of a
Twitter でもポストしましたが、Mozilla Hacks で次期 Firefox 4 における calc() 機能の実装についてアナウンスされていました。calc() 自体は CSS3 で策定中の機能としてかなり前から存在しますが、まだサポートしているブラウザがないので、馴染みはないかもしれません。Firefox にしてもまだサポート予定の段階ですし、正式に使えるようになるのは先の話ではありますが、calc() を使うことでどんなことができるようになるのか簡単に触れてみたいと思います。 Twitter でもポストしましたが、Mozilla Hacks で次期 Firefox 4 における calc() 機能の実装についてアナウンスされていました。 calc() 自体は CSS3 で策定中の機能としてかなり前から仕様が存在しますが、まだサポートしているブラウザがないので、馴染みはない
画像の幅をコンテンツに合わせてフレキシブルにしたい場合、親要素の幅を超えないようにするには CSS の max-width プロパティに 100% を指定する。 img { max-width: 100%; border: 1px solid silver; padding: 0.25em; } ただ、画像にパディングやボーダーを持たせた場合、その分が親要素の幅より大きくなってしまうことがある (Fig 1)。 Fig 1: パディングとボーダーを持つ画像に `max-width: 100%;` を指定すると、親要素の幅を越えてしまうことがある これをつねに親要素に収めるようにするには、box-sizing プロパティを利用して画像の幅がパディングとボーダー込みで算出されるようにする、という手がある。 img { max-width: 100%; border: 1px solid sil
CSS Inline Layout Module Level 3 W3C Working Draft, 18 December 2024 More details about this document This version: https://www.w3.org/TR/2024/WD-css-inline-3-20241218/ Latest published version: https://www.w3.org/TR/css-inline-3/ Editor's Draft: https://drafts.csswg.org/css-inline-3/ Previous Versions: https://www.w3.org/TR/2020/WD-css-inline-3-20200827/ https://www.w3.org/TR/2020/WD-css-inline-3
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don’t think Facebook sports the look anymore, but it’s still rather neat. You might think it would be as simple as this: #lightbox { backgrou
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrote: As a web developer, learning the internals of browser operations helps you make better decisions and k
If you’ve used definition lists (<dl>) you’re aware of the problem. By default, <dt>s and <dd>s have display:block. In order to turn them into what we want in most cases (each pair of term and definition on one line) we usually employ a number of different techniques: Using a different <dl> for each pair: Style dictating markup, which is bad Floats: Not flexible display: run-in; on the <dt>: Brows
Places it’s tempting to use `display: none;`, but don’t You want to hide something on a page, so: .hide { display: none; } But wait! By applying that class to an element you’ve immediately made that content “inaccessible” by screen readers. You’ve probably known this forever, but still, the poison apple sneaks into our code once in a while. I don’t want to re-hash all the specifics. Your best bet
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
