markupframework.orgThis domain may be for sale!
これは使える！rem (root em) 単位を使用したフォントサイズの指定 - IT-Walker on hatena
寡聞につき、rem(root em)なんてフォントサイズの単位があるのを今まで知りませんでした。 ちょっと興味を持って調べてみたところ、結構使えそうなテクニックだったのでご紹介したいと思います。 rem (root em) というのは、「ルート要素（典型的にはhtml要素）に対する相対的なフォントサイズの単位」です。 従来のemは、親要素に対して相対的なフォントサイズの単位でした。そのため、要素の出現位置次第でフォントサイズが変わってしまうことも多く、使いにくい場面も多々ありました。 他にもフォントサイズの指定方法には、ピクセル（px）を用いたものがあります。が、特に今は様々なスクリーンサイズを意識しなくてはならない時代。スクリーンサイズの小さいデバイスでは全体的なフォントサイズを同時に大きくしなければならないこともよくありますが、pxを使用していると、メディアクエリなどを使ってあらゆるフ
5 Cool CSS Hover Effects You Can Copy and Paste
Need a cool hover effect for something on your site? Look no further! We’ve created several custom examples that you can view live for inspiration. If you like the effect, steal it! We’ve got the CSS ready and waiting for you to copy. 19+ Million Digital Assets, With Unlimited Downloads Get unlimited downloads of 19+ million design resources, themes, templates, photos, graphics and more. An Envato
CSSアニメーションの基礎
今さらながらCSS Animationsの使い方が分かってきたので、プロパティなどを簡単にまとめておきたいと思います。 これを書くにあたって、以下の2つを参考にしました。 CSS Animations Editor’s Draft 25 July 2011CSS animations - MDN上のはdev.w3.orgにある、2011年7月25日版のエディターズドラフトです。 ちなみにwww.w3.orgにある仕様は「CSS Animations Module Level 3」です。これを書いている現在、こっちは2009年3月20日版が最新となっています。 基本的に2011年7月25日版のエディターズドラフトをベースに説明したいと思います。なので、現在のブラウザの実装とは異なることもあります。 2つ目のは『Mozilla Developer Network』のドキュメントです。日本語版も
CSS Animationsを使ってローディング用アニメーション
なんとなく思いついたので、CSSでローディングアニメーションを作ってみました。 画像とかcanvas使えよって話ではあるんですけどね……。まあアニメーションの練習ってことで。 今回は『jsdo.it』で作ったので、それを置いておきます。 Firefox 5以上、またはWebkit系のブラウザで動きます。 2020年1月8日 追記： 『jsdo.it』は2019年に閉鎖されましたので、回収できた自分のコードだけデモページに移行しました。 CSS Loading Animation 簡単にですが解説してみたいと思います。 まずHTMLから。 <div class="loading style-1">Now Loading...</div>使うのはdiv1個です。 class名が2つ付いてるのは、最初いくつか作ろうと思ってたからです。 （結局思いつかなかったので諦めましたが……） では次にCSS
CSS3での背景指定方法のまとめ
CSSであれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3現在の仕様です。CSS 背景 & ボーダー モジュール Level 32011年2月15日版の仕様の日本語訳です。プロパティと値の説明はこちらを参考にしました。背景のレイヤー背景は複数のレイヤーを持つことができ、レイヤーの数はbackground-imageに指定されたカンマ区切りの値の数によって決められます。noneの指定も一つのレイヤーを生成します。 背景レイヤーの重なり方ですが、初めに指定したものから手前に来ますので、注意してください。 例として、下のr
Andrew Hoyer | Walking With CSS
Show / Hide Element Borders. The walking man (me) above, is implemented using only CSS3 animations and simple HTML. You can read more about how it was implemented here. Be sure to view this experiment on an iPhone, iPod or iPad (or android device). It's super cool! Short link below: tinyurl.com/csswalk Not working? Watch the video on youtube. Tweet More Experiments
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://tuqulore.com/blog/demo/
http://joelb.me/blog/2012/maintaining-css-style-states-using-infinite-transition-delays/
IDEA * IDEA
Ceaser - CSS Easing Animation Tool - Matthew Lein
Demo: CSS drop-shadows without images – Nicolas Gallagher