タグ

*TipsとCSS3に関するuchのブックマーク (2)

  • これが知りたかった!よく使うUI要素をFlexboxを使ってシンプルに簡単に実装するチュートリアル | コリス

    Flexboxの基的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装するチュートリアルを紹介します。 2016年1月12日にIEの古いバージョンのサポートが終了し、Flexboxをそろそろ使うか、と考えている人も多いと思います。 Flexbox Patterns Flexbox Patterns -GitHub Flexboxの実装に役立つ各プロパティの説明は、下記が分かりやすいです。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「display: flex;」からはじめよう 01. 要素を水平に配置する 02. Flexboxで実装する「タブ」 03. Flexboxで実装す

    これが知りたかった!よく使うUI要素をFlexboxを使ってシンプルに簡単に実装するチュートリアル | コリス
  • awesome-css-tutorials-2014-spring.html

    CSSの進化が止まりません。 ページ上部の打ち出し画像をレスポンシブ対応でうまく配置するテクニック、エレメントにちょっとしたアクセントを加えたい、レスポンシブ用のfont-size指定のうまい方法など、スタイルシートの極上テクニックを紹介します。 Zig Zag Border Created CSS 最近見かけるようなったジグザグのボーダー。画像の使用はなし、divの三角形をたくさん並べるでもなく、普通にdiv一つだけで実装できます。区切り線としてもパネルの飾りとしても利用できます。 SVGを使った版はこちら、Pinked Border

  • 1