[CSS]CSS3の美しいエフェクトを備えたナビゲーション -Circle Navigation Effect
デモページ 写真画像の下の半透明のパネルには画像の説明文とナビゲーション（アローとテキスト）が配置されており、ホバーするとサークル状にアニメーションで拡大しながらサムネイル画像に変わります。 2枚目の画像 [ad#ad-2] 実装 画像ギャラリー自体はjQueryをベースに作られており、ここではナビゲーションのエフェクトの実装方法を紹介します。 HTML ナビゲーション箇所はテキストと画像をa要素で内包します。 <div class="cn-nav"> <a href="#" class="cn-nav-prev"> <span>Previous</span> <div style="background-image:url(../images/thumbs/1.jpg);"></div> </a> <a href="#" class="cn-nav-next"> <span>Next</
企画書やプレゼン資料のチャート図が簡単キレイに作れるWEBアプリ「Cacoo」 | ライフハッカー・ジャパン
企画書やプレゼン資料を作っていると、チャート図や構成図やネットワーク図など、図解しなければいけないことも多いですよね。でも、分かりやすくて見やすい図を描くのは、よっぽど慣れた人でない限り難しいものです。 WEBアプリの「Cacoo」を使えば、ドラッグ＆ドロップで簡単にチャート図が作れちゃいますよ。 Cacooには、アイコンやクリップアート画像がかなり豊富にありますので、サイトマップやフローチャートからマインドマップまで、かなり色々な図に対応できます。画像を選んだら、ドラッグ＆ドロップで好きな位置に置き、矢印や線でそれぞれを繋ぎます。位置や大きさを変更するのも簡単です。 また、Cacooは複数ユーザーでの共同作業にも対応しているので、編集中の図をリアルタイムで他のメンバーと一緒に作業することもできます。 使い方については、動画を見てもらえれば分かりやすいでしょう。パワポなどを使ったことがある
cssとHTMLのみで擬似的な3D表示を実現するCSS 3D Meninas - かちびと.net
これ凄いです。僕が知らなかった だけかも知れませんが、この動き でjs等も使用していないのは驚き でした。cssとHTMLのみでマウス オーバーした際の画像に3D効果 を出しています。 動作はIE8、Firefox3、Opera9、Safari 3、Chrome4などで動作するそうです。 マウスオーバーし、左右に動かすと画像も動きます。 複数の透過レイヤーを重ねてhoverで動きを出しているみたい。何枚かの画像と下記のような画像を使ったｃｓｓスプライトを使って実現しているようです。 この効果はmootoolsやjQueryのプラグイン(mParallaxやjParallax)を使えば同じ表現を実現出来ます。 実用性は期待できませんが、cssとHTMLだけっていうのが凄い。ソースは以下でご確認下さい。 Pure CSS 3d Meninas (説明ページ：CSS 3D Meninas)
超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」:phpspot開発日誌
Programming and Designing for the Web FrogJS Javascript Gallery FrogJS is a simple, unobtrusive javascript gallery. It is not a replacement for other thumbnail galleries such as Lightbox JS, but rather a different way of showing galleries. 超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」。 以下のデモサイトを見ると分かりますが、今までにない超クールなスライドショーを実装できます。 実装方法は、まずスクリプトを読み込みます。 <script type="text/javascript" src="scripts/p
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PNGとGIFとJPEG…Web用画像の書き出し、どんな風に使い分けていますか？［2011年7月現在］ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
[JS]画像のキャプションをスタイリッシュな動きでスライド表示させるスクリプト -slidingboxes
youmos.com
