[B! tips][css] signamoのブックマーク

[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル

iPhoneなどの小さいサイズのモニターをはじめ、2560pxの大きいサイズのモニターなど、それぞれの幅に適したレイアウトを自動的に適用するMedia Queriesをしっかりと身につけるためのスタイルシートのチュートリアルを紹介します。 Adaptive & Mobile Design with CSS3 Media Queries [ad#ad-2] 下記は各ポイントを意訳したものです。デモページの確認 HTML CSS Media Queries 完成したデモの確認デモページの確認チュートリアルの前にまず、それがどのように見えるかデモページをチェックしてみてください。このデモページはHTML5+CSS3 Media Queriesで作成されており、ユーザーが使用しているビューポートのサイズに適したレイアウトに自動調整して表示されます。デモページ左から、ノーマル、ナロウ、ス

signamo 2012/01/14

@media screen and (max-width:*px){..

リンク

安全な@font-faceの書き方(抄訳)

Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。安全な@font-faceの書き方以下は訳注と私見。条件付コメント面倒くさいというのはわからなく

signamo 2011/05/04

リンク

[CSS]ブラウザのサイズに合わせてスタイルシートを変更する方法

ブラウザのウインドウサイズに合わせて、スタイルシートを変更し、レイアウトを最適化する方法をCSS-Tricksから紹介します。 Different Stylesheets for Differently Sized Browser Windows デモではブラウザのサイズを変更すると、それに応じてレイアウトが変わります。

signamo 2010/11/20

リンク

Text Embossing Technique With CSS | Steve Reynolds Blog

If you’re like me, you love embossed text like it is going out of fashion. In fact, it’s liked so much right now by many web designers that it featured in Smashing Magazines “Web Design Trends for 2009” article which firmly puts it up there! In this article I will show you a couple of real world examples of this, as well as describing how to implement this effect with CSS. More importantly, I give