CSSとSVGで曇りガラスのような効果を作る
2011年の9月に「CSSとSVG filterでガラスっぽい効果をつける」というのを書きましたが、これはFirefoxのみを対象としたものでした。 そこで今回はできるだけ多くのブラウザに対応したものを作ってみます。 完成品Frosted glass effect with CSS & SVG 背景画像にはWetFoto.comによる#246 Wetlook with Beautiful Brunette in Leggings and Jacket. Girl in black jacket, white wetlook leggings and skirt in boots, get wet fully clothed in the sea.を使用しています（リンク先はFlickrです）。 この画像はCC BY-NC-SA 2.0でライセンスされています。 背景画像にはBeryl Ch
nginxのパラメータチューニングとh2o - Qiita
(追記:タイトルが少々煽り気味な気がしたので微妙に変更しました。) h2oとnginxの性能比較 nginxよりも速いとされるh2oですが、実際に自分でもローカルでベンチマークを取ってみました。環境は以下の通りです。 EC2のc4.8xlargeインスタンス gcc (GCC) 4.8.2 20140120 (Red Hat 4.8.2-16) Linux ip-172-31-13-40 3.14.35-28.38.amzn1.x86_64 #1 SMP Wed Mar 11 22:50:37 UTC 2015 x86_64 x86_64 x86_64 GNU/Linux nginx-1.8.0 h2o-1.2.1-alpha1 wrk(ベンチマーク) ベンチマークコマンド 実行するベンチマークコマンドは以下になります。なお、オプションはできるだけRequest/secが大きくなるように調
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
レスポンシブイメージ | Web Design Leaves
以下の情報の方が新しいものになりますので、よろしかったらご覧ください。 「レスポンシブ Web デザイン/レスポンシブイメージ」 スクリーンサイズに適した画像を読み込む方法のメモ。 １つの大きな画像をフルードイメージ（下記）で表示する場合、スマートフォンでもデスクトップ用の大きな画像を読み込むことになり表示が遅くなる。 フルードイメージによる画像の調整 フルードイメージ（Fluid Image） ブラウザのウィンドウ幅に合わせて画像のサイズをフィットさせる方法。 ウィンドウサイズより大きい画像でも、ウィンドウサイズ（または親要素の幅）に応じて、縦横比を保持したまま自動的に画像が拡大・縮小するようにする手法 具体的には、img 要素に対して以下のスタイルを適用する。
次世代HTMLの新仕様「レスポンシブ・イメージ（仮）」についてまとめてみた
レスポンシブWebデザインを実装する際、画像の扱いは一つの課題として残っています。現在、PHPを使用した「Adaptive Images」やJavaScriptを使った「Responsive-Images」などが現実的な対応策としてありますが、どちらもApacheの設定を必要とします。レスポンシブWebデザインが広まって標準的な実装方法の一つになろうとしている今、サーバサイド技術に依存しない解決策が早急に求められています。 そんな中、HTMLの仕様策定の一端を担うWHATWG（Web Hypertext Application Technology Working Group – ワットダブルジーと読む）で、新たな仕様が検討されています。 では、どんな議論がされていて、今どんな状況なのか？ なかなか複雑なことになっているようなので、調べてまとめてみました。 ※この記事は、レスポンシブWeb
何度やっても忘れてしまう、Mac OS Xのスクリーンショット関連の設定コマンドのまとめ
新しいMacを設定する際に毎回検索しているので、スクリーンショット関連の設定コマンドをまとめておきます。ブログを書いたりウェブ制作をしているとキャプチャを撮って加工する機会も多いので、自分好みの設定にしておきたいですよね。ちなみに、GUIで簡単に設定したい場合は Onyx を入れると以下の設定がすべて変更できます。 保存場所の変更 ファイル・タイプの変更 ファイル名の変更 影のあり・なし 多機能ユーティリティ「Onyx」 保存場所の変更 デフォルトだとデスクトップに保存されてしまうので「ピクチャ」内にscreenshotsフォルダを作って保存先に指定してます。 defaults write com.apple.screencapture location /Users/ユーザ名/Pictures/screenshots ファイル・タイプの変更 PNGがデフォルトなので、僕はそのままですが一
Bacon.jsで眺めるFunctional reactive programming - ryiwamotoのブログ
JavaScriptのFunctional reactive programming(FRP)ライブラリ「Baconjs」を使ってFRPの考え方を勉強してみたメモ。 なお、このメモはFRPの勉強のためにいくつかの資料をざっくりまとめただけなので、Bacon.jsの使い方は解説しない。 なのでBacon.jsの使い方を知りたいだけなら元記事を読んだほうが良い。 Bacon.jsのReadme Bacon.jsのチュートリアルブログ(これとかこれ) 三行で FRPでは従来のプログラミングでは間接的にしか扱えなかった「徐々に変化する値」を第一級のオブジェクトとして扱うことができる。 さらに関数型のcompositionalな性質が合わさって素敵。 Bacon.jsは良いものだ。 従来のプログラミングでは時間とともに変化する値の扱いが難しい 例えば次のフォームの例を考えてみる。 <form> <i
これって、ドメイン駆動設計？
エリックのDDD本を読んで30分で挫折した僕が考える、こーゆーことをやるのがドメイン駆動設計なるものなんじゃないの、という資料です。
Pixlr.com
Photo Editor - Photoshop Online by Pixlr - Free Image Editing Tools Now, there are even more compelling reasons to choose Pixlr as your go-to solution for all your online image editing requirements, particularly when you're looking for a powerful "photo editor." Whether you're inclined towards traditional desktop-style photo editing or prefer a more contemporary approach, Pixlr has you covered. Pi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
