クールなモーダルダイアログ実装ライブラリ「SimpleModal」:phpspot開発日誌Simple Modal - Another window modal クールなモーダルダイアログ実装ライブラリ「SimpleModal」。 CSS3を使った綺麗なモーダルダイアログの実装ライブラリです。 HTMLや動画の埋め込みも可能で表示の際のエフェクトもカスタマイズ出来るみたいです。 IE8系のブラウザでも綺麗に出力されるようでした。 関連エントリ 今こそ知っておくLightbox風プラグイン20+ CSS3で出来たクールなLightBox実装チュートリアル
CSS3の可能性を見いだし、且つIE8でもレンダリングされる、使いやすくてかっこいいフォームを実装するチュートリアル
Custom Login Form Styling 下記は各ポイントを意訳したものです。 「使いやすい」フォームをつくるポイント 「使いやすい」と「かっこいい」を両立したフォームの実装 「使いやすい」フォームをつくるポイント ログイン、コメント、コンタクト、フィードバックなど、フォームの入力には多くの時間がかかります。もしフォームが使いにくいものであれば、それはあなたがユーザーを混乱させていると言ってもよいでしょう。 フォームをより使いやすく、ユーザフレンドリーにするポイントがいくつかあります。 ラベル ここで言う「ラベル」はlabel要素のことではなく、フォーム上に表示されるラベルです。ラベルは明確にしておく必要があり、この情報によってユーザーはそこに何を入力するべきか知ることができます。 ラベルにはアイコンなどを使って、ビジュアル的に理解を深めるようにしてもよいでしょう。 フィールド
User Interface Design Pattern With CSS3
2012/09/08 HTML5 Conference 2012の講演資料です。
美しい横メニューの作り方
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
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]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プロパティ | バシャログ。
禁煙してから３ヶ月、着実に体重が増加しているishidaです。 先週土曜日にCSS Nite LP13に参加してきました。 ちょうどスマートフォンのデザインとコーディングのお仕事が進行中でしたので、とても参考になりました。現在セミナー内容を振り返り学習中です。 それとCSS Nite関連ですと、何やら CSS Nite LP14 にて弊社メンバーが登壇するとかしないとか。 スマートフォンコーディングでは、CSS3で角丸やらグラデーションが使えるので画像の使用頻度は少なくなります。ボタンまわりについてもCSSのみで実装する機会が多いです。 フォームのsubmitボタンをCSSのみで表現する際には、ちょっとクセがありましたので 解決方法をご紹介します。 検索するsubmitボタンを、以下のようなデザインをCSSのみで実装することにします。 まずは簡単に横幅と背景色・角丸をCSSで設定してみます
CSS3グラデーション・角丸のジェネレーターをjQuery/CSS3/HTML5で作成するチュートリアル
jQuery, CSS3, HTML5を使用して、CSS3グラデーション・角丸を生成するCSS3ジェネレーターを作成するチュートリアルを紹介します。 Creating a CSS3 Generator with CSS3, HTML5 and jQuery デモページ ※デモはWebkit系ブラウザ（Chrome, Safari）で動作します。 [ad#ad-2] 上記デモでは、CSS3グラデショーン（上のキャプチャ）、角丸（下のキャプチャ）のCSS3をブラウザで表示確認しながらコードを生成できます。 チュートリアルでは、HTML5のDOCTYPEの解説から、各要素へのスタイルシートの適用まで詳しく解説されています。 時間がない方は、とりあえずページ下のファイル一式をダウンロードすると、上記のデモがそのまま楽しめます。
[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル
階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></
2010年10月第4週号 1位は、積極的に取り入れたい9つのCSS3（+jQuery）テクニック、気になるネタは、アップルスペシャルイベント「Back to the Mac」でいろいろなものが発表 | gihyo.jp
週刊Webテク通信 2010年10月第4週号1位は、積極的に取り入れたい9つのCSS3（+jQuery）テクニック、気になるネタは、アップルスペシャルイベント「Back to the Mac」でいろいろなものが発表 ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2010年10月18日～10月24日の間に見つけた記事のベスト5です。 1. 積極的に取り入れたい9つのCSS3（+jQuery）テクニックhttp://webdesignrecipes.com/9-css3-and-jquery-techniques/ CSS3を使ったいろいろなテクニックを紹介したチュートリアル記事です。サンプルがどれも実践的で、親切に解説されています。 一部jQueryを使っていますが、基本的には全てCSSだけ
第10回 CSS3で自由なボーダーデザインを実現する | gihyo.jp
神は細部に宿る 「おっ」と思わせるようなデザインにするためには「大胆なレイアウトをする」「バランスのよい配色にする」などたくさんの要素がありますが、一見目立たなくてもよいデザインに共通するポイントがあります。それは、「ディテールまでデザインされている」ということです。 近代建築の三大巨匠の一人である「ミース・ファン・デル・ローエ[1]」の言葉だと言われる「神は細部に宿る（God is in the details）」というフレーズがあります。細部にまできめ細かく配慮して作られたものこそ美しく、「細部」が「全体」の完成度に大きな影響を及ぼす、といった考え方を表したものです。 Webデザインにおいても、細部を丁寧にデザインして作り上げていくことがやはり大切。 人がやっていないようなところに手が施されたデザインは、人の目を惹き付けます。 たとえば、画像をボーダーで囲む際に、従来のCS
その場で動かして体験できるCSS3の実験場「CSS3 Playground」:phpspot開発日誌
CSS3 Playground by Mike Plate その場で動かして体験できるCSS3の実験場「CSS3 Playground」。先日ブックマークで紹介しましたが、もう一度改めてご紹介です。 表示されているスライダーや色をクリックで調整するだけでその場でプレビューが表示されて、どういうCSS3コードをかけばどんな風になるかという部分を確認できます。 素人の方でも、こんなことが出来る、という部分をしっておく場合に使ってみるとよさそう。単純にコードジェネレーターとしても便利です。 どんどん便利なものが出てきますね。 関連エントリ 便利なCSS3ツール6つ＋α ピュアCSS3で3Dアニメーション IE6-8でもCSS3が使えるようになる「CSS3 PIE」 近未来に頻繁に使われるであろうCSS3サンプル１０
Grad? Gradient!-CSS3 GradientButton Generator-
Gradation Slider Like a function of Photoshop. When you click on the vertical gradation slider, you can add a color point to it. Drag the point to right to remove the color. To select the color of the point, double-click on it. If you want to make a complicated gradient soon, click on the sample buttons. Then, default gradient points are added to the slider. You can change the color of the points
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
so-network.biz
IDEA * IDEA
素敵なCSS3ボタンのショーケース:phpspot開発日誌
これは必見のスイーツのような可愛らしいCSS3ボタン「BonBon Buttons」:phpspot開発日誌