タグ

web制作とエフェクトに関するkams3261のブックマーク (2)

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

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

    CSSのみでテキストにグラデーションやリフレクトをかけるテクニック(ちょっと更新) - くらげだらけ
    kams3261
    kams3261 2011/11/14
    CSSのみでテキストにグラデーションやリフレクトをかけるテクニック
  • エフェクトが無駄に凄いイメージスライダーを実装出来るjQueryプラグイン・Chop Slider - かちびと.net

    実用性は別にして、こういうの嫌いじゃない ので記事にします。よくあるイメージギャラリー なんですが、画像が変わる際のエフェクトが 無駄に凝っています(褒め言葉です)。こんな 事もflashを使わないで出来るんだなー、と 素直に関心したので、同じ気持ちで見て 頂けたら嬉しいです。 エフェクトはかなり多く用意されており、どれもなかなか派手な印象です。これだけのエフェクトをクロスブラウザに対応させているのもちょっと驚きです。※IE6にも対応とあるのですが、現在諸事情で確認出来ませんので対応してなかったらごめんなさい。 えらいこっちゃ・・なエフェクトばかりです。エフェクトはかなりの数が用意されており、1つのエフェクトも細かい設定が可能になっています。 まずはエフェクトの一部を無言でご紹介します。 ちょっとヒーローとかの変身シーンみたいな感覚です・・実際に動きを見てもらうと、いかに無駄にすごい動きか

    エフェクトが無駄に凄いイメージスライダーを実装出来るjQueryプラグイン・Chop Slider - かちびと.net
  • 1