IE8以上ならもうスクリプト無しでOKのモーダルウインドウを表示するスタイルシート -CSS Modal
テキストや画像などのリンクをクリックすると、画像をはじめあらゆるHTMLの要素が配置可能なモーダルウインドウを表示するスタイルシートを紹介します。 CSS Modal CSS Modal -GitHub CSS Modalのデモ CSS Modalの使い方 CSS Modalのデモ デモはIE9を含む、すべての最新のモダンブラウザでご覧ください。モバイル系は、iOS, Android2/3/4のMobile Safariで非常に機能し、Windows Phone8でも機能します。 IE7以下は非サポートで、IE8はエフェクトなしで機能します。 まずは、テキストを配置したモーダルウインドウから。 Modal Text モーダルウインドウ内にトリガーを設定することも可能で、「Open a new modal」をクリックすると別のウインドウが開きます。 ウインドウを閉じるには、右上のクローズをク
いまさら聞けないRetina対応のための「ピクセル」の話
ピクセル密度とピクセル比の関係 ピクセル密度は、数が多ければ多いほどスクリーン上で鮮明な描画ができるわけですが、上述したピクセル比とは直接関連しないものです（と考えています）。たとえば、Galaxy S IVのようにピクセル密度は441ppi、ピクセル比は2という端末もあれば、HTC Oneのように、ピクセル密度は468ppiだが、ピクセル比は3という端末もあります。 ※両方とも実機で検証したわけではないので、Wikipediaの情報が正しければの話ですが。 ※ピクセル比とは違うものですが、それと似た単位であるdppx (dots per pixel unit)では、CSSで定義された1インチが96pxになるため、1dppx = 96dpiになります。 ピクセル比に似た値「dp」とwindow.devicePixelRatio Androidの密度非依存ピクセル「dp」 Density-i
無料で使える単一ページのHTML/CSSテンプレート集
美しい単一ページの無料テンプレート集。 CSS/HTMLの勉強にも使えそうですが、細かいところで単一ページらしいアイデアが使われているところも見所です。 色々と使い所満載のテンプレート集 単一ページだからと思って油断していましたがなかなかのクオリティでびっくり。 Free Single-Page HTML5 Portfolio Template Demo / Download スライドショーの部分も細かいですがよく出来てます。 Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 Demo / Download Page 一般的な縦型のシングルページ。スムーズな移動も特徴的です。 Resume (HTML) Demo / Download Page Roundfolio: A Free Portfolio T
25 Powerful Examples of Masonry jQuery Web Design
jQuery is a powerful tool for animation, image galleries, tooltips, dynamic forms, real time updates and a variety of other techniques that we’ve featured jQuery tutorials on before. It is purely used on many cased either in web design or development. However, jQuery web design effects can be hard to implement in designs properly, because you have to know how to use them to enhance usability and n
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSをもっと使いこなしたい人用のいろいろなテクニックが見られるサイトのまとめ
CSSハックしない、JavaScript使わないCSSの教科書みたいなテンプレ*ホームページを作る人のネタ帳
透過をきれいに使ったウェブデザインいろいろ - DesignWalker
http://e0166nt.com/blog-entry-415.html
ユーザーが2～3カラムや800pxか1000pxか等を動的に変更できるすごいJavaScript*ホームページを作る人のネタ帳