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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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... 続きを読む

魅力的でワクワクする最新のエフェクトを使ったウェブサイトのまとめ | コリス

2012/07/31 346 users コリス エフェクト インパクト ウェブサイト ユーザー

訪れたユーザーにインパクトを与える魅力的な最新のエフェクトを使ったウェブサイトをCodropsから紹介します。 Examples of Creative and Modern Effects in Web Design 続きを読む

超リアルな単語帳っぽいものを作るCSS3＋jQueryチュートリアル:phpspot開発日誌

2012/07/12 53 users phpspot開発日誌 チュートリアル アニメーション 質感

Swatch Book with CSS3 and jQuery | Codrops 超リアルな単語帳っぽいものを作るCSS3＋jQueryチュートリアル。 次のような綺麗なデザインの単語帳っぽいものを実装するチュートリアルです。クリックすればインタラクティブに回転等を加えながら動くのが特徴です。 CSS3によって秀逸にデザインされているため、質感はかなり美しく、更にアニメーション等の動きが加わる... 続きを読む

3D Thumbnail Hover Effects | Codrops

2012/06/18 58 users 3D Thumbnail Hover Effects

A tutorial about how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery. View demo Download source Today we want to show you how to create some exciting 3D hover effects using CSS3... 続きを読む

フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル:phpspot開発日誌

2012/02/28 71 users phpspot開発日誌 フルスクリーン サンプル 画像切替

Fullscreen Image Blur Effect with HTML5 | Codrops フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプルが公開されています。 画像切替の際のぼかしアニメーションがなかなかいい感じです。サンプルをダウンロードできるので写真を置き換えればそれっぽく利用することができそうです FlashかHTML5なんていう話にもなったりしますが、画面のデ... 続きを読む

フルスクリーン背景がスライドショーになるCSS3サンプル:phpspot開発日誌

2012/01/12 56 users phpspot開発日誌 スライドショー チュートリアル 背景

Fullscreen Background Image Slideshow with CSS3 | Codrops フルスクリーン背景がスライドショーになるCSS3サンプル。 ページ全体の背景がCSS3によってアニメーションされ切り替わるサンプルとチュートリアルが公開されています。 画像・文字が綺麗にクロスフェードしながら切り替わってなかなかカッコいいものがCSS3をベースに構築されていて勉強にな... 続きを読む

シンプルなタグなのに凝った綺麗なボタンを作るCSSチュートリアル:phpspot開発日誌

2012/01/12 223 users phpspot開発日誌 タグ ボタン チュートリアル CSS

CSS Buttons with Pseudo-elements | Codrops シンプルなタグなのに凝った綺麗なボタンを作るCSSチュートリアル マークアップは、<a>ほげほげ</a> のように超シンプルなのに次のような立体的に凝ったボタンをCSSで作るチュートリアルです。 素材として使ってもいいですし、テクニックの学習用にもいいですね 1個CSSを作っておけばリッチなボタンがシンプルなマー... 続きを読む

全体をドラッグで動かせるグリッドレイアウトのイメージギャラリーをjQueryで構築するチュートリアル - かちびと.net

2011/10/09 96 users グリッドレイアウト iPhone jQuery ドラッグ 画面

画面いっぱいに広がったグリッドレイアウト のイメージギャラリーをドラッグで動かす 事ができるコンテンツをjQueryで実装する 為のチュートリアルです。かなり良く出来 てます。iPhoneでも一応可能でしたので 工夫すればスマートフォンにも使えるかも。 Codropsのチュートリアルが相変わらず素敵なのでメモがてら。画面全体に広がったグリッドレイアウトのイメージギャラリーを丸ごとドラッグで動かせる... 続きを読む

並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌

2011/09/05 629 users jQueryサンプル phpspot開発日誌 画像 img

Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表... 続きを読む

上下左右にスライドできるおしゃれな画像ギャラリー作成スクリプト＆チュートリアル:phpspot開発日誌

2011/08/17 54 users phpspot開発日誌 上下左右 矢印 ナビゲーション 上下

Portfolio Image Navigation with jQuery | Codrops 上下左右にスライドできるおしゃれな画像ギャラリー作成スクリプト＆チュートリアル 通常ギャラリーというと左右の矢印がついているだけですが、今回紹介するものは上下左右にナビゲーションさせるというものです。 ページ下部にはナビゲーションが付いており、こちらをクリックしても画像が見れます。 上下の位置関係によ... 続きを読む

テキストがくるりとスライドしていくようなエフェクトをjQueryで実現するためのチュートリアル | IDEA*IDEA

2011/05/10 56 users jQuery ポートフォリオサイト IDEA チュートリアル

画像ではうまく伝わりませんが、くるりとテキストが変化していくこのエフェクト、なかなか良いのではないでしょうかね。ポートフォリオサイトなんかで使ってみたいです。 ↑ 是非デモを見てみてください。 実際のマークアップ＆コーディングは以下からどうぞ。 » Sliding Letters with jQuery | Codrops 続きを読む

ぐるっと画像がまわるようなスライドショーをjQueryで作るためのチュートリアル | IDEA*IDEA

2011/05/02 65 users jQuery IDEA チュートリアル エフェクト 回転

なんだかどこかで使えそうなのでメモ的にエントリー。ぐるっと画像が回転（うまく説明できないですが）するようなエフェクトが素敵なスライドショーですよ。 ↑ こんな感じです。 まるっとソースをダウンロードできるのでご興味のある方はどうぞ。 » Rotating Image Slider with jQuery | Codrops 続きを読む

Rotating Image Slider with jQuery | Codrops

2011/04/29 55 users

View demo Download sourceIn the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each... 続きを読む

綺麗なアイコン付きボタン４２個パック:phpspot開発日誌

2011/04/19 53 users phpspot開発日誌 jQuery CSSスプライト 格段

Mega Web Buttons Pack #1 | Codrops 綺麗なアイコン付きボタン４２個パック。 次のように、ボタンにアイコンが付いてより分かりやすくなっているものをダウンロード可能です。 jQueryとCSSが使われていて比較的容易に実装できてマークアップもシンプルになってます。 アイコンがあると無いとでは格段に見やすさが違いますね。 関連エントリ CSSスプライトでカッコイイボタン... 続きを読む