[CSS]永遠にスクロールしていたくなる、気持ちいいエフェクト -CSS Scroll EffectsCSS Scroll Effects [ad#ad-2] スクロールのエフェクトは全部で9種類あり、どれもかっこよく気持ちいいです。 デモはFirefox, Chrome, Safari でご覧ください。
[CSS]モーダルウインドウをCSS3アニメーションを使ってエレガントに表示するチュートリアル
モーダルウインドウを表示する際、CSS3アニメーションでズームイン・アウトさせるチュートリアルを紹介します。 デモページ：ズームアウト 実装 HTML div要素でモーダルウインドウを作成し、ページ全体を覆うオーバーレイのdiv要素で内包します。 <div class="overlay-container"> <div class="window-container zoomin"> <h3>Hello I'm zoom in modal window</h3> I'm coming using scale transform, using transform: scale() <br> From <strong>scale(1.2)</strong> to scale(1) with transition property make me looks like <strong>come
[CSS]ハッシュリンク先がどのエリアなのかを分かりやすくするスタイルシート
ハッシュリンク（#hoge）をクリックすると、その先頭はページ上部に表示されるので分かりますが、どこまでがそのエリアなのか分かりやすくするスタイルシートのテクニックを紹介します。 デモページ: 1に移動 [ad#ad-2] 実装 HTML HTMLはシンプルで、ナビゲーションをnav要素、コンテンツをsection要素、各ハッシュリンク先はdiv要素で実装します。 <nav> <a href="#one">1</a> <a href="#two">2</a> <a href="#three">3</a> </nav> <section> <div id="one"><h2>One</h2>Pellentesque habitant morbi ...</div> <div id="two"><h2>Two</h2>Pellentesque habitant morbi ...</div>
[JS]パララックスもApple風スライダーもOK、エレメントごとに動作が設定できるスライダー -Sequence.js
普通のかっこいいスライダーだけでなく、パララックスを使ったスライダー、AppleのiPhoneページに使用されているようなスライダーなどを簡単に、そしてセマンティックに実装できるjQueryのプラグインを紹介します。 Sequence.js - The jQuery Slider Plugin with Infinite Style [ad#ad-2] Sequence.jsの特徴 Sequence.jsのデモ Sequence.jsの使い方 Sequence.jsの特徴 エレメント単位で設定できるCSS3アニメーションを使ったスライダーです。 オープンソース。 すべてのモダンブラウザをサポート。 スマートフォンなどのタッチデバイスをサポート。 古いブラウザでも機能します。 ※IE7とFirefox3.6でもテスト済み。 セマンティックなマークアップ。 Responsive Web Des
[CSS]この発想はなかった！inputとlabelを使って実装する美しいデザインのアコーディオン
パネルが開いた+ホバー時 パネルが開いている時のアローは上向きに変わります。 デモでは上記のチェックボックス版だけでなく、ラジオボタン版などもあります。 デモページ：チェックボックス版 デモページ：ラジオボタン版 デモページ：チェックボックス版・デフォルトオープン 実装 HTML 一つのアイテムに含まれるのは、チェックボックス、ラベル、コンテンツの3つです。それらをdiv要素で内包します。 <section class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox" /> <label for="ac-1">About us</label> <article class="ac-small"> <p>Some content... </p> </article> </div> <div> <
CSSだけで画像をシャレオツにしてしまう４つのエフェクトサンプルコード:phpspot開発日誌
4 Fun CSS Image Effects You Can Copy and Paste | Design Shack CSSだけで画像をシャレオツにしてしまう４つのエフェクトサンプルコード。 次のように、画像を一瞬にしてオシャレにするCSSコード例が紹介されています。 数年前に同じような事を画像編集ソフトでやっていた人がいそうですが、もう一瞬でCSSでできる時代ですよ奥さん、という声が聞こえてきますね 数年後には、もう正直どうやってやってるかわからないけどライブラリ使ったらこうなった的なブラックボックスにどんどんなっていくんでしょうね 関連エントリ HTMLをアップするとCSSのスケルトンを自動生成してくれる「bearcss」 facebookのタイムラインをjQueryとCSSで作るチュートリアル Youtubeのカーソルを合わせるとポップアップするボタン実装CSSサンプル シンプ
[CSS]ホバーの方向で変化するカラーが異なるスタイルシートのテクニック
ブラックに塗られたdiv要素を左からホバーするとオレンジに、右からホバーするとブルーに変更するスタイルシートのテクニックを紹介します。 HTML 最初に表示されているブラックのdiv要素と4つのdiv要素を配置します。 <div class="b-block"> <div class="b-block__hoverer"></div> <div class="b-block__hoverer"></div> <div class="b-block__hoverer"></div> <div class="b-block__hoverer"></div> <div class="b-block__content"> Hover me! </div> </div> CSS CSS3のtransformを使用して、div要素を移動します。 /* The wrapper */ .b-block {
[CSS]1ページで構成されたウェブサイトで使える、かっこいいCSS3アニメーションのテクニック
CSS3アニメーションを使って、ダイナミックなスライドやフェードのアニメーションでページ（コンテンツ）を切り替えるテクニックを3つ紹介します。 Demo 3 Demo 3は左からスライドのアニメーションで切り替わります。 実装 デモは一見、Homeを含む4ページで構成されているように見えますが、1ページで作成されています。 HTML HTMLはdiv要素で配置したコンテンツが4つ、ナビゲーションが1つの構成です。 コンテンツはそれぞれ異なるidとclassを付与します。 <!-- Home --> <div id="home" class="content"> <h2>Home</h2> <p>Some content</p> <!-- ... --> </div> <!-- /Home --> <!-- Portfolio --> <div id="portfolio" class="p
CSS3をサポートしていないブラウザでどのように見えるか簡単に確認できるブックマークレット -deCSS3
CSS3でスタイルした箇所をサポートしていない古いブラウザ、まぁ主にIEなのですが、でどのように見えるのか簡単に確認できるブックマークレットを紹介します。
[CSS]ウェブページのメニューにCSS3を使ってワンランクかっこよくするチュートリアル
Demo 3 背景のカラーがアイテムごとに異なります。 実装 HTML メニューはリスト要素で実装されており、二つのspan要素を内包したa要素とimg要素がアイテムに含まれています。 <ul class="mh-menu"> <li> <a href="#"> <span>Art Director</span> <span>Henry James</span> </a> <img src="images/1.jpg" alt="image01"/> </li> <!-- ... --> </ul> CSS Demo 1では、「.mh-menu li」には背景カラーとして「rgba(255,255,255, 0.8)」が割り当てられています。ホバー時にはこれが淡いブルー「rgba(225,239,240, 0.4)」になります。 .mh-menu li:hover a{ backgroun
[CSS]シンプルなHTMLで角丸のタブをより美しく実装するチュートリアル
画像を使用せずに、リスト要素で実装したシンプルなHTMLで角丸のタブをより美しく実装するチュートリアルを紹介します。 (Better) Tabs with Round Out Borders [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ デモはChrome, Safari, Firefox, Operaでご覧ください。 IEはたぶんIE10で対応するはずです。 デモページ 実装 まずは、HTMLから。 HTML タブをシンプルなリスト要素で実装します。 <ul class="tabrow"> <li>Lorem</li> <li>Ipsum</li> <li class="selected">Sit amet</li> <li>Consectetur adipisicing</li> </ul> [ad#ad-2] CSS CSSの実装は、少しずつキャプチャと
[CSS]すぐに利用できる、美しいボックスシャドウと角丸のスタイルシートのまとめ
一昔前はPhotoshopを使用しないと作成できなかったデザインをCSS3で実装するシリーズのナビゲーション編から、すぐに利用できるボックスシャドウと角丸のスタイルシートを紹介します。 CSS3 vs. Photoshop: Rounded Corners and Box Shadows [ad#ad-2] 下記は、その中からボックスシャドウと角丸に関するスタイルシートをピックアップしたものです。 ボックスシャドウ -box-shadow 角丸 -border-radius 対応ブラウザ ボックスシャドウ -box-shadow HTMLはsection要素を使用していますが、これはdiv要素などでもそのまま利用できます。
[CSS]ボタンのホバー時にアニメーションを適用するCSS3初心者向けのチュートリアル
ボタンのフォントとカラーをセットし、下線を消します。 .buttonText { font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; } a { color: #fff; text-decoration: none; } [ad#ad-2] 実装：アニメーションでボタンのサイズを変更 ボタンのサイズをアニメーションで変更します。 デモページ: demo 1 CSS:Basic ボタンに「display:block;」でブロック要素にし、ボタンの基本となるスタイルをセットします。 #button1 { background: #6292c2; border: 2px solid #eee; height: 28px; width: 115px; margin: 50px 0 0 50px; padding: 0 0 0 7px;
HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」:phpspot開発日誌
Slider.js: Slideshow with jQuery, CSS Transitions and Canvas - example with Flickr HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」 スライドショーライブラリは色々ありますが、Slider.jsはCSS3やCanvasをフルに活用したライブラリとなります CSS3を使った画像切替の効果が豊富に用意されているのが特徴です。 ページ番号、送る、戻るといったナビゲーションの表示方法も色々と変えられるようです APIのところを見ればわかりますが使い方が超簡単でコードもシンプルにかけます。 関連エントリ 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 CSS3を使った超カッコい
[CSS]スマートフォンからデスクトップまで、Responsive Web Design用のCSSのフレームワーク -MQFramework
Demo: Fluid: 768pxで表示 [ad#ad-2] MQFrameworkの特徴 スクリーンサイズ 5つの異なるスクリーンサイズに対応。 320px, 480px, 768px, 960px, 1140px グリッド グリッドは12カラムをベースにし、さまざまなレイアウトに対応。 タイポグラフィ @font-faceを使ったタイポグラフィ。 使い方が簡単 スマートフォンからデスクトップまで対応したResponsive Web Designのサイトを簡単に構築。 カスタマイズ カスタマイズも容易。 カスタマイズ用のスタイルシートファイルもあります。 MQFrameworkの使い方 必要なファイルを一式ダウンロードし、使用するページに外部ファイルとしてスタイルシートを指定します。 <link rel="stylesheet" href="css/master.css" type="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI
CSS3のプロパティやサンプルを調べるのに便利な「CSS3 Click Chart」:phpspot開発日誌
CSS3でシンプルな図を描く際のチートシート:phpspot開発日誌
[CSS]テキスト選択時のハイライトのカラーを変更するスタイルシート
見るだけでもワクワクする、CSS3とjQueryのかっこいい7つのエフェクト