斜めがかったおしゃれなスライドショー実装「Crossroads Slideshow」:phpspot開発日誌

2019/07/25 9 users phpspot開発日誌 モーションブラー SVG デモ 文字

Crossroads Slideshow | Codrops 斜めがかったおしゃれなスライドショー実装「Crossroads Slideshow」 文字と写真が交差するおしゃれなスライドショー実装デモです 関連エントリ スライドショーにSVGでモーションブラーをかけてかっこ良くするデモ 超カッコいいApple風スライドショーギャラリー作成チュートリアル 続きを読む

クリエイティブなオーディオビジュアライザー実装デモ:phpspot開発日誌

2018/04/19 14 users phpspot開発日誌 ビジュアルエフェクト SVG 実装

Creative Audio Visualizers | Codrops クリエイティブなオーディオビジュアライザー実装デモ 音楽にあわせてグリグリ動くビジュアルエフェクトの実装がすごい 関連エントリ SVGとanime.jsを使った機敏に動くツールチップ実装「Playful Little Tooltip Ideas」 続きを読む

文書スクロールと共に地図をアニメーション表示できるデモがすごい:phpspot開発日誌

2015/12/28 14 users phpspot開発日誌 アニメーション デモ 地図 スクロール

Animated Map Path for Interactive Storytelling | Codrops 文書スクロールと共に地図をアニメーション表示できるデモがすごい 旅のログ等に表示すると超わかりやすそうなUIを作れます。 スクロールに応じてページ内容をアニメーションさせたりするといった手法はよく使われるようになりましたが、こういうアイデアをWEB上で実装したのは初めて見た気がします。... 続きを読む

画面切り替えが超カッコ良いスライダー「Blueprint Zoom Slider」:phpspot開発日誌

2015/07/16 23 users phpspot開発日誌 Blueprint 画面 エフェクト

画面切り替えが超カッコ良いスライダー「Blueprint Zoom Slider」 2015年07月16日- Blueprint: Zoom Slider | Codrops 画面切り替えが超カッコ良いスライダー「Blueprint Zoom Slider」。 スライドでアイテムを送る＆詳細を開く部分のエフェクトが超カッコイイスライダーです。 WEB→アプリという流れの中で、WEBもどんどんアプリ... 続きを読む

CSSの基礎知識から実践的なテクニックまで、しっかりと身につけたい人はチェックした方がいいサイト -CSS Reference | コリス

2015/02/04 134 users コリス プロパティ CSS テクニック 基礎知識

昨日ローンチされた、CSSをしっかりと学びたい・身につけたい人にオススメのコンテンツ「CSS Reference」を紹介します。 作成は当ブログでもよく紹介するCodropsで、CSSのプロパティの基礎知識から、どのよう...記事の続きを読む 続きを読む

超カッコ良い検索フォームのチュートリアル＆デモ:phpspot開発日誌

2014/11/13 28 users phpspot開発日誌 サジェスト input パーン 改善

超カッコ良い検索フォームのチュートリアル＆デモ 2014年11月13日- Simple Morphing Search | Codrops 超カッコ良い検索フォームのチュートリアル＆デモ。 検索窓といえば、単にinputがあって、というのを想像しますが、こちらを見れば、検索フォームはもっと改善が可能だという事を思い知らされます 検索窓がバーンと広がって全画面に。検索のサジェスト等も表示されます。 ... 続きを読む

画像ホバー時のクールなエフェクト実装チュートリアル:phpspot開発日誌

2014/11/12 24 users phpspot開発日誌 画像ホバー時 カーソル ヒント 画像

画像ホバー時のクールなエフェクト実装チュートリアル 2014年11月12日- Some More Subtle Hover Effect Ideas | Codrops 画像ホバー時のクールなエフェクト実装チュートリアル。 画像にカーソルをあわせた際にクールなテキストアニメーションが実装されているチュートリアルとサンプル。 画像をずらしつつテキストをアニメーションさせる動きが新しいデザインのヒント... 続きを読む

SVGを使ってウェブページにかっこいいエフェクトを与えるチュートリアルのまとめ | コリス

2014/06/24 146 users コリス SVG エレメント ウェブページ チュートリアル

最近は海外だけでなく、日本でもSVGを使用しているサイトを見かけることが多くなってきました。SVGをアイコンやエレメントに使ったり、アニメーションと組み合わせた面白いエフェクトを取り入れたりなど、さまざまです。 いつかプロジェクトで使いたくなるようなSVGのチュートリアルをCodropsから紹介します。 Creating a Border Animation Effect with SVG and... 続きを読む

フルスクリーンオーバーレイエフェクトの色々サンプル:phpspot開発日誌

2014/02/14 17 users phpspot開発日誌 サンプル 変わり種 エフェクト 宝庫

フルスクリーンオーバーレイエフェクトの色々サンプル 2014年02月14日- Fullscreen Overlay Effects | Codrops フルスクリーンオーバーレイエフェクトの色々サンプル。 コンテンツをオーバーレイさせるにも単にフェードインさせる方法が主流ですが、色々なエフェクトが作れるみたいで、それぞれ見てみると参考になります 一般的なものからちょっと変わり種まで、ネタの宝庫とし... 続きを読む

超カッコイイ立体的なメニューを実装したデモ:phpspot開発日誌

2014/01/10 80 users phpspot開発日誌 デモ 超カッコイイ メニュー web

超カッコイイ立体的なメニューを実装したデモ 2014年01月10日- Perspective Page View Navigation | Codrops 超カッコイイ立体的なメニューを実装したデモ。 ページがあって、クリックすると次のようにページが傾いてメニューが表示されるというデモです。 デザインもフラットでクール。 数年後のWEBではこうしたデザインは当たり前になっているのかもしれませんね。... 続きを読む

SVG Drawing Animation | Codrops

2013/12/30 49 users Animation

A little experiment that explores the usage of SVG line drawing animations to precede the appearance of graphics or website elements, simulating the loading of them. View demo Download source SVG is f... 続きを読む

Medium-Style Page Transition | Codrops

2013/10/31 27 users

An article on how to achieve Medium’s next page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page. This effect is characterized by t... 続きを読む

チェックボックスやラジオボタンはチェック時にアニメーションした方が分かりやすい、と分かるデモ:phpspot開発日誌

2013/10/25 74 users phpspot開発日誌 デモ ラジオボタン チェックボックス

チェックボックスやラジオボタンはチェック時にアニメーションした方が分かりやすい、と分かるデモ 2013年10月25日- Animated Checkboxes and Radio Buttons with SVG | Codrops チェックボックスやラジオボタンはチェック時にアニメーションした方が分かりやすい、と分かるデモ。 チェック、ラジオをチェックするときは瞬時にチェック状態に変わってしまう... 続きを読む

Animated Border Menus | Codrops

2013/10/01 42 users

A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash's bounce menu for mobile apps. View demo Download source The other ... 続きを読む

複数階層のサイドメニューを実装するデモ＆サンプル:phpspot開発日誌

2013/08/28 22 users phpspot開発日誌 複数階層 サイドメニュー おなじみ

複数階層のサイドメニューを実装するデモ＆サンプル 2013年08月28日- Multi-Level Push Menu | Codrops 複数階層のサイドメニューを実装するデモ＆サンプル スマホのFacebookアプリ等でおなじみのサイドメニュー。タッチ端末では結構使いやすいわけですが、これを階層化してみたデモです。 単に折畳み型のUIでもよさそうですが、こちらのデモでは更にサイドバーを被せるよ... 続きを読む

フラットでカッコいいモーダルダイアログ実装デモ:phpspot開発日誌

2013/07/12 25 users phpspot開発日誌 アニメーションエフェクト デモ 一見

Nifty Modal Window Effects | Codrops フラットでカッコいいモーダルダイアログ実装デモ。 表示される際のアニメーションエフェクトが豊富に用意されていてデモとして一見の価値ありです。 勿論、サンプルそのままDLできるのでカスタマイズして使うこともできそう 関連エントリ 何でも埋め込めてカッコいいモーダルダイアログ実装用jQueryプラグイン「Pop Easy」 jQ... 続きを読む

垂直なタイムラインをデザインするHTML＋CSSチュートリアル:phpspot開発日誌

2013/05/10 101 users phpspot開発日誌 タイムライン 時系列 関連エントリ

Vertical Timeline | Codrops 垂直なタイムラインをデザインするHTML＋CSSチュートリアル 次のようなフラットで美しい垂直方向のタイムラインを実装するマークアップ例が紹介されています ソースをダウンロードすることもできます 時系列で何かをならべるようなUIに使えそう 関連エントリ モダンなサイトを作成するためのCSS3チュートリアル集 CSS3でChrome風ウィンドウ... 続きを読む

垂直アイコンメニュー実装デモ＆サンプルプログラム「Vertical Icon Menu」:phpspot開発日誌

2013/03/11 25 users phpspot開発日誌 fixed position 背景色

Vertical Icon Menu | Codrops 垂直アイコンメニュー実装デモ＆サンプルプログラム「Vertical Icon Menu」。 次のような左側にアイコンメニューがあって、position:fixedで固定されているだけなのですが、ダウンロードして使えるサンプルがカッコ良かったのでご紹介。 メニューにカーソルを合わせた時に、きちんとアイコン色と背景色がアニメーションしつつ変化す... 続きを読む

メトロライクなUIと大胆なオーバーレイエフェクトが気持ち良い EXPANDING OVERLAY EFFECT / Maka-Veli .com

2013/01/25 43 users Maka-Veli .com CSS フォント デモ アイコン

CodropsでMARY LOUという方が書かれていたんですが、可愛かったのでご紹介。 CSS/JS/で作られていて、デモでは天気予報を作られているんですが、アイコンはフォント。オーバーレイエフェクトもとても良い感じです。 メトロっぽいデザイン、増えてきましたよね。 個人的には結構好きなんですが、色と枠内のバランスをミスると一気に下品な感じになりがちなので結構難しい・・・ ダウンロードも出来ます。... 続きを読む

3D Book Showcase | Codrops

2013/01/09 24 users

An experiment about a realistic looking book showcase with some interactivity using CSS 3D transforms. View demo Download source Today we want to share an experimental book showcase concept with you. ... 続きを読む

卓上に写真を置いたようなインタフェースのギャラリー作成用のjQueryプラグイン:phpspot開発日誌

2012/11/29 30 users インタフェース 卓上 jQueryプラグイン 複数 写真

Adaptive Thumbnail Pile Effect with Automatic Grouping | Codrops 卓上に写真を置いたようなインタフェースのギャラリー作成用のjQueryプラグイン。 次のような、１つの写真は複数の写真を重ね合わせたようになっていて、クリックするとパラパラと写真がアニメーションしつつ開かれてギャラリー風になるというなんともオシャレなUIが実装できるよう... 続きを読む

Using Transparency in Web Design: Dos and Don’ts | Codrops

2012/11/28 21 users DESIGN

Experimenting with transparencies is a great way to expand your design repertoire. Like many other effects, use this technique sparingly and test the design in multiple environments to ensure that it ... 続きを読む

Baraja: A Plugin for Spreading Items in a Card-Like Fashion | Codrops

2012/11/13 28 users Baraja

With this jQuery plugin items can be spread in a card-like fashion and displayed in an unusual way. Several parameters allow many different spreading results, allowing a unique pattern. View demo Down... 続きを読む

CSSのみで作るUIデザインのサンプル一覧。CSSのスタイルプレビューとして参考になるのはもちろん、サンプルコードはコピペでそのまま使えるので便利。 → Basic Ready-to-Use CSS Styles | Codrops -

2012/10/23 15 users CSS コピペ UIデザイン サンプルコード 参考

Basic Ready-to-Use CSS Styles | Codrops - This is a collection of some basic styles that can come in handy when creating your own style definitions. Learn how to make some useful classes for simple st... 続きを読む

Basic Ready-to-Use CSS Styles | Codrops

2012/10/23 70 users

This is a collection of some basic styles that can come in handy when creating your own style definitions. Learn how to make some useful classes for simple styles and how to apply them to a variety of... 続きを読む