[CSS]3枚の画像を使って、立体的なキューブ状にするスタイルシート
Building a 3D Cube With HTML5 and CSS3 デモ [ad#ad-2] 画像はdiv要素で実装されているため、CSSオフ時は上のキャプチャの左のように表示されます。 使用している画像はサイズ100x100の3枚で、下記のようになります。 画像のキャプチャ 実装は、下記のようになります。 HTML HTMLには、HTML5を使用しています。 <div class="cube"> <div class="face top"><img src="img/WPN-P.png" width="100" height="100"></div> <div class="face left"><img src="img/WPN-W.png" width="100" height="100"></div> <div class="face right"><img src="i
スクロールしても常にサイドに要素を固定で表示できるjQueryプラグイン「JQuery Sidebar Plugin」:phpspot開発日誌
スクロールしても常にサイドに要素を固定で表示できるjQueryプラグイン「JQuery Sidebar Plugin」 2010年11月10日- Amit Patil's Blog スクロールしても常にサイドに要素を固定で表示できるjQueryプラグイン「JQuery Sidebar Plugin」。 サイドに常に表示されている「Follow Me」みたいなツイッターのフォローボタンは最近よく見かけますね。 これをjQueryで簡単に実装してしまおうというもの。 使い方は次のようにオプションを渡してあげるだけです。 $(function() { $("body").sidebar({ text : "Follow Me", // 表示テキスト size : "30px", // 幅 length : "200px", // 高さ margin : "130px", // マージン p
[JS]サークル状のUIが面白い、カルーセルのスクリプト -Tiny Circleslider
使いどころは難しいですが、面白いユーザインターフェイスを備えた画像をスライド表示するカルーセルのスクリプトを紹介します。 デモ3：画像をクリックすると拡大します。 Tiny Circlesliderの特徴 わずか4KBの軽量スクリプト。 カスタマイズは簡単。 スライド操作は手動と自動に対応。 スライドの半径は自由に設定可能。 すべての動作にcallbackを設定可能。 オプションも豊富に用意。 [ad#ad-2] Tiny Circlesliderの実装 HTML カルーセルで表示する各画像はリスト要素で実装します。 HTMLの基本は下記のようになります。 <div id="rotatescroll"> <div class="viewport"> <ul class="overview"> <li><a rel="group" href="images/hdr1.jpg"><img sr
電光掲示板のようにニュースをクールにアニメーション表示できる「jquery vticker」:phpspot開発日誌
jquery vticker (vertical news ticker) JugBit 電光掲示板のようにニュースをクールにアニメーション表示できる「jquery vticker」。 特定のdivに次のようにulでリストを定義しておいて、$(element).vTicker(); とすることで簡単にアニメーションするニュースティッカーが実装できます。 幅、高さは固定できるので、自由にレイアウトできるところもナイスです。 表示時間が終わって消えるリストがグレーにフェードアウトするところも芸が細かくてナイス。 デモを見る デモはCSSでスタイリングされておらず味気ないものですが、CSSで綺麗にデザインしてあげることでかなり映えそうです。 オプションで、次の挙動についてカスタマイズも可能です。 ・スピード変更 ・待ち時間変更 ・アイテム表示数変更 ・アニメーション指定 ・マウスで停止するか指定
シンプル・軽量（2.2KB）・手軽なjQueryコンテンツスライダー・hash slider - かちびと.net
よくあるコンテンツスライダーですが、 軽くて使いやすそうでしたのでメモ。 hash sliderは、わずか2キロバイト ほどの軽量スクリプトです。こういう のはいくつ覚えておいても損しない ですね。 軽い、というのは大事ですよね。スライドさせるとURL末尾に#～が付き、ここにリンクすることが出来ます。 シンプルです。マークアップも単純なので使いやすいのでは。 <div id="slider"> <ul> <li> example</li> <li> example2</li> </ul> </div> <div id="left"> goLeft </div> <div id="right"> goRight </div> <ul id="numbers"> <li></li> </ul> デモでは画像を利用しています。 #～にリンク #～にリンクさせることで個々のスライドを指定して表示さ
本当に無料でいいの？というWEBサイト用Photoshopテンプレート１０:phpspot開発日誌
10 Beautiful PSD Templates Of October 2010 For Free Download 本当に無料でいいの？というWEBサイト用Photoshopテンプレート１０。 次ようにプロがデザインしたと思われるサイトのPhotoshopテンプレートが１０個紹介されています。 タイトル部分だけ変えれば立派なWEBデザインの完成ということになってしまいそうですね。 なんでこんなものがフリーになっちゃうのというぐらいクオリティが高いですね。 関連エントリ そのまま使えるWEBレイアウトのPhotoshopテンプレート40 いい感じのフリーのWEBサイトレイアウト用Photoshopテンプレート１５
jQueryプラグインを探せる検索エンジン・pluginquery - かちびと.net
いつか出るかと思っていましたが、 やっと出始めました。数多に存在 するjQueryのプラグインを検索する ことが出来る検索エンジンです。 まだ膨大な量とは言えないですが、 イデックス数は1000近くあるので 覚えておいて損しなさそうです。 今後に期待したい検索エンジンですねー。現在は1000ほどのプラグインから探せるようになっています。 例によってシンプルな作り。プラグインの数は検索ボックス下部に数値が出ています。 例えば「Drop Down」で検索すると、ドロップダウンメニューやドロップダウンするコンテンツボックスなどを実装出来るプラグインが検索されてきます。 タグでも探せます。 まだまだ数は多いとは言えませんが、便利そうなので今後に期待したいです。 pluginquery
The Top 50 Free Flat Design UI Kits & Templates
With the explosion of flat-designed websites, web designers now follow the trend in a snap, adapting a cleaner and much simpler design which can be found in flat UI kits. We seldom see skeuomorphic designs nowadays. In fact, all of the depth has been slowly becoming flat. This is the reason why more and more designers have created flat design UI kits for web designers who want to follow the trend.
ナビゲーションメニューに関する有用なjQueryチュートリアル集:phpspot開発日誌
26 Useful jQuery Navigation Menu Tutorials - Web Design Blog ? DesignM.ag ナビゲーションメニューに関する有用なjQueryチュートリアル集のご紹介。 ２６にもわたるチュートリアルになっていて、プラグインではありませんが、参考にすることで実装は容易でしょう。 クールな見た目が多いのもいいですね。 沢山の種類があるのでイメージにマッチしたものも見つかりそうです。 関連エントリ 長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 階層ナビゲーション実装ライブラリ集 背景画像をクールにかえつつナビゲーションを行うjQueryでのメニュー実装例
営業ができる人とできない人の違い - GoTheDistance
営業という言葉に良いイメージを持ってる人はかなり少ないんじゃないかと思います。特にエンジニアは営業さんに「泣かされた」経験がおありの方が多いですし。また、電話爆撃営業や詐欺に近いような営業も多い中、益々うさんくささが先行しやすいのかなぁと思ったりします。 ホントはそういうもんじゃないだろって思うので、自分１人で顧客の所に赴き、話をしに行くことも増え、発注側として営業さんの話を聞くことも増えてきました。そんな中で、営業について感じたことを書いてみます。 1. できる人は相手に問いかける、できない人は自分が話し続ける 相手とのコミュニケーションの中で距離感をつかみ、お互いが負担にならないようなコミュニケーションの土台をまずつかむこと。これが恐らく営業のはじめの一歩なんじゃないか、と思っています。 その土台を作るのに、まず自分のことを立て板に水を流したように話す営業がいますが、その時点で僕は「も
フリーでハイクオリティなベクター画像と写真を検索できる「Freepik」
有料、無料を合わせたベクター画像を探せる検索サービスはいろいろあれど、高品質かつ無料で使えるものを検索できるサービスはなかなかないと思います。 今回は、高品質かつ無料のベクター画像と写真を検索できるサービスをご紹介。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! ハイクオリティかつ無料のベクター画像と写真を検索できる「Freepik」 「Freepik」は、無料で使えるハイクオリティなベクター画像と写真を検索するサービス。 ベクター画像だけ、写真だけと絞り込むことも可能で、いづれも本当にクオリティの高いものになっています。 「rainbow」での検索結果 ↑例えば虹で検索をかけると、虹色をつかったアイデアのさまざまなベクター画像や写真が見つかります。 「car」と「rainbow」で見つけたサン
20個ほどのjQueryプラグインを公開しているJS Plugins - かちびと.net
いくつか良いプラグインがあったので シェアしたいと思ってエントリーします。 去年始まったプロジェクトのようで、数 はさほど有りませんが、多く知ってお いて損するものでも無いので覚えて おくといいかもですね。 現在20個ほど紹介されています。特にjQueryの専門ではなさそうですが、今のところはjQueryのみになっています。 地味ですが、見やすいし、デモも用意してくれているので期待したいサイトの一つです。 以下のようなプラグインが紹介されていますよ。 Jquery Image Effects マウスオーバー時に素敵なエフェクトを加えます。 Jquery Image Effects Jquery Mega Select List セレクトリストをメガタイプにしてくます。 Jquery Mega Select List Jquery Mobile Drag And Drop モバイルでドラッグ
どのプログラム言語を覚えればいいのか分からないっていう初心者さんのためのガイド（Web）
作りたい Webサイトのアイデアはあるけど、どんなプログラムを勉強したらいいか分からない人 ... という人のための、ざっくりとしたガイドです。 HTML と CSS はわかるけど ... という初心者さんが対象の記事になってます。 インターネット上には本当に色んな Webサイトがあって、こんなサイトを自分でも作ってみたいなーと思う事がたくさんあります。でも、いざ自分で作ってみようと挑戦しようと思っても、これって何でできてるんだろうと考えます。そういえば、まだ Webサイトを作り始めるずっと前にもそんな風に思っていた初心者時代がありました。 やりたい事はあるけれど、まず、どんなプログラムを勉強すればいいのか、そこからが分からなかったんですよねー。プログラムとひと言でいっても、C言語系、PHP、Java、Perl、Javascript … 本当にたくさんあって、初心者さんには意味不明だと思い
iOS 4.2の新機能で作るHTML5+JSアプリ (3/4)
傾けた方向にGoogleマップを移動させる 加速度の値が求められたので、今度は加速度センサーでGoogleマップを移動させるプログラムを作成します。本連載の28回で紹介したFirefox用のプログラムをiPhone/iPad用に変更します。 まず、FirefoxのMozOrientationイベントをiPhone/iPadのdevicemotionイベントに変更します。以下のようにイベント名を書き換えます。 window.addEventListener("MozOrientation", ...) ↓ window.addEventListener("devicemotion", ...) 次に、加速度を示すオブジェクト名を変更します（プロパティ名は同じです）。Firefoxではイベントハンドラに加速度のオブジェクトが渡されますが、iPhone/iPadではイベントオブジェクトのacce
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
