紙を折ったようなエフェクトを実装するチュートリアル | コリス
画像を使用せずに、スタイルシートで紙を折ったようなエフェクトを矩形の角に適用するチュートリアルを紹介します。 Pure CSS folded-corner effect [ad#ad-2] 対応ブラウザはCSS3と:before疑似要素を使用しているため、Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+です。 デモページ 紙を折ったようなエフェクトの実装 紙を折ったようなエフェクトは、全部で4種類あります。 HTML HTMLはdiv要素を使用するだけで、class名を変更するだけです。 <div class="note"> コンテンツ </div> 適用するclassは「note」です。 全てのベースとなるスタイルシートです。 .note { position:relative; width:480px; padding:1em 1
第10回 CSS3で自由なボーダーデザインを実現する | gihyo.jp
神は細部に宿る 「おっ」と思わせるようなデザインにするためには「大胆なレイアウトをする」「バランスのよい配色にする」などたくさんの要素がありますが、一見目立たなくてもよいデザインに共通するポイントがあります。それは、「ディテールまでデザインされている」ということです。 近代建築の三大巨匠の一人である「ミース・ファン・デル・ローエ[1]」の言葉だと言われる「神は細部に宿る（God is in the details）」というフレーズがあります。細部にまできめ細かく配慮して作られたものこそ美しく、「細部」が「全体」の完成度に大きな影響を及ぼす、といった考え方を表したものです。 Webデザインにおいても、細部を丁寧にデザインして作り上げていくことがやはり大切。 人がやっていないようなところに手が施されたデザインは、人の目を惹き付けます。 たとえば、画像をボーダーで囲む際に、従来のCS
Adobe HTML5 特設サイト Dreamweaver® CS6 と HTML5 で始めようスマートフォン＆タブレット対応| Adobe - 日本
Dreamweaver CS6 と HTML5 で始めようスマートフォン＆タブレット対応 HTML5 特設サイトは、HTML5/CSS3 やモバイルデバイスの活用を検討している方に最新情報をお届けするアドビ公式サイトです。 事例から Adobe®Dreamweaver® CS6 を始めとする制作環境まで、幅広い観点から Web の新しい方向性をお伝えします。 本文へ 本サイトについて 本サイト自体が、マルチデバイス対応のレスポンシブなデザインの事例として制作されています。表示される画面の大きさに応じて、閲覧し易い様にレイアウトが変化します。詳しくは「互換化とは」をご覧ください。 jQuery Mobile を使ったスマートフォン向けの専用サイトも公開中です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
so-network.biz