You already know that inline styles are “bad practice.” Inline styles aren’t reusable like CSS in separate files is, and thus, inefficient bloat. Unless of course, when it isn’t. There are some instances where inline styles make perfect sense. Perhaps you have an application where user’s pick their favorite color, and then you set the background of the body to that. Using an inline style in that c
せめてWebKitに実装されてからとか思ってたけど、CSS Image Values and Replaced Content Module Level 3がLast Callになったのでいい機会ということにしてelement()関数についてエントリを書く。element()関数は任意のIDを引数に取ることができ、その要素を画像として参照できるというなかなかの荒業な関数。具体的には画像のサムネイルを簡単に作成できるとかそういうものをイメージするとわかりやすいと思う。 Demo: Filmstrip View いわゆる「フィルムストリップ」のようなものを作るデモだけど、element()はまだFirefox 4以降でしかサポートされていないので、ChromeやSafariなどでは意図した通りに動かない。Firefoxなら下に並んだサムネイルをクリックすると大きな画像が表示される。切り替えやア
CSS3 の border-radius を使えば、ボックスの角を丸めることができますよね? でも、ベベル(丸くない border-radius)を付けるにはどうしたらいいか、ずーと気になっていたので、調べてみたら見つけました! ということで、今日の記事では「LEA VEROU」で紹介されていた、↓みたいにボックスの角にベベルを付ける方法を紹介します。 考え方 この方法では 4つの background-image を使います。 まず最初に、background-size を使って背景を4等分します。そして、それぞれの角から斜めの線形グラデーションで、透明を塗りこむことで角を見えなくするというのがこのからくりです。 この「等分すれは、複数のグラデーションを指定できる」というテクニックは、他にも応用できそうなので是非覚えておいてください。 スタイルはこんな感じです。実際に使う場合は、以下のク
This is a quick CSS3 experiment trying to replicate the Dock of OS X, complete with labels, animations, reflections and indicators. It uses CSS transitions for the magnification effect and the :target pseudo-class and CSS animations for the bouncing effect. A short note on compatibility: Firefox 4 doesn't support CSS animations but degrades gracefully. Chrome seems to mess up the bounce animation
こんなこと気にするのは私くらいだろうな、って思ったので、早速記事に。 システムソフトウェア バージョン4.10で更新される機能 SCE、PS3をVer.4.10にアップデート。ブラウザ表示改善 - AV Watch PS VitaがWebKitってこともあるし、更新に関する文面がどことなく引っかかったので、User Agentを調べましたよ。そしたら、やっぱりWebKitでした。 Mozilla/5.0 (PLAYSTATION 3 4.10) AppleWebKit/531.22.8 (KHTML, like Gecko) ちなみに、今までのPS3は独自ブラウザでした。 PS3のWebブラウザ、独自エンジンだからできること - ITmedia User Agentもあっさり短いものでしたけど、ファームウェアv4.00以前が1.00のままだったかは調べてません。 Mozilla/5.0 (
ついに Android 4.0 向けに Chrome が公開されました。やはり開発者としては HTML5 の準拠度やパフォーマンスを調べてしまうのは仕方ないですね。 まずは Android 4.0 標準ブラウザと HTML5test - How well does your browser support HTML5? で大まかに比較してみました。今回は Nexus S を使って調べました。 Android 4.0 標準ブラウザ Chrome for Android Video - H.264 support × ○ Video - WebM support × ○ Audio - PCM audio support × ○ Audio - AAC support × ○ Audio - WebM support × ○ Session History × ○ Custom scheme
iTunes の曲の試聴時間がどうやら 90 秒とか、すげえ長くなってて、んじゃあこれだーっと流しといたら作業用 BGM にいーんじゃねーかと思ったんだけど、ランキングとかは連続再生してくれへんのですね。んじゃあ、HTML5 とか node.js の練習かねてつくってみっかーちゅうことでできました。スクレイピングしまくりなのでソースだけ。Heroku にアップしたら動くよ。(Safari & Chrome のみ) つかってるのは HTML5 (Audio, History), CSS3 (Transform, Transitions), CoffeeScript, Backbone.js, Stylus, haml-js, Bootstrap, node.js (express, request, async, nstore, node-dev), Heroku らへん。開発環境は Tex
米Googleが、Dropboxと同様のクラウドストレージサービスを近くリリースするという。この件に詳しい関係者の話としてWall Street Journal(Web版)が2月8日付けで伝えた。 「Drive」と呼ぶこのサービスは、普及が進むスマートフォンやタブレットなど多様なデバイスからファイルにアクセスするためのものだという。写真や動画、ドキュメントファイルなどを保存でき、ファイルを簡単にアップロードするためのモバイルアプリも用意されるようだ。 新サービスは向こう数週間中にもリリースされるという。基本は無料で、より大容量を求めるなら有料になるというクラウドストレージでおなじみのモデルを採用するようだ。 記事によると、Googleのラリー・ペイジCEOは5年前、クラウドストレージ「G Drive」をリリースしようとしたが、断念したという。またDropboxのドリュー・ヒューストンCEO
コーディングで時間のかかる要素の1つとして、id,class名や画像名などの命名規則が挙げられます。 特に中規模、大規模のサイトで、適当な名前を付けると名前が被る確率が上がり、 その結果、画像の上書きや不要なプロパティがかかってしまうなど、よくない結果になることも考えられます。 一つの例として、私の命名規則について紹介してます。参考程度に読んで頂けると幸いです。 カテゴリに分類して、つなげる。 ページのどの位置に属すか分類し、つなげる方法を取っています。 基本的に、CSSや画像名は同じにします。同名にすることで、名前を考える手間も省け、変更箇所の特定がしやすくなります。 例: CSS #top-side-nav 画像 top-side-nav-home.png top-side-nav-company.png 上記のように命名することで、 デザインを見なくても、どのような箇所に使われている
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く