Jon Combe | Code | HTML clocks using JavaScript and CSS rotation
Warning: This isn't going to work in any currently available version of Internet Explorer* or many older browsers. The two clocks below are just HTML. There are no Adobe Flash files or my beloved <canvas> going on, just regular <div> and <img> tags. The way it works is by taking those images in an { overflow: hidden } <div> and rotating them, via JavaScript, using the proposed CSS transform proper
CSSでトランスフォーム：変形処理「transform」の基礎 - builder by ZDNet Japan
ウェブページに表示した文字や画像を回転したり、歪めたりすることができれば便利なのに――そう考えたことはないだろうか。CSSのトランスフォームの機能を利用すれば、「回転」「拡大・縮小」「スキュー（シアー）」「移動」の4種類の変形処理を簡単に適用することができる。 トランスフォームの機能を利用する トランスフォームの機能を利用するには、transformプロパティを利用する。現時点ではSafari 3.1以上とGoogle Chrome、Firefox 3.1（ベータ版）が対応しており、SafariとGoogle Chromeでは-webkit-transform、Firefoxでは-moz-transformと記述する。 たとえば、次のようなサンプルを用意してトランスフォームの処理を適用してみよう。ここでは、横幅300ピクセルの黄色いバーの中央に文字を表示している（サンプル01）。
水滴で文字を描くチュートリアル -Rain Drops
Rain Drops サイトには、キャプチャによるチュートリアルの他に、ビデオやRain Dropsのスタイルファイル、PSDがダウンロードできるので、至れり尽くせりです。 テキストの加工が、チュートリアル通りにするとCS 2でひどい事になってしまったので、下記のサンプルを作成した際の手順です。 テキストを水滴らしくなるフォントを選択。 色は黒。 テキストを白い背景のレイヤーと結合。 そのレイヤーを、次の手順で加工。 [フィルタ] - [ピクセレート] - [水晶] セルの大きさ：5 [フィルタ] - [ぼかし] - [ガウス] 半径：1 pixcel [イメージ] - [色調補正] - [レベル] 入力レベル：160, 1.00, 190 チャンネルを使ってテキスト以外を削除。 Rain Drpsのスタイルを適用。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
