http://e0166nt.com/blog-entry-852.html
デザイナは要注目！ 明日から語れるHTML5＆CSS3（1/4）- ＠IT
デザイナは要注目！ 明日から語れるHTML5＆CSS3：一撃デザインの種明かし（13）（1/4 ページ） ※本稿では特に断りがない場合、Firefox、Google Chrome、Opera、Safariは2010年7月時点の最新バージョン、IEはInternet Explorer 6/7/8の総称です。 いま世界で一番熱い「HTML5」「CSS3」とは？ 最近、「HTML5」「CSS3」といった言葉をよく耳にしませんか？ これらはWebの表現をもっと豊かにするために策定中の言語です。いままでのHTML 4.01やXHTMLでは実現できなかったことができるようになったり、CSS3はCSS 2.1よりさらにグラフィカルな部分まで表現できるようになりました。 FirefoxやOpera、Safari、ChromeといったHTML5＋CSS3に対応するWebブラウザが増えてきたことで、HTML5
2011年、押さえておきたいウェブデザインの11のトレンドとテクニック
Web Design Trends in 2011 [ad#ad-2] 以下、各ポイントを意訳したものです。 1. HTML5 + CSS3 2. シンプルなカラースキーム 3. モバイル対応 4. 視差効果 5. タッチスクリーン 6. 奥行き 7. 大きい写真の背景 8. 素敵なドメイン名 9. QRコード 10. サムネイルデザイン 11. Life Stream 1. HTML5 + CSS3 HTML5とCSS3はリリースされてから今日まで、あまり多くは使用されませんでした。しかし、この2011年、多くのサイトで採用されるようになるはずです。 多くのデザイナーはFlashから離れてはじめています。次の2つのサイトを見てみてください。 Scribblertoo(Flash) ここで注意してほしいのは、FlashとHTML5は敵対するものではないことを理解しておいてください。問題は、
HTML5+CSS3 入門
Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] よ
ココを押えておけばCSS3がだいたい分かるツール集 | 日刊ウェブログ式
CSS3 Generator CSS3の各ブラウザごとの対応状況の確認とソースコードの生成が同時に行える便利ツール。対応状況はブラウザのアイコンの上にカーソルを持っていくと表示されます。 Official Site CSS3 Gradient Generator v2.0 グラデーションのコードを吐き出すツール。カラーピッカーなどを使って直感的に操作できる Official Site CSS Border Radius ボーダーの角丸を表現するコードを吐き出すツール。四辺の周囲にある数値を変更するだけです。 Official Site Button Maker 画像を一切使わずにCSSだけでクールなボタンを作成。グラデーション、角丸、影などの調節が可能 Official Site CSS3, please! 左側のコードを書きかえると、プレビューが右上のプレビューが変化します。CSS3テス
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
フリーで使える15のHTML5＋CSS3なテンプレートファイル:phpspot開発日誌
15 Free HTML5-CSS3 Templates to Start the Future of Web Design | blogfreakz.com フリーで使える15のHTML5＋CSS3なテンプレートファイルが公開されています。 それぞれ地味なようでいて、HTML5やCSS3のテクニックをふんだんに使っています。 素材として使ってもよいですし、１つの学習用リソースとして活用してみるのも有益ですね。 関連エントリ ハイセンスにデザインされたHTML/CSSテンプレート集 CSSテンプレート配布サイト色々まとめ フリーのビューティフルなCSSテンプレート沢山「Css 4 Free」 フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集 使えるCSSレイアウトテンプレート集「mycelly.com」
[CSS]実例から学ぶCSS3の効果的な使い方
CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。
[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3
<textarea name="code" class="css" cols="60" rows="5"> .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20
[CSS]画像にも負けないクオリティのボタンを実装するスタイルシート | コリス
CSS3を使用して、ディテールにこだわったボタンを実装するスタイルシートのチュートリアルをInferenceから紹介します。 Creating a Realistic Looking Button with CSS3 実装されたデモは、元記事の下「Show and Tell」で確認できます。 対応ブラウザはFx3.6, Safari4, Chromeで、IE8では角丸とアクティブ時のスタイルが欠けます。 実装：HTML ディテールにこだわっているため、HTMLは煩雑なものになっています。これらはCSSの指定に意味をなします。 <textarea name="code" class="html" cols="60" rows="5"> <a class="button"><b class="o"><b class="m"><b>Post</b></b></b></a> </textarea>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これは必見のスイーツのような可愛らしいCSS3ボタン「BonBon Buttons」:phpspot開発日誌
http://www.designwalker.com/2010/06/html5-template.html
http://www.designwalker.com/2010/05/css3.html