DIV一個で洒落たボックスを作ってみる！最近知ったCSSを使ったボックス装飾とか色々！ | バンクーバーのうぇぶ屋
CSS3からDIV一個で出来る表現なんかも色々あるんですね。ちょっと前まで超面倒だったボックスのオシャンティーな線の装飾とかぼかしとかグラデになんやらかんやら。DIVボックス一つとっても色々な装飾効果をもたせられるなぁと思う今日この頃。 それこそ、ONE DIVのような一つのDIVで表現できるアイコンを作ってるサイトもあって、CSS3を突き詰めると色々知ることも出来て面白いなぁと思うわけです。 っていうわけで、ONE DIV程凝ったことはできませんが、今日はそんなDIV一個で使えそうなボックスの作り方をいくつかご紹介！擬似要素使ってちょっとちょめちょめしたら縫い付け効果のボックス出来たりと、以外と使えそうなものを選んだつもりなので、一度見てみてもらえると嬉しいです！ちなみに、IEチェックは9だけしてます。8とかはCSSPIE当たりで頑張ってなんとかする方向で…何か変なとこあったら直しますの
CSS3の可能性を見いだし、且つIE8でもレンダリングされる、使いやすくてかっこいいフォームを実装するチュートリアル
Custom Login Form Styling 下記は各ポイントを意訳したものです。 「使いやすい」フォームをつくるポイント 「使いやすい」と「かっこいい」を両立したフォームの実装 「使いやすい」フォームをつくるポイント ログイン、コメント、コンタクト、フィードバックなど、フォームの入力には多くの時間がかかります。もしフォームが使いにくいものであれば、それはあなたがユーザーを混乱させていると言ってもよいでしょう。 フォームをより使いやすく、ユーザフレンドリーにするポイントがいくつかあります。 ラベル ここで言う「ラベル」はlabel要素のことではなく、フォーム上に表示されるラベルです。ラベルは明確にしておく必要があり、この情報によってユーザーはそこに何を入力するべきか知ることができます。 ラベルにはアイコンなどを使って、ビジュアル的に理解を深めるようにしてもよいでしょう。 フィールド
HTML5 × CSS3 × jQueryを真面目に勉強してみる – #4 LESS | DevelopersIO
そんな訳で、拡張メタ言語の中でも特にハードルの低いだろうLESSに触れてみることにしました。 拡張メタ言語 - LESS メタと称されるだけあって、LESSはHTMLやCSS、JavaScriptといった類の言語とは毛色が違います。そういった言語によって記述されたソースコードと同じ意味（機能）を持ちながら、より簡略的に表現できるようにしたための言語というわけです。 念のため分かりやすく補足しておきますと、メタとは比喩とか暗喩という意味であって、「アンタなんか牡丹じゃなくて豚よッ！」というセリフの豚という表現が正にメタに当たります。 ※豚というのは例えであって、本当に動物の豚だといっているわけではありません。 他にもこのような拡張メタ言語には、CSSに対してSCSS(Sass)、HTMLに対してHamlといったものがあります。JavaScriptに対してCoffeeScriptというのが比較
» html5boilerplateに見る最近のHTML・CSSプラクティス: エスキュービズム ラボ Blog
html5boilerplate(日本語サイト)は、HTML、CSS、JSのベストプラクティスを詰め込んだテンプレートを提供するサイトです。ここでは、そこで使用されているプラクティスの幾つかを紹介します。 modernizr.jsによるHTML5/CSS3の対応調査 Modernizrは、ブラウザがHTML5/CSS3の新機能に対応しているか否かを判別するjavascriptです。このスクリプトを置くと、htmlのトップ要素に新機能の対応結果を示すclassがページロード時に付与されます。CSSではその付与されたclassを利用して、新機能が使える場合とそうでない場合に分けてスタイルを書くことができます（参考サイト）。 例えば、boxshadow機能がブラウザで使えない場合、 <html class=”no-boxshadow …”> のように、classがページロード時に付与されます。h
「Modernizr」 モダンなクロスブラウザCSSの為の支援スクリプト - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） HTML5/CSS3で新たに使える機能がブワッと増えたわけですが、 新機能に対応している環境というのはまだまだごくわずかです。 ということは、機能が使えるor使えない場合に処理を分けたりしなければいけないわけで。 「Modernizr」は、それを支援してくれるJavaScriptライブラリです。 Modernizr 「Modernizer」ではなく、「Modernizr」。 eが欠けている点に注意。Flickrみたいな感じ。 Modernizrがしてくれる事は、ただ一つの単純な処理です。 閲覧しているブラウザが、或る機能に対応しているかどうかをJavaScriptで判別し、 その結果をhtml要素のclassという形で教えてくれます。 例えば、box-shadowに対応しているかどうかを知りたい場合。 Modernizrを読み込
CSS3のTIPSなどのまとめ (2011/11/29)
CSS3で表現力が高くなったからと言って、span等でボタンを作るのはやめて下さい。いえ、やめなさい。もう少し真っ当なHTMLを作ることを心がけましょう。むしろ今すぐwebの仕事辞めて腹を切って死ぬべきである！ (AMAgrammar PROgrammer) Line Decoration (CSS3 Text)；下線・上線・打ち消し線 - CSS3ウェブブラウザ実装メモ (血統の森 web実験小屋) あの「Wonderwall」をCSS3を使用して表現してしまった「Wonder Webkit」 (FREAK LAB) CSSの内側ドロップシャドウを使ったひと味違う表現 (Good thinking) CSS3のWebフォントを使用して作られたWebサイトあつめました (Webデザインクリップ) CSSS3で作る各種ソーシャルサイトのサインインのボタン → CSS3 Social Sign
[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
HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識～活用まで ｜https://wp.yat-net.com/name
2011年 07月 11日 HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識～活用まで カテゴリ： CSS3 HTML HTMLとCSS タグ：CodingCSS3ジェネレーター作成支援ツール 現状HTML5とCSS3を利用したサイトの構築は自分の仕事上では出てきそうにないのですが、そうは言っても何も情報を収集しないわけにも行かないのでブックマークは当然しています。しかし、ただ単に貯めてるだけだといざという時活用出来ないので、一度ブログに書き留めておこうと思います。 html5 現状深く調べておらずリファレンスやタグ辞典的なものを収集しています。最近友人のクロ（@CROO1379）が色々情報を収集してサイトを構築しており、リファレンス的な意味ではかなり拾えそうな感じになっています。
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がアイコンの前景をつなげたスプライ
Demo: CSS3 Buttons
CSS3 Gradient Buttons by Web Designer Wall Rectangle or Rounded Can be Medium or Small Button Tag Span Div P Tag H3 Gray Rounded Medium Small Button Tag Span Div P Tag H3 White Rounded Medium Small Button Tag Span Div P Tag H3 Orange Rounded Medium Small Button Tag Span Div P Tag H3 Red Rounded Medium Small Button Tag Span Div P Tag H3 Blue Rounded Medium Small Button Tag Span Div P Tag H3 Rosy Ro
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://html5please.us/
adakoda.com
CSS Load.net - Loading CSS spinners and bars generator for AJAX & JQuery
CSSでつまづいたポイント ― transparent, transition, box-sizing
Loading...
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
CSS3とHTML5の主要ブラウザの対応状況一覧
CSS2.1とCSS3のプロパティが見やすくまとまったチートシート