CSS3で画像を分割スライドする超クールなパネル実装例:phpspot開発日誌
Sliding Image Panels with CSS3 | Codrops CSS3で画像を分割スライドする超クールなパネル実装例。 例えば、画像が４枚に分割されていてそれらがアニメーションで次の画像に切り替わるというエフェクトをCSS3で実現しています。 アニメーションの種類は４種類あって、全部CSS3でJSオフで動きます。クオリティが超高いので、ダウンロード版をそのまま使いまわすことも可能。 デモページ 関連エントリ CSS3のプロパティやサンプルを調べるのに便利な「CSS3 Click Chart」 CSS3で出来たクールなLightBox実装チュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル
綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」:phpspot開発日誌
綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 2012年01月10日- jQuery UI Bootstrap 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 Twitter Bootstrapでデザインがあまり出来ずともTwitter風の綺麗なUIが作れる事で話題を集めましたが、jQuery UIにTwitter BootstrapのCSSでをあてはめた物が出たようです。 Twitter Bootstrapのメリットを享受しつつjQuery UIも使えてしまいます。 サンプルでは１ページにjQuery UIのウィジェットが配置されているのですが、１ページにあることで、削ったり切り貼りすることでデザ
もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」:phpspot開発日誌
もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 2011年04月11日- Tipped - The Javascript Tooltip Framework | jQuery & Prototype Tooltips もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 これ１つで出回ってるであろう殆どのツールチップは作れる気がします。しかも全てハイクオリティ。 フレームワークということで以下の点をカスタマイズ可能 ・スキン ・ツールチップの位置設定（左右上下など） ・コンテンツをAJAX読み込み ・ローディング画像のカスタマイズ ・コールバック機能(afterUpdate)、イベント(onHide, onShow) ・APIの提供 スクリーンショットを以下にサンプルとして掲載。 それぞれがセンスがよくてどれをつかってもよい気が
光をクールに利用したグラフィック作成用Photoshopチュートリアル集:phpspot開発日誌
30 Photoshop Tutorials for Amazing Lighting Effects | Vandelay Design Blog 光をクールに利用したグラフィック作成用Photoshopチュートリアル集。 次のような光を用いた印象深いグラフィックスを作成するチュートリアル集です。 こうしたグラフィックをWEBサイトの目立つところにおいておくとインパクトが大きく覚えてもらいやすいのかも。 単純に光といっても実に様々な使い方があるものですね。 関連エントリ 光が超カッコいいPhotoshopのブラシ色々まとめ Photoshopの光のエフェクトチュートリアル集 美しい光のエフェクトを画像に加えるPhotoshopチュートリアル集
面倒なブラウザごとのCSS3プレフィックスを自動で付けてくれるツール「CSSPrefixer」:phpspot開発日誌
CSSPrefixer 面倒なブラウザごとのCSS3プレフィックスを自動で付けてくれるツール「CSSPrefixer」 プロパティごとに -moz とか -webkit を全部設定するのめんどくさい、という場合にサブミットすれば自動で付いた結果が出力されるというシンプルだけど便利なツールです。 サブミットすれば次のように -moz とか -o とか -webkit とか全部付けて出力してくれます。 これはいい。 JavaScript とかで、１個指定しとけばJS読み込むだけで全部自動やってくれる的なライブラリがあったらもっと便利な気がしますね。 jQueryとかで比較的簡単に実現できそう。 関連エントリ 便利なCSS3ツール6つ＋α IEでもCSS3を使うためのツールやリソース集 HTML5/CSS3に関する便利ツールやチーとシート、リソース２５
プロレベルのWEBサイトレイアウト作成チュートリアル３０:phpspot開発日誌
30 Superb Photoshop Web Layout Tutorials | Top Design Magazine - Web Design and Digital Content プロレベルのWEBサイトレイアウト作成チュートリアル３０。 過去に紹介したものも含まれていますが、比較的新しいチュートリアルもあったのでご紹介。 次のような美しいレイアウトのチュートリアル集となっています。 学習資料なんかに活用させていただきましょう。 関連エントリ チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル スタイリッシュなWEBレイアウト作成Photoshopチュートリアル 緑のすっきり綺麗なWEBレイアウト作成Photoshopチュートリアル PhotoshopによるフレッシュなWEBサイトレイアウト作成チュートリアル集８０
オンラインでワイヤーフレームが描画できる「HotGloo」がかなり便利:phpspot開発日誌
オンラインでワイヤーフレームが描画できてかなり便利な「HotGloo」。 ここでいうワイヤーフレームとはWEBサイトデザインの下地になるようなもので、サイトデザインの設計に使えます。 簡単なベースを作っておくことであとはPhotoshopなどで装飾させるというステップで、ユーザビリティを考えつつデザイン性の高いサイト構築に役立てられます。 HotGlooの画面はFlashを使ったリッチなインタフェースで、デスクトップアプリと遜色ないクオリティのＵＩによってワイヤーフレームが作成できます。 ページの右下には豊富なＵＩパーツがあり、白地のキャンバスにドラッグ＆ドロップするだけで配置が可能です。 色々とドラッグ＆ドロップしてエレメントを配置してみた例。実に様々な基本となるUIパーツが存在しており、高速にＵＩの設計をすることができそうです。タブやアコーディオン、GoogleMap、グラフまで存在し
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」:phpspot開発日誌
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」がGoogle Codeに公開されています。 jQというだけあって当然ながらjQueryプラグインの形式です。 適用前の普通のSelect ボックスが便利に変化します 都道府県の縦に長かったものが横方向に超分かりやすく表示 日付も次のように超分かりやすいセレクトに。縦に長いのとはもうオサラバできそうです。 更に、コールバック関数によってクリックした後の動作も定義できるっぽいです。 はじめから日本対象という点でも使いやすいですね。 実装も、jQueryプラグインなので超使いやすいです。 次のように初期化するだけのようです。 $(".simpleBox").jQselectable({ set: "fadeIn", setDuration: "fast", opacity: .9 }); 以下のエント
IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
prototype.jsでクロスブラウザなWYSIWIGエディタ:phpspot開発日誌
prototype.jsでクロスブラウザなWYSIWIGエディタ prototype.jsベースで、IE、Firefox、Opera、SafariをサポートするWYSIWYGエディタライブラリです。 prototype.jsでクロスブラウザなWYSIWIGエディタ。 なかなか便利そうですね。 その他のJavaScriptで実装されたWYSIWYGエディタ FCKEditor TinyMCE
デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集: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
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」:phpspot開発日誌
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」 2009年05月28日- jQuery Ribbon - Home これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」。 利用すれば、コントロールのグルーピングや、ドロップダウンメニュー、階層リストなどのリッチなコンポーネントが実装できるみたい。 jQuery Ribbonを使ったリッチなＵＩ。Windows7っぽいデザインのＵＩがJavaScriptで。 アイコン付きのかっこいいメニュー 表示しているＵＩのテーマを選べる アイコンつきリスト アイテムのグルーピング ドロップダウンメニュー ちょっとこれは素晴らしいですね・・・。jQueryの優位性がますます高くなってしまいましたね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイ
CSSでボタンを綺麗にスタイルするサンプル集:phpspot開発日誌
22 CSS Button Styling Tutorials and Techniques : Speckyboy Design Magazine CSSでボタンを綺麗にスタイルするサンプル集が Speckyboy Design Magazine にて紹介されています。 なんとも美しいボタンのサンプルが色々と紹介されていて、もうボタンデザインに迷うことはないかもしれません。 Submit button should look same everywhere 綺麗なアイコン付きSubmitボタン How to make sexy buttons with CSS 角丸グラデーション付きボタン Scalable CSS Buttons Using PNG and Background Colors 文字を長くしても伸縮するボタン CSS Overlapping Arrow Buttons 階
jQueryを使ったFlashばりにクールなギャラリー「GalleryView」:phpspot開発日誌
jQuery GalleryView - by Jack Anderson jQueryを使ったFlashばりにクールなギャラリー「GalleryView」が公開されています。 初期化に以下の数行を書けばＯＫみたい。 $('#photos').galleryView({ panel_width: 800, panel_height: 300, frame_width: 100, frame_height: 100 }); 動かしているHTMLのなかなか分かりやすいです。 関連エントリ 訪問者驚きの手めくり風、画像ギャラリー作成サンプル 滑らかに画像が切り替わる超絶クールFlash写真ギャラリー「imagin」 色々な画像の見せ方を演出できる画像ギャラリー集
ブラウザ上でソースコード編集が可能な開発環境を提供「ecoder」:phpspot開発日誌
ecoder | home ブラウザ上でソースコード編集が可能な開発環境を提供「ecoder」。 通常、開発というとローカルで保存してアップロードという形が当たり前ですが、ここ数年のトレンドの全部ブラウザで動かそうという流れを受けた開発環境です。 PHPや、HTML等、ファイルの種類に応じて綺麗にシンタックスハイライトをしてくれます。 SAVEで保存すれば、その場で反映というのはなかなか素晴らしいですね。 これが、SourceForgeのオープンソースで提供されているっていうのが更に素晴らしいです。 セキュリティには気をつけたいですが、自分のサーバにおいておけば、どこでもソフトのインストールなしに使えるということで、かなり熱いソフトだなと思います。 関連エントリ ブラウザ上で動く12のリッチテキストエディター 有名ではないけど使えそうなブラウザベースのリッチテキストエディタ色々 ブラウザ上
alert等のウィンドウ内ダイアログを実現するjQueryプラグイン「jQuery Alert Dialogs」:phpspot開発日誌
jQuery Alert Dialogs alert等のウィンドウ内ダイアログを実現するjQueryプラグイン「jQuery Alert Dialogs」。 次のようにシンプルで分かりやすいデザインのダイアログをJavaScriptで簡単に作れます。 同様のライブラリは色々と存在しますが、jQueryプラグインということで使いやすいかもしれませんね。 デザインもシンプルで嫌味のないデザインとなっています。 関連エントリ JSによるカスタムダイアログボックス作成ライブラリ 様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.Modal」 ページ内でpromptやconfirmの実行を可能にするJavaScriptライブラリ「pprompt.js」
プロレベルのサイト作成時に使える実用Photoshopチュートリアル集:phpspot開発日誌
25 Photoshop Tutorials for Web Designers - Six Revisions プロレベルのサイト作成時に使える実用Photoshopチュートリアル集。 ページ全体だけではなく、ヘッダーやナビゲーション等、パーツによって個別に別れているので使いやすそうです。 テンプレート作成のチュートリアル Photoshop Paper Texture from Scratch How to Create a Grunge Web Design Design an Awesome Band Website Template ナビゲーション作成のチュートリアル Design Watercolor Effect Menu Glossy-Style Carbon Fibre Navigation Buttons CSS Menu With Icons サイトヘッダー作成のチュ
もうサイトのメニュー作成には困らない！多種多様なサイトメニュー配布サイト「Styled Css Menus」:phpspot開発日誌
Styled Css Menus - High Quality Web Based Professional Css Menus: allmenus もうサイトのメニュー作成には困らない！多種多様なサイトメニュー配布サイト「Styled Css Menus」。 ということで次のようなメニューのサンプルダウンロードが可能なサイトのご紹介。 ダウンロードページ CSSなのでちょっとスタイルを変えてオリジナルにしてみるのも良さそう。 CSSメニューでいうと、次の関連エントリも参考にできます。 デザイン性に優れたCSSメニュー集 使えるCSSメニューいろいろ CSSで作成されたサイトのメニューサンプル集 CSSのみでクールな階層メニュー作成サンプル CSSのクールなメニューをオンラインで簡単生成「CSS Menu Generator」
2008年のCSSベストデザインサイト集:phpspot開発日誌
Best of CSS Design 2008 2008年のCSSベストデザインサイト集という特集。 これは、と思う物をピックアップしてみました。最新のデザインを見ることで勉強になりますね。 Let It Bleed Vermont Coffee Works Digital Mash Good DrupalCon, DC Future of Web Apps - Miami 2009 Future of Web Design - NYC 2008 Tennessee - Fall Tennessee - Spring Tennessee - Summer Tennessee - Winter LightCMS The First Twenty Luke Larsen Design Disease Adaptd Jason Santa Maria Electricurrent Mochi A
ロゴデザインの際に参考にできるリソース集:phpspot開発日誌
The Ultimate List of the Top Best Logo Design Resources Below you will find galleries of logo designs for logo design inspiration. ロゴデザインの際に参考にできるリソース集。 Logo Of The Day 投票機能付きでどういうロゴが評価を得るか、という点も参考になります。 タグ検索機能付き Logo Pond クオリティの高い多数のロゴが見れる Fave Up こちらも投票機能付き。比較的大きいロゴ画像を一覧でシンプルに見れる Logo Sauce サムネイルで一覧表示。検索機能付きのロゴデザインまとめサイト Identity Archives 製品のロゴなどを検索できます。coke とか wii とかを検索してみましょう。 Logo Faves ロゴにカー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
