タグ

テクニックに関するderitmiのブックマーク (2)

  • CSSのみでテキストにグラデーションやリフレクトをかけるテクニック(ちょっと更新) - くらげだらけ

    前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。 今回はCSSでテキストにグラデーションをかけるテクニックについてです。 前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。 このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。 通常、CSSでテキストカラー(colorプロパティ)にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体

    CSSのみでテキストにグラデーションやリフレクトをかけるテクニック(ちょっと更新) - くらげだらけ
  • [CSS]CSSスプライトの利点と潜在的な問題点、そして解決方法

    CSSのテクニックに中でも最も使用されている一つ、CSSスプライトの利点と潜在的な問題点、そしてその解決方法を紹介します。 Transparent CSS Sprites デモ [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに CSSスプライトの利点と潜在的な問題点 CSSスプライトの潜在的な問題の解決方法 解決方法のデモ おわりに はじめに 最近のフロントエンドの開発に必要不可欠なテクニックの一つにCSSスプライトがあります。このテクニックはA List Apartの記事「CSS Sprites」によって普及されたものです。 CSSスプライトは一度理解したら当にシンプルなテクニックで、あらゆる方法に応用することができます。一般的に利用されるのはナビゲーションで、他にもボタンや見出しにも使用されています。 スプライトは複数のイメージを一つのファイルにマージして使用します

  • 1