吹き出しのような絵をCSSで描こうとするときに、ポイントとなるのはぽちっと飛び出した3角形の部分なんですが、手動でもそのためのCSSは書けなくはないけど、頭の中でいろいろ考えながら書かなきゃいけないので汗をかきます。
そんなわけで、ちょこちょこっと数値などを指定してあげるだけで吹き出しみたいなの（これをCSS Arrowと呼んでいるようです）が作れるサイト「cssarrowplease」です。
うむ、楽だ。
そんなわけでとりあえずブックマークしておきました。
あ、でもここで作ったCSS ArrowってIEのちょっと古いやつで見たらどうなるんだろうね。
stroll.js is a collection of CSS list scroll effects
stroll.js - CSS3 List Scroll Effects - The Changelog - Open Source moves fast. Keep up.
こんな感じのリストが
スクロールするときにこんな感じでスクロールしていきます。
パターンは全部で13種類。
ゆっくりスクロールしてもいいのですが、高速でスクロールさせると面白いのもあります（逆に面白くなくなる場合もあります）。
以下のサイトにアクセスして各リストの上でマウスでスクロールさせればその効果が見れます。
多分モダンブラウザ系じゃないとうまく機能しないと思うのでIE使っている人はIE以外のブラウザで見た方がいいんじゃないかと思う次第です。
http://lab.hakim.se/scroll-effects/
The plugin takes a dom element, slices it into parts and arranges them like a folded paper in 3d space.
Paperfold CSS | Demo Studio | Mozilla Developer Network
developer.mozilla.orgで紹介されていたのでFirefoxでしか動かないのかな、と思ったらSafariでも動いたのでご紹介。
こんな感じのデザインを実現することができます。
単なるデザインじゃなくてこの折りたたみ具合などをJavaScriptで変更することもできます。
そんなのを体験できるデモページはこちら。利用しているブラウザでうまく動かない時は素直にFirefoxで試してみてください。
リンク先の「Paperfold CSS」のページには開発者さんのコメントなどが掲載されているのですが、実装にあたってはいろいろたいへんだったみたいです。
Inspired by the Glyphicon set that comes with Twitter Bootstrap 2.0, Font Awesome is designed from scratch for a full array of web-related actions.
Font Awesome, the iconic font designed for use with Twitter Bootstrap
Twitter Bootstrapにはよく使われるアイコンをフォント化してWeb Fontとして利用できるようにしている部品があるのですが、それにインスパイアされて作られたのが「Font Awesome」です。
Twitter BootstrapのWeb Fontはここで見ることができるのですが、ぱっと見た感じは「Font Awesome」と同じようなものの、じっくり見ると線の太さとか角度などが違ってて「ああ、インスパイアってのはこういうもんだよな」という正しい世界が繰り広げられています。
アイコン画像がフォントになるとアイコンサイズを自由に大きくしたり小さくしたりできますし、色も変えられるしボタンの中に入れ込むこともできるようになります。
ということで、こういうアイコンを活用して素敵なWebページを作ってみてはいかがでしょうか？
Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 -- no jQuery knowledge required!
Sequence.js - The jQuery Slider Plugin with Infinite Style
最近のWebページでは大きな写真（画像）が左右にスライドして切り替わるといった効果がよく使われているのですが、そんな効果を実現するjQuery用プラグインです。
いちおうまだベータということなので最終版が出るのを待つのもよいのですが、とりあえず以下のデモを見て期待わくわくしてみてください。
次のスライドに映る前に一度ぼわっと消える、ってのが単にスライドさせるだけじゃなくていい感じです。
テキストとオブジェクトが別のアニメーションをしながら切り替わっていきます。これが簡単に実装できるならかなりコストパフォーマンスが高いですね。
Appleのサイトで見たことがあるいろいろな動き方をするやつです。これについてはモダシンで前に書いたこの記事も参考にしてみてください。
アップルの「iPhone 4S」のWebページで使われているCSSアニメーションが面白い
で、このSequence.jsですが、以下のようなセールスポイントのようです。
・Unique transition styles created using CSS3
・Supports all modern browsers
・Gracefully degrades in older browsers
・Supports touch devices and swiping
・Supports responsive layouts
・20+ options (and more to come!)
IE7でも利用できると申しております。それってすごいな。
Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
It's easy to understand why thousands of developers use SimpLESS. It compiles your *.less files into valid CSS.
LESS、って普通の人は知らないでしょうね。まあ、それはそれでいいのですが、LESSは素晴らしいのですが、ツールを使わないといちいちCSSにコンパイルしなきゃいけない、というのが面倒です。
codekitというアプリが現在β版として公開されていて、それがLESS、SAAS、Stylusのコンパイル以外にCoffeeScriptの変換までやるので非常にいい感じなのですが、正式版は$10ぐらいになる、ってのと、LESSだけでいいや、って人にはToo Muchであるというところがちょっとあれだなあ、と思っている人も少なくことでしょう。
そんな「LESSだけでいいや」って人にぴったりなのが、この「SimpLESS」です。
なんといっても無料ですし、Mac、Windows、Linuxで利用できます。
単にLESS→CSSだけじゃなくCSSファイルの圧縮（余計なコードを取り除くやつ）とかLESSファイルを保存する度に自動でCSSに変換してくれたりとcodekitのLESSの部分とほぼ同じことが行えます。
そんなわけでLESSを活用して作業時間を短縮して余った時間で人生を楽しみましょう！
SimpLESS - Your LESS CSS Compiler
This is an extension to the Twitter Bootstrap framework. It makes creating pretty buttons easy.
Beautiful Buttons for Twitter Bootstrappers
TwitterのBootstrapでは予めボタン用のクラスがいろいろ用意されているのですが、それ以外にオリジナルなボタンを作ろうと思うと、それらのテイストとちょっと違う感じになってしまい結構苦労することになります。
そんなときに活用できるのが「Beautiful Buttons for Twitter Bootstrappers」というタイトルのサイトです。特にサイト名はないみたいですね。
ボタンのデザインは上図のようにスライダをいじくるだけでできるみたいです。で、あとは生成されたCSSをページに追加してあげればOK、って感じです。
上のスクリーンショットのページの下に方には既に作成済みのサンプルのようなものがありますので、それをそのまま利用する、ってのもありかと思います。
Bootstrapバージョン1で遊んでいるうちにバージョン2がリリースされてしまいました。
1.4からの変更点は以下の通りです。
Scaffolding
Grid system
Responsive (media queries)
Base CSS
Typography
Code
Tables
Buttons
Forms
Icons, by Glyphicons
Components
Button groups and dropdowns
Navigation
Dropdown menus
Labels
Thumbnails
Alerts
Progress bars
Miscellaneous components
Added documentation for the well component and the close icon (used in modals and alerts)
Javascript plugins
Heads up! We're rewritten just about everything for our plugins, so head on over to the Javascript page to learn more.
Popovers
New plugins
この新しいJSプラグイン、面白いですね。
ああ、また勉強しなくっちゃ・・・。
このサイト、便利か便利じゃないかってのは多分使う人によって意見が分かれるところかと思うのですが、とりあえずそういう判断は読んだ人/利用した人に任せる、ってことでとりあえずご紹介。個人的には使わないかなあ。
あ、会員登録とかそういう面倒なことなくすぐに利用できます。
Bear CSS is a handy little tool for web designers. It generates a CSS template containing all the HTML elements, classes & IDs defined in your markup.
Bear CSS - Helping you build a solid stylesheet foundation based on your markup
HTMLファイルをアップロードするとそこで使用されているHTML要素やクラス、IDを抽出してCSSファイルのひな形を作成してくれます。
CSSのひな形ファイルはアップロード＆解析が済むとすぐにブラウザ内に表示されるので、後はそれをコピーして各要素にデザイン要素を適用していく、という流れになります。
クラス等の定義のし忘れがなくなる、ってのがメリットなのかなあ。でも定義し忘れててもブラウザで表示されたページを見れば作った人には一目瞭然どこが定義忘れかわかるしなあ。
そんなわけで、もしかしたら気に入る人がいるかもしれない、というでご紹介しました。
PHP Simple HTML DOM ParserとかUploadifyというのを使って作られているそうです。
3D transforms are awesome, but they're even cooler with lighting effects!
Interactive CSS3 Lighting Effects
CSS3の3D transformsは凄いけど、そこにライティング（光）効果が絡むともっとクールになるよね、ってことで、実際に実装してみたらほんとにクール！
サイトにアクセスすると以下のようにAppleっぽい反射が施されたiPadがあるのですが、
このiPadをマウスでいじくってみるとあら不思議。光の反射効果がリアルタイムに画像に反映されるではありませんか！
しかもiPadの影までちゃんと変化しちゃうし！
The specular highlights are created with CSS gradients and masks. The cast shadow relies on box shadows and transforms. (Best in Safari)
その反射はCSSグラデーションとマスクで実現されているようです。Best in SafariということでSafariで見たんですが、Chromeでも大丈夫でした。
汎用ライブラリ化されていないので使い方は面倒かと思いますが、これ見た誰かがきっとなんかやってくれそうな気がします。
