絵本をクリックしていくと、ページが次々にめくっていけるようになっています。また、逆方向にもめくることが可能です。さらに画面幅に合わせて大きさも変わるリキッドデザインです。 とにかく、ページのめくれ具合 ページのめくれた後のちょっとした動きがとても良く出来ていてクオリティーが高いです こうった形のギミックをWEBサイトに導入するときにはぜひ参考にしたいコードです – CODE – HTML <div class="book bound"> <div class="pages"> <div class="page"> <h1>Boyhood</h1> <h2>by Jason Hibbs</h2> </div> <div class="page"><!--endpaper--></div> <div class="page"><!--endpaper--></div> <div class="
「CSS3 ANIMATION CHEAT SHEET」ではHTMLの要素に滑らかなアニメーションをつけられるCSSが公開されています。CSS3からアニメーションやキーフレームを指定できるようになり、JavaScriptを使わなくてもCSSのみでアニメーションが簡単につけられるようになりました。よく使われそうなアニメーションをひとまとめにしたCSSがダウンロードできます。 以下に使ってみた様子を載せておきます。まずCSS3 ANIMATION CHEAT SHEETへアクセスしましょう。トップにおじさんの絵がありますが、サンプルの動きに使われます。 アニメーション例はたくさんあります。よく使われるスライドイン・アウトを始め、拡大縮小やバウンドもありますよ。それぞれの項目をクリックすると、おじさんの絵が実際に動いて動作の確認ができます。 使い方は簡単で、配布されているCSSをダウンロードして
アイコン型WebフォントをCSSでデザインしてボタンをいろいろ作ってみました。よく似た記事を書いたことがある気もしますが、今回はフラットな感じにしてみました。 ということで、まずこちらを読み込みます。 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> これで準備はオッケーですので１つずつ解説します。 1. アイコンのみ 無駄な装飾はせず、普通にアイコンを並べるだけです。こういうのも意外と多いですね。 <div id="social-icon"> <a href="#"><i class="fa fa-facebook fa-2x"></i></a> <a href="#"><i class="fa fa-twitter fa-2x"></i
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ：-webkit-transition 対応ブラウザ：webkit系(GoogleChrome、Safari等) JavaScript：未使用 （※ソース閲覧の部分はjsを使っています） 一応アニメーション以外（角丸など）は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-
715 Awesomely Simple and Free CSS Layouts | Design Shack シンプルでフリーな使えるCSSのレイアウト集７１５が紹介されています。 １から作らないでもこうしたものに頼ればすぐに出来ますね。自分の好みの使いやすいページを覚えておくとレイアウト作成をすぐに終わらせ、肝心のツール部分に集中できそうです。 Primary CSS: 22 Layouts Little Boxes: 16 Layouts CSS Easy: 8 Layouts Max Design: 25 layouts Iron Meyers: 224 Layouts 関連エントリ 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 22のレイアウトが収まったCSSフレームワーク「PrimaryCSS」 複雑なCSSレイアウト
<textarea name="code" class="css" cols="60" rows="5"> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{ margin:0; padding:
HTML5+CSS3の環境で汎用的に利用できるHTML・スタイルシート・スクリプトなどのファイルを一式にまとめたテンプレートを紹介します。 ファイル構成：コメント無し版 各ファイルの説明 index.html HTML5の要素を配置した汎用的に利用できるHTMLファイル。各スタイルシートファイルも埋め込まれています。 css/main.css @import用のスタイルシートです。 css/reset.css Eric Meyerの「Reset CSS」です。 css/core.css ベースとなるスタイルが定義されています。 css/_patches 各ブラウザ用のスタイルシートです。 css/_print プリント用のスタイルシートです。 js Modernizrがセットされています。
CSS3で最も簡単にクロスブラウザの角丸を実装したい。 そんなときにおすすめなのが、『curved-corner』。CSS3でIEにも角丸を適用させるhtcファイルです。 Google Codeで、CSS3でIEにも角丸を実装させるファイルが配布されていますね。 クロスブラウザの角丸を実装するには、「border-radius.htc」ファイルをダウンロード、配置して、CSSに以下のように記述すればOKです。 CSS3 -moz-border-radius: 32px;//for Firefox -webkit-border-radius: 32px;//for Safari and chrome border-radius: 32px;//CSS3 behavior: url(border-radius.htc);//for IE すごく簡単な方法なので、CSS3での角丸はこれで決まりな
CSS3はとても便利なプロパティが満載ですが、まだまだ使い慣れていないため、へんなところでつまづいてしまいます。実際に作っていてドロップシャドウと角丸でハマってしまったところをメモ。 CSS3のドロップシャドウ -moz-box-shadow:0 0 3px #cccccc; -webkit-box-shadow:0 0 3px #cccccc; プロパティの内容は以下の通りです。 box-shadow: [横方向のオフセット] [縦方向のオフセット] [ぼかしの半径] [影の色] 上の例では3pxのシャドウ（#cccccc）がグローエフェクトのようにボックスの周りを囲みます。このときボックスレイアウトは左右に3px広がったと解釈されるようです。 つまりシャドウを指定しているボックスが300pxで指定されていれば306pxでレンダリングされるようです。センタリングされているコンテンツエリア
jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Down Menu Fly-out Menu with jQuery and CSS3 カッコいいですねー。反対側からスライドするフライアウトメニュー。css3を使っています。 Fly-out Menu with jQuery and CSS3 Rocking and Rol
かっこいいナビゲーションメニューをさくっと実装したい。 そんなあなたにおすすめなのが、『300+ Jquery, CSS, MooTools and JS navigation menus』。jQueryやCSSを使ったナビゲーションメニュー300選だ。 以下にいくつかご紹介。 » Fancy menu かっこいいナビゲーションメニュー » Amazing apple style navigation menu Appleのサイトのようなナビゲーションメニューの作り方。↑のキャプチャはこちら » jQuery idTabs 8つのクールなjQueryメニュー » navigation-3 プルダウンメニューなど4つの例 » block-navigation CSSデザインのメニュー9選 その他のリストは以下から。 » 300+ Jquery, CSS, MooTools and JS na
デジパのベトナムオフィシャルサイトがオープンしました。 さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。 Movable Type 4のデフォルトテンプレートもそうですが、コンテンツの内容が少ない場合に、フッター部分は当然上に来てしまい、下がbodyに指定している背景色になってしまいます。 キャプチャみたいな感じです。 コレがイヤでフッターをページ下部に固定する方法とかを使う事もあるかと思いますが、アレはアレでコンテンツ部分が間延びしてしまう感じも無きにしも非ずだったりします。 と、言うか個人的には1サイトに1ページ有るか無いかも分からないような部分に労力を割きたくないのが正直なトコロなので、出来れば見逃して欲しい部分だったりします。 htmlとbody要素にheight: 100%指定して...みたいなの
HONGKIAT.COMのエントリー「50超のCSSやJavaScriptで実装するタブ型ナビゲーション集」から、当サイトで紹介したことのないものをいくつか紹介します。 50+ Nice Clean CSS Tab-Based Navigation Scripts
A List Apart - Faux Absolute Positioning CSSでポジションを指定する方法は大きくわけてfloatを使う方法と絶対位置で指定する2つの方法がある。多くのサイトではヘッダとフッタを伴うカラムレイアウトを採用していることが多い。絶対位置指定では縦方向にコンテンツが成長するタイプのレイアウトでフッタの位置を指定できないという問題がある。このためfloatレイアウトを使うわけだが、こちらでは予期しないコンテンツの内容変更によって予定していたポジションからずれてしまうことがある。とくにIEではwidthの挙動に問題があるため制御するのがきわめて難しいという状況だ。 Eric Sol氏はこうした現状に対して新しい指定手法を考案したとし"Faux Absolute Positioning"としてA List Apartにおいて紹介している。同氏はより自由にドラッグ
CSS-Tricksのエントリーから、異なるサイトにも利用が可能な、よく使用するクラスをまとめたスタイルシート「Toolbox CSS」を紹介します。 <textarea name="code" class="css" cols="60" rows="5"> .floatLeft { float: left; } .floatRight { float: right; } .clear { clear: both; } .layoutCenter { margin: 0 auto; } .textCenter { text-align: center; } .textRight { text-align: right; } .textLeft { text-align: left; } </textarea>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
