CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
[CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニック
CSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。 How to create slick effects with CSS3 box-shadow デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 box-shadowプロパティとは ページ全体に奥行きを加えるエフェクト 紙がめくれたようなエフェクト 対応ブラウザ box-shadowプロパティとは 「box-shadow」は、ボックス要素の内側・外側に多数のシャドウを加えることができるプロパティです。フォーマットは下記のようにオフセット、サイズ、ブラー、カラーの値を指定します。 <shadow> = inset? && [ <length>{2,4} && <color>? ] 簡単な例をみてみましょう。 box-shadow: 3px 3px
888SLOT > Link Pendaftaran di 888SLOT, Situs Slot Terbaik dengan Peluang Maxwin yang Terpercaya
888SLOT > Link Pendaftaran di 888SLOT, Situs Slot Terbaik dengan Peluang Maxwin yang Terpercaya 888SLOT adalah situs pendaftaran yang menyediakan permainan slot teratas, mudah dimenangkan dengan hadiah maksimal (maxwin), dan telah menjadi populer baru-baru ini. 888SLOT telah bekerja sama dengan penyedia slot resmi di seluruh dunia, menjadikannya situs slot yang paling diminati oleh para penggemar
人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ！ | Chrome Life
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
みんな大好きリキッドレイアウト～固定幅＋リキッドレイアウトに挑戦～ « SetucoCMSプロジェクト
はい、こんにちは。リーダーのskyguildこと三上です。 SetucoCMS合宿@2011のLT大会でリキッドレイアウトの話をしました。今回はそのスライド内で語り切れないデモの部分を中心に解説してみます。 リキッドレイアウトのLTスライド うまく表示されない方は下記のリンクからご覧ください。 みんな大好きリキッドレイアウト（別窓で開きます） 要約 リキッドレイアウトとは、可変レイアウトの一種で、ブラウザ幅に対して％で幅を指定する。 リキッドレイアウトなら閲覧環境に合わせて最適なレイアウトに可変できる！ とはいえ、「ナビゲーションの幅が可変すると使いづらい」とか一部は固定幅にしたい。そんな時の固定幅+リキッドレイアウト。 参考にしたサイト：「サイトの横幅」再論：950px時代のウェブデザイン 実装方法 というわけで、普通のリキッドレイアウトと、固定幅+リキッドレイアウトの実装方法について解
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
テキストや画像でパララックス効果のあるコンテンツを実装するjQueryコード - かちびと.net
パララックス効果のあるコンテンツ を作る為の雛形みたいなコードがあ ったのでメモ。既に似たようなのは いろいろあるんですが、div要素を 使って実装していて自由度がありそう だったので備忘録的に記事にしておき ます。 昨日訳あって、FAQサイトをさまよってたらたまたま見かけて良さそうだったので勉強用にちょっと拝借しました。 Parallax with jQuery レイヤーはdiv要素です。赤いボックスはクリックで緑に変わりますが、IE7以下ではz-indexのバグがあるためクリックできません。 スピードや動く範囲だけなら以下のあたりを変えればいいです。 distance = 70;//マウスに対して要素が動く距離 sensitivity = 7;//感度。というか動くスピード var distHalf = distance / 2; //親要素を指定したセレクタ var parW = $
jQuery＋CSSによるカルーセルパネルの作り方 (1/3)
「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル（Carousel：回転木馬）は、メリーゴーラウンド（merry-go-round）のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。 HTML/CSSでカルーセルのベースを作成する 今回作成するカルーセルパネルのHTML／XHTML（以下、HTML）は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp
Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと.net
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
jQueryとCloud-zoomプラグインを利用した画像の拡大表示
jQueryとCloud-zoomを利用した画像拡大表示 縮小画像内にカーソルを移動すると拡大画像を表示します。 画像の拡大表示（100%表示） jQuery1.3.2とCloud-Zoomプラグインを利用して拡大画像を表示します。 画像を元の画像（あまり大きな画像は読み込みに時間がかかります）・ 縮小画像（ここでは幅350px;)・サムネイル画像（ここでは幅100px）を 準備します。 サムネイル画像による画像の変更が必要ない場合（1枚の画像のみの場合）、 サムネイル画像は必要ありません。 サムネイル画像（小さな画像）をクリックすると縮小画像（左の画像）がクリックしたサムネル画像に 切り替わります。 縮小画像にマウスポインタを移動すると右側に100%表示の画像が表示されます。 Cloud-zoomを動作させるアイテム htmlのheadタグ間に <link rel="styles
JavaScriptのDOM Core基礎 - 三等兵
Coreの簡易リファレンス。Coreは要素を参照したり、相対位置から周りのノードを参照したり、要素を生成するといった部分。主に利用するであろうプロパティやメソッドはカバーしているつもりですけど、これも入れとけってのあったら教えてください。 このあたりは地味で使いづらくその上理解しにくいという残念な部分。ふと忘れたときに使う個人的なものですが、慢性jQuery拒絶症候群な人よかったらどうぞ。それにしても暑い。ガリガリ君おいしいね。 DOMとは。 Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。端的に言えば、Web ページをスクリプトやプログラミング言語とつなぐような機構です。 https://developer.mozilla.org/ja/
Youtube動画をページ背景にするjQueryプラグイン「tubular」:phpspot開発日誌
tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design Youtube動画をページ背景にするjQueryプラグイン「tubular」 こんなことが出来ちゃうのかという感じですが、ページ背景全体をYoutube動画にできます。 実装は、$('body').tubular('_VKW_M_uVjw','wrapper'); のように、tubular にvideoIDの引数とラッパーのIDを渡せばOK。 背景をクリックで動画にとんじゃいますが、ホスティングしてもらってるわけなのでしょうがないですね。 コンテンツ領域は問題なくクリックできるところがナイスです。 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 時間の入力を楽にすることが出来るjQuer
どう考えても無茶な「CSSプログラミング」が話題に
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
Create a new fiddle - JSFiddle
CSS3 Lightbox
Components · Twitter Bootstrap
新年の挨拶…本気伝わる「CSS3スライド」でやってみない? 【増田(@maskin)真樹】 | TechWave（テックウェーブ）
ど素人のCSSのみで行うブログデザイン構築編② 〜ブログの寸法を知っておこう！〜 | なまら春友流
Pingdom Tools
