ネットで見かけたWebテク
1. 30 great websites with parallax scrolling | Awwwardshttp://www.awwwards.com/20-great-websites-with-parallax-scrolling.html
パララックス
最近のWebサイトでの使われ方は、
Curtain.
![図1 視差スクロールを使ったWebサイトのショーケース 図1 視差スクロールを使ったWebサイトのショーケース](/assets/images/design/clip/01/weekly-web-tech/201204/26/thumb/TH800_001.png)
2. CSS3を使うにあたって知っておきたいIE対策のまとめ|Webparkhttp://weboook.blog22.fc2.com/blog-entry-315.html
CSS3で追加された機能を使う場合の、
以下のようなことについて、
- CSS3セレクタへの対応にはSelectivizr.
jsを使う - CSS3プロパティへの対応にはCSS3 PIEかcssSandpaperがおすすめ
- Internet Explorer独自のfilterを使って回転、
シャドウ、 透明度などを指定する
また、
![図2 CSS3を使う場合のIE対策について 図2 CSS3を使う場合のIE対策について](/assets/images/design/clip/01/weekly-web-tech/201204/26/thumb/TH800_002.png)
3. jQuery NailThumbhttp://www.garralab.com/nailthumb.php
細かい設定ができる、
指定したサイズのサムネイルを作成できるのですが、
画像に重ねてキャプションなどの文字を入れられますし、
サムネイルは元画像が縮小表示されているだけなので、
![図3 サムネイル画像を作成できるjQueryプラグイン 図3 サムネイル画像を作成できるjQueryプラグイン](/assets/images/design/clip/01/weekly-web-tech/201204/26/thumb/TH800_003.png)
4. 20 Examples of Responsive Web Design | Urban Riverhttp://www.urbanriver.com/20-examples-of-responsive-web-design.html
レスポンシブWebデザインのギャラリーです。オバマ大統領のサイトもSony USAもレスポンシブWebデザインなんですね。
サムネイル画像が大きいのはいいのですが、
![図4 レスポンシブWebデザインのギャラリー 図4 レスポンシブWebデザインのギャラリー](/assets/images/design/clip/01/weekly-web-tech/201204/26/thumb/TH800_004.png)
5. Creative ‘About’ Pages in Web Designhttp://skyje.com/creative-about-pages/
Aboutページのデザインギャラリーです。クリエイティブな、
ところで、
「このサイトについて」
![図5 Aboutページのデザインギャラリー 図5 Aboutページのデザインギャラリー](/assets/images/design/clip/01/weekly-web-tech/201204/26/thumb/TH800_005.png)
そのほか、
- ノイズのパターン画像をオンラインで生成出来るWebサービス・
Noise Texture Generator - かちびと.net
ノイズの繰り返しパターンを生成できるサービスの紹介です - Interesting And Useful Color Scheme Generators - 25 Tools
カラースキームを作成できるサービスをまとめています
先週の気になるWebサービス
Free Tools to Search and Identify A Fonthttp://www.graphicmania.net/free-tools-to-search-and-identify-a-font/
今回は、
WhatTheFontとWhat FontIsは、
印刷物やポスターなどに使われているフォント
WhatTheFontには、
IdentiFontやbowfinprintworksは、
![図6 フォントを探すためのWebサービスいろいろ 図6 フォントを探すためのWebサービスいろいろ](/assets/images/design/clip/01/weekly-web-tech/201204/26/thumb/TH800_006.png)