[B! CSS3] yukimi1977のブックマーク

[CSS]画像無しで、両端にいくにつれ薄くなるラインを描くテクニック

デモページ [ad#ad-2] 実装全コードはデモページに記載されているので、ここではラインのスタイルをピックアップします。 HTML マークアップはシンプルなリストで、ul要素にclassを指定するだけです。 <ul class="container"> <li>First list it em</li> <li>Second list it em</li> <li>Third list it em, etc.</li> </ul> CSS 両端がフェードするラインはCSS3グラデーションで、linear-gradientを使います。シンプルに書くと下記のようになります。 background–image: linear–gradient(rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0)); 両端が「0」で、真ん中が「1」です。また、このグラデー

yukimi1977 2012/03/22

CSS3

リンク

シンプルなタグなのに凝った綺麗なボタンを作るCSSチュートリアル:phpspot開発日誌

CSS Buttons with Pseudo-elements | Codrops シンプルなタグなのに凝った綺麗なボタンを作るCSSチュートリアルマークアップは、<a>ほげほげ</a> のように超シンプルなのに次のような立体的に凝ったボタンをCSSで作るチュートリアルです。素材として使ってもいいですし、テクニックの学習用にもいいですね 1個CSSを作っておけばリッチなボタンがシンプルなマークアップで記述できるというのは素晴らしいですね。関連エントリ CSSボタン作成チュートリアル＆テクニック集１３ピュアCSSなソーシャルサイトのログインボタン

yukimi1977 2012/01/13

CSS
CSS3

リンク

Loading...

yukimi1977 2011/11/28

CSS3

リンク

これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集:phpspot開発日誌

Animated Buttons with CSS3 これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集ボタンといえば、マウスオーバーした時に色が変わって、押した時に凹みエフェクトが付くようなものが一般的ですがCSS3によってその自由度は大きく上がるようです使わずとも一度はかならず見ておきたいボタン集となってますアイコン付きのボタンカーソルを合わせるとアイコンが拡大しながらフェードアウトしてプライスが表示されますアイコンからプライスへの変更に併せて右側の矢印色もアニメーションさせながら変更するサンプルアニメーションさせないなら画像のすり替えだけですがアニメーションさせているところがポイントですね登録ボタンみたいなものにカーソルを合わせるとボタンが徐々に大きくなり矢印の角度なんかもアニメーションされる例ボタンが大きくなり、更に文言を追加する例。色の変更

yukimi1977 2011/11/10

リンク

[CSS]まるでFlashのように画像とキャプションをアニメーションで替えるテクニックいろいろ

画像をホバーすると、小気味良いアニメーションを伴ってキャプションに替えるCSS3のテクニックを紹介します。デモは10種類あり、CSSでここまでできるのか！って感じです。 Original Hover Effects with CSS3 [ad#ad-2] 基本となるHTML 基本となるCSS 必見の10種類のかっこいいデモ基本となるHTML HTMLは非常にシンプルです。キャプションはタイトルとテキストをdiv要素で内包しclassに「mask」をつけ、そのキャプションと画像をdiv要素で内包します。 <div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </d