CSSで斜めに線を引くようなことをするには多少なりとも工夫が必要だった。つまりCSSで作る吹き出し(もう5年前の記事だ)のようにborderプロパティーを使って頑張るしかなかったわけだ。今はlinear-gradient()があるので直観的に作ることができるようになった。しかしきれいに引くとなるとまだ工夫が必要そうだ。 Demo: CSS Diagonal Line borderプロパティーを使ったもの、linear-gradient()を背景で使ったもの、Data URI化したSVGを背景に使ったもの、以上の計3つのデモを作った。 .lg { background-image: linear-gradient( to right bottom, transparent 50%, #f0f 50% ); background-repeat: no-repeat; background-si

増えてきたフルスクリーンでオーバーレイの検索ボックスだが、まだこれといった無難な実装方法はないように見える。今だとvw/vh/vmin/vmax単位を使ってレイアウト、:target擬似クラスを使ってトグルという形にすれば、ほぼCSSで実現できそうだ。 Demo: Fullscreen Overlay Searchbox デモではShow Searchboxというリンクをクリックすると検索ボックスが表示され、検索ボックスの左上にある✖をクリックすると閉じることができる。実際のウェブサイトではリンクの代わりに虫眼鏡のアイコンでも使ってやれば良いだろう。 マークアップ <aside id="search" class="searchbox"> <h1>Search this site</h1> <form> <input class="query" placeholder="Enter sea

Will Google Fonts Ever Be Shut Down?という記事を読んだ。とてつもない数のウェブサイトで利用されているGoogle Fontsが果たしていつまで無料で自由に使えるままなのかを、今のGoogle Fontsの状態とその持つ意味から考察されてる。現状ではメリットがあるので提供しているけれども、それがコストに見合わなくなったらすぐやめるんじゃないかみたいな悲観的な観測で終わる。 Google Fontsからビジネス・モデルのようなものがよく見えてこないことと一部の限られたユーザーにのみ高く評価されていることが、ジャンルがまったく違うがGoogle Readerと重なるところがあるのは少しわかる。それを考えるとサービスの停止もありそうと考えてしまうのもわからないこともない。でも悲観的になるのはちょっとわからない。 それほどコストはかかっていないと思うし、とんでもな

今までは主にアニメーションGIFで作られていたローディング・アイコンをCSSアニメーションで作るみたいなのが流行っている。面白いとは思うし、ちゃんと作ればスケーラブルなので便利そうでもある。けれどもローディング・アイコンを表示するための空要素が必要になり、かつ後にそれを消さなくてはならない。CSSだけだと面倒くさそうだ。 どういうローディング・アイコンかはこの際問題ではないので、とりあえずmain要素以下に何かしら(仮にサムネイルとする)をロードするまでローディング・アイコンを表示することを考えてみる。普通はJavaScriptでローディング・アイコンの追加→サムネイルのビルド→ローディング・アイコンの削除→サムネイルの追加とやるわけだけど、ローディング・アイコンの追加と削除でDOM操作を伴うのはコストがある気がする。 <main id="result"> <div class="spin

Feedlyはなかなか素晴らしいフィード・リーダーだと思う。カード・レイアウトでざっと流し読みしつつ気になったのがスッと取り出せるまたはタブで開けるというスタイルは好き。最近はここが勝負とばかりにGoogle Reader互換APIを提供したり精力的で良い。それでも引っ越してはいけない。購読しているRSSのリストをOPMLでエクスポートできるようになるまでは。 OPMLでのエクスポートをサポートしないということは、二度とそこから引っ越せないということとほぼ同じ意味を持つ。人によっては購読数は50くらいかもしれないけど、それでもその50を別のフィード・リーダーに移すことを考えたらぞっとする。そのうち対応されるとは思うし、プライオリティーは高そうなのでそれまで待った方が良い。 それまでは……フィード・リーダーを読まない日々というのも良いのでは？ 追記 OPMLでのエクスポートがサポートされたの