タグ

関連タグで絞り込む (0)

  • 関連タグはありません

タグの絞り込みを解除

CSS3とhtml5とdesignに関するmytechnoteのブックマーク (2)

  • HTML5+CSS3の「カンタン装飾設定」で今風デザイン

    的にグラデーションや角丸はジェネレータからコピペして設定できるので、作業自体は簡単です。HTML5+CSS3サンプルを使って表現してみましょう。 (1)装飾のキモは「グラデーション・線・角丸・影・テクスチャー」 前回HTML5+CSS3の「レイアウトを自在に使いこなす」では、限られたいくつかのCSSプロパティを組み合わせて、さまざまなレイアウトができることをお見せしましたが、今回はそれに装飾を加えていきます。 いざ装飾しようとすると、どこから手を付ければ良いのか迷ってしまうかもしれませんが、アイコンなどの絵を除けば、装飾の要素は「グラデーション」「線」「角丸」「影」「テクスチャー」くらいなものです。それらを整理して組み合わせることで、全体として一体感のあるデザインに仕上げられます。 「それが難しいんだよ!」というお叱りの声が聞こえてきそうですが(笑)、以下の2つを見比べてみましょう。上

    HTML5+CSS3の「カンタン装飾設定」で今風デザイン
  • スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利!

    2012/10/18:画像に一部誤りがありましたので、修正致しました。 こんにちは。 スマートフォンサイト制作案件が増えて楽しいKanaです。 スマートフォンサイトのコーディングは、古いブラウザ (ie6とかie6とかie6とか!)のことを考えるとできなかったCSSの指定ができるので、とても楽しいですね! スマートフォンサイトの制作はリキッドレイアウト。 ナビゲーションの数が奇数!…均等にするにはwidth指定面倒だな〜画像とテキストを横に並べなきゃ…縦方向の揃え位置を指定できたらいいのに…。と思ったことはありませんか? そんな時の強い味方がdisplay:tableと、display:table-cellです。 スマートフォンサイトのコーディングを頻繁にされている方は、既にご存知かもしれませんが、これからスマートフォンサイト作るよ!という方には、とても便利だと思います! display:

    スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利!
  • 1