[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
手軽にデザインを変更できるCSS3ボタンを作る為のフレームワーク・CSS3 Buttonize Framework
軽量なフレームワークだよ！とのことです。デザインもシンプルで個人的に好みでした。何と比べて軽量なのかな？ サンプル適当ですみませんけどサンプルです .button { font: 14px/36px "Droid Sans", sans-serif; height: 36px; border: 2px solid #333; padding: 5px 14px; margin: 0 6px; text-shadow: 1px 1px 1px #FFF; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 1px 1px 6px rgba(255, 255, 255, 0.3); -webkit-box-shadow: 1px 1px 6px rgba(255, 2
パブリックドメインで配布されている、クロスブラウザ対応を意識したHTML5+css3製のフレームワーク・Gridless
いくつも似たようなのはあるのですが、 複数覚えておいて損は無いのでメモ がてらご紹介・・・クロスブラウザ対応 を意識したHTML5+CSS3フレームワ ーク・Gridlessです。装飾を施さない、 とてもシンプルなものになっています。 Gridlessは、美しいタイポグラフィをクロスブラウザで実現するためのフレームワークです。MediaQueryによって、スマフォにも対応しやすい雛形になっています。 ライセンスは一部のjs（Respond.jsとHTML5 shim）を除いてパブリックドメイン（著作権放棄）で配布されています。 無駄な装飾がないので、1から作るプロジェクトのスターターキットとしても使えそうです。クロスブラウザ対応といっても、完璧ではなく、より差の無い実装となっています。 各テキストのエレメント。 IE6や7にも対応 IETesterによるIE6の表示です。 タブレットやスマ
2010年総まとめ：CSSの実用的なテクニック集
CSS3で何ができるの？ という時にみておきたいサイト集 ベーシックなものから実践的なテクニックまで、サンプルやコードなど実装例が掲載されているサイトをご紹介。
立体感がいい感じの３Dギャラリー作成JSチュートリアル:phpspot開発日誌
How to make a 3D gallery using javascript ? Script Tutorials 立体感がいい感じの３Dギャラリー作成JSチュートリアル。 奥行きのある空間内を画像がダイナミックに動くギャラリーを作るチュートリアルです。 パッケージのダウンロードとデモが体感できます。 覚えておくとこうした演出がほしい場合にすぐ実装できそうですね。 最新のブラウザでみれば動きもわりとなめらかでストレスになりません。 関連エントリ CSS3をフル活用した立体的な画像ギャラリー作成デモ CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」 HTML5を使ったサイトをまとめたギャラリーサイト色々 超カッコいいApple風スライドショーギャラリー作成チュートリアル
Webデザイナー&UIデベロッパー向けのHTML5/CSS3/jQuery/PHPフレームワーク・G5 Framework
Webデザイナーやフロントエンドデベロッパー 向けのフレームワークが登場したようですね。 HTML5/CSS3/jQuery/PHPを使って構成さ れており、シンプルで軽量。小規模レベルの プロジェクトのスターターキット等にも利用して 欲しい、とのことです。 話題を集めるHTML5やCSS3、jQueryで構成されているので勉強がてら触ってみるのもいいかもしれません。ライセンスはGPLとMITのデュアルライセンスです。 (X)HTML5, CSS3, PHP & jQuery Front-End Development Frameworkとのこと。PHPファイル1枚にHTML5/css3/jQueryを詰め込んだシンプルな構成です。 簡単に始められますよ。最初からそこそこ作られています。 マルチカラムのデモなんかも。 上記はIETesterを使用したIE7のキャプチャ。CSS-PIEなども
[CSS]画像のキャプションを省スペースにさりげなく表示させるスタイルシート
画像にマウスをホバーさせると、キャプションがアニメーションでスライド表示される省スペース用エフェクトを実装するスタイルシートのチュートリアルを紹介します。 Slide In Image Captions [ad#ad-2] キャプションをスライド表示させる画像のデモ デモでは、画像ごとに異なる方向から異なる位置にキャプションがスライド表示されます。 デモページ スライドは、CSS3 transitionに対応したブラウザ（Chrome, Safari, Opera）ではアニメーションで表示し、非対応ブラウザ（Firefox3）ではアニメーション無しで表示されます。 [ad#ad-2] 以下は元記事の各ポイントを意訳したものです。 なぜ、このようなエフェクトをするのでしょう？ それはレイアウトのスペースを節約するためです。そして、キャプションの存在は画像からユーザーの気を散らしてしまうことも
[CSS]IE6, 7も考慮した、CSS3で実装するドロップダウンメニュー
IE6, 7でもドロップダウンとしての機能を損なうことなく、そしてCSS3対応ブラウザでは更に見栄えをよくし、ユーザビリティも向上させるスタイルシートのチュートリアルを紹介します。 CSS3 dropdown menu デモページ [ad#ad-2] CSS3非対応のIE6, 7ではCSS3の角丸などは適用されてませんが、ドロップダウンとしての機能は損なわれずに実装されています。 デモページ：IE6での表示 下記は各ポイントを意訳したものです。 HTML HTMLはシンプルで、ドロップダウンはリストの入れ子で実装されています。 <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">Categories</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">Graphi
CSSスプライトでカッコイイボタンを作るチュートリアル:phpspot開発日誌
CSS Basics: How to Design & Code a Stylish Button CSSスプライトでカッコイイボタンを作るチュートリアル。 CSS3は使っていませんが、３つの画像を１枚にして、hover時、active時に変化するボタン作成の例です。 CSS3でいきたいところですが、CSS3非対応ブラウザにして、かつ、デザインもオーサリングツールで凝ったものにしたいというケースにおいて参考に出来ます。 デモページ マークアップ自体は次のように非常にシンプルに出来ます。 <a href="#" class="btn">Push the button</a> どうしてもクロスブラウザで動いてJSなしにCSSで行きたいって場合のシンプルでベストな方法ではないでしょうか。 関連エントリ ブラウザごとのCSS3プレフィクスを自動で付与できるWEBサイトツール「prefixMyCSS
CSS3で画像もJSも使わないモーダルボックスサンプル:phpspot開発日誌
CSS Modal ? Paul Hayes CSS3で画像もJSも使わないモーダルボックスサンプル。 ボックスが徐々に大きくなりつつフェードも組み合わせたアニメーションがCSS3で実現されているところがいいです。 ボックスも影がついてて閉じるボタンだってあります。 JavaScriptを切っても動いてます。 実際に使う場合はやっぱりJSを使ったほうが便利なものが出来るわけですが、CSS3だけでも出来るっていうところは知っておいてもよいというのと、内部で使われているテクニックもなんとなくでも覚えておくといいのかもしれませんね。 関連エントリ グラフィカルに加速度を作って要素をCSS3アニメーションさせられる「Ceaser」 IE9にも対応したCSS3リファレンスサイト「css3files」 超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル CSS3で実装され
CSS3で実装されたボタンのサンプルやチュートリアル総まとめ:phpspot開発日誌
CSS3で実装されたボタンのサンプルやチュートリアル総まとめ。 当サイトでは色々とCSS3ボタンのエントリを紹介してきていますが、ここら辺でちょっとまとめてみました。 画像つくるのはめんどうだしCSS3でやっちゃおうという場合に参考にしてみて下さい。 立体感がいい感じのiPhoneにも採用されているボタン実装CSS3サンプル iPhone風のボタン実装 ステップで学べるCSS3ボタンのデザインチュートリアル CSS3ボタンのデザインチュートリアル 綺麗にデザインされたCSS3ボタンのまとめ カラフルで美しいCSS3ボタン これはクール！カーソルを合わせると背景がアニメーションするCSS3ボタン実装例 デザインは微妙かもしれませんが、カーソルを合わせると背景が動くあたりテクニックとして覚えておくとよさそう CSS3だけで実現するクリックすると色の変わるボタン実装 クリックで色が変わります。
HTML5とCSS3をページ全体or少しずつ導入するチュートリアル
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
iPadなどのタブレットデバイスで読みやすいコンテンツを作成するためのフレームワーク -Bibliotype
iPadなどのタブレットデバイスでコンテンツを見る際に、さまざまなシーンを想定して読みやすいコンテンツを提供するためのフレームワークを紹介します。
CSS3が非対応なブラウザでも利用できるようにするツールのまとめ
Modernizr [ad#ad-2] ツールの概要 JavaScript ドキュメント 利用できるプロパティ @font-face border-image border-radius box-shadow text-shadow opacity Multiple backgrounds CSS Animations CSS Gradients など CSS3 PIE ツールの概要 ビヘイビア スクリプト(htc) デモページ 利用できるプロパティ border-radius box-shadow border-image multiple background images linear-gradient as background image
CSS3用のオンラインツールまとめ「10 Useful CSS3 Tools for Your Next Web Development」
TOP > WebService > CSS3用のオンラインツールまとめ「10 Useful CSS3 Tools for Your Next Web Development」 WEB制作者の話題では最近耳にする機会も多いCSS3。多くのWEB制作に携わる人にとっては無視できない存在だと思います。もうすでに利用されているという方もいるかと思います。今日紹介するのはCSS3を便利に使うためのCSS3用のオンラインツールをまとめたエントリー「10 Useful CSS3 Tools for Your Next Web Development」。 KEYS.css コードを参照するものから、ジェネレータ系まで様々なオンラインツールがまとめられています。今日はその中から幾つか気になったものを紹介したいと思います。 詳しくは以下 ■CSS3 Click Chart by Impressive
Webサイトのスマートフォン対応 7つの基本ルール | Web担当者Forum
個人利用を中心に急伸を続けるスマートフォン市場は、もはやニッチ市場ではなくなりつつある。過去に企業サイトの携帯電話（フィーチャーフォン）対応が問われたように、今後スマートフォン向けのサイト対応が課題になると考えられる。2010年はスマートフォン元年といわれていたが、2011年は企業のスマートフォンサイトへの投資検討が本格化してくるだろう。 2010年、スマートフォンの市場規模は急成長し、『スマートフォン利用動向調査報告書2011』（MCPC監修、インプレスR&D発行）によると、2011年3月末（2010年度）の契約数は、前年の497万契約から63％増の810万契約となる見通しだ。調査によると、契約数は年平均40％以上で拡大を続け、2015年度には4,712万契約に、コンテンツ配信事業も急成長することが予測されている。こうした調査からも、今からサイトをスマートフォンに対応しておくことが決して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」:phpspot開発日誌
CSS3の各プロパティの値を少しずつ変えた見栄えが比較できるオンラインサービス -i2Style
[CSS]グリッドだけでなく、主要エレメントも揃ったCSS3ベースのフレームワーク -Not Just a Grid
HTML5とCSS3を使ってスマートフォン向けサイトを構築 － iPhone版Yahoo!JAPANトップの開発事例紹介