クリックで水滴を落としたようにアニメーションさせられるｊQueryプラグイン「jQuery.twinkle」:phpspot開発日誌
クリックで水滴を落としたようにアニメーションさせられるｊQueryプラグイン「jQuery.twinkle」 2012年10月03日- jQuery.twinkle a jQuery plugin to get the visitor's attention via visual effects larsjung.de クリックで水滴を落としたようにアニメーションさせられるｊQueryプラグイン「jQuery.twinkle」 どこをクリックしたか、分かりやすくする為に使えそうです。何かのデモをする際にも、プレゼン等で見ている人にどこをクリックしたか分かりやすくするために使えそう 単なる円形にアニメーションするだけではなくて、色々な効果が選べるのも特徴 どんどんWEB上での表現が豊かになっていきますね 関連エントリ アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプ
HTML内にPDFを埋め込めるJSプラグイン集:phpspot開発日誌
7 Best jQuery & JavaScript PDF Viewer plugin with examples HTML内にPDFを埋め込めるJSプラグイン集。 通常PDFというとPDFページにリンクして直接開くというものが多いですが、こうしたプラグインを使うことで、HTMLの中にIFrameのようにPDFを埋めこんで表示が可能です。 ブラウザプラグインを使うものや、GoogleDocを使うもの、直接JSでレンダリングしてしまうものなど様々まとまっています。 リンク先PDF、というとちょっと躊躇してしまう時がありますが、こうしてHTML内に埋め込まれていると抵抗が個人的には少ないです。 関連エントリ ブラウザ上でPDFを表示するJSライブラリ「PDF.js」
ロゴ入りのクールなQRコードが作れる「Unitag」:phpspot開発日誌
Unitag QR Generator- Create fancy QR Codes for free - Check out Premium access - Unitag - Connect to the world ロゴ入りのクールなQRコードが作れる「Unitag」。 WEBブラウザ上でサイトのロゴが入ったQRコードなどを簡単に作れるツールです サンプル例。なんかかっこいい。 ロゴ入り。こんなのでも読めるんですね ちょっとデザインされた感じのもの デザイナーの方はこういうところもデザインしたいということで、１つのツールとして試してみてもよさそう 関連エントリ Google Chart APIを使ったQRコードを超簡単に描画してくれるjQueryプラグイン「MyQRCode」
少ないスペースに一杯情報を埋め込めるクールなアコーディオン実装jQueryプラグイン「Easy Accordion」:phpspot開発日誌
少ないスペースに一杯情報を埋め込めるクールなアコーディオン実装jQueryプラグイン「Easy Accordion」 2010年10月04日- jQuery plugin: Easy Accordion | Andrea Cima Serniotti 少ないスペースに一杯情報を埋め込めるクールなアコーディオン実装jQueryプラグイン「Easy Accordion」。 次のようなクールなアコーディオンが簡単に実装することが出来ます。 コンテンツをタイマーで自動的に切り替えることも可能 コンテンツは次のように定義しておいて後はjQueryでやってくれるというもの。 <div id="accordion-2"> <dl> <dt>Slide title</dt> <dd><h2>First mammoth here</h2><p><img src="images/mammoths/img1.p
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集:phpspot開発日誌
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集。 リストデザインというと、CSSの整形方法によって様々な見せ方が可能ですが、ソースコード＆チュートリアル付きがまとまったエントリが公開されています。 リストデザインの際は、いつも単調になりがち、という方は覚えておくと、ちょっと変わったデザインも作れそうですし、テクニックを駆使してまったく新しいデザインを考えることも出来そう。 それでは以下にそのデザインされたリストのサンプルをご紹介。 1. サイトのナビゲーション風にデザインされたリスト 2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト 3. 矢印画像を使ったリスト 4. iPhoneスタイルのクールなボックスリスト 5. ツリーっぽい形式にできるリストデザイン 6. 複数行にしてテキストっぽく表示できるテキストリスト 7. ワンラインにして、カンマを付与
デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集:phpspot開発日誌
PHPからOffice・Photoshop・PDF等の各種ファイルを操作するためのライブラ... 次の記事 ≫：アプリケーションを有無を言わさず終了させるAlt+F4の強力版が使える... 最近話題になった、デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集をまとめてみました。 沢山にあるのですが、参考にできそうなものばかりです。 サイトデザイン・サイトの特定部分のデザイン集 15 Creative WordPress Header Designs | Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver クリエイティブなWordPressのヘッダーデザイン集。どれもインパクト大なものばかり 25 Inspiring Examples of Sign-Up P
木、葉っぱ、雲、水など自然に関するPhotoshopブラシセット:phpspot開発日誌
600 Nature Brushes for Photoshop 木、葉っぱ、雲、水など自然に関するPhotoshopブラシセットが紹介されていました。 写真に映して、切り取ってオリジナル素材作成なんてことも出来ますが、こうしたものを利用すればお手軽に自然が表現できてしまいますね。 木に関するブラシ Complete Tree Brush Pack リアルな樹木を一発描画できますね Trees Brushes 色々な形の、ロゴ横なんかにつかえそうな綺麗なブラシ 葉っぱに関するブラシ Leaves Brushes 色々な形の葉っぱ型ブラシ Leaves Brushes リアルな形をした葉の形のブラシ 雲に関するブラシ Cloud Brushes リアルな雲が描画できます Beautiful Clouds 山に関するブラシ Mountain Brushes Vector Mountains 雪
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌
Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に
これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20:phpspot開発日誌
皆さん、新年あけましておめでとうございます。 今年も読んでいただき、ありがとうございます。 では、早速ですが記事のご紹介。 20 Ultimate CSS Tutorials That Will Help You Master CSS | DWSmg.com これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20。 全部、そのメカニズムについて覚えたらかなりCSSに詳しくなるのは間違いなさそう。 Advanced CSS Menu カーソルを合わせたときにメニューがCSSオンリーで切り替わる CSS Based Navigation こちらも同様。JavaScriptレスでメニューを切り替えます CSS Fancy Menu CSSとJSを使ってFlashばりのアニメーションメニューを作成 Expandable CSS Tabs Tutorial テキスト長に応
ウェブデザイン用超便利ツール集:phpspot開発日誌
Web Design Toolbox: 130 New Tools to Make You a Better and Faster Designer ウェブデザイン用便利ツール集 ブロックレイアウトなんかをウェブ上から簡単に作れるツールなんかをまとめたエントリがあがってました。 YAML Builder - 複雑なカラムレイアウトもGUIで簡単作成 Sky CSS Tool - CSSオーサリングツール The Box Office - イメージにあわせて以下のようにテキストの位置を指定したページをジェネレート CSSTXT - CSSでのテキスト整形をプレビュー付で確認しながら生成できる izzyMenu.com - メニューを簡単作成 pForm - フォームを簡単作成 Roxer - ドラッグ＆ドロップでページを簡単作成 Wirenode - モバイルサイト作成 doodleki
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
