[B! css3] [7ページ] mimosafaのブックマーク

CSS3アニメーションを「:hover」だけではなく、他にも仕込んでみるチュートリアル

CSS3アニメーションはたいていの場合、ホバー時（:hover）に仕込まれるものが多いと思います。ここでは他の疑似クラス「:active」や「:focus」などやMedia Queriesに仕込んでみるチュートリアルを紹介します。 CSS3 Transitions Without Using :hover [ad#ad-2] 下記は各ポイントを意訳したものです。「:active」を使ってCSS3アニメーション「:focus」を使ってCSS3アニメーション「:checked」を使ってCSS3アニメーション「:disabled」を使ってCSS3アニメーション「Media Queries」を使ってCSS3アニメーション各スタイルシートについてのメモ「:active」を使ってCSS3アニメーション疑似クラス「:active」をトリガーにするCSS3アニメーションは、あらゆるエレメ

mimosafa 2011/11/14

リンク

[CSS]ボタンのクリックを楽しくするCSS3アニメーションのテクニックいろいろ

ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。 Demo 1 ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装します。 <a href="#" class="a-btn"> $29 <img src="images/icons/1.png" alt="Photos" /> Available on the Apple App Store <

mimosafa 2011/11/10

リンク

CSS3の:nth-childセレクタで、3n+2とかを計算するやつ

あんまり使わないような使うようなセレクタの:nth-childですが、自分の頭が宜しくないようで、適応させたい箇所の計算で混乱します・・面倒くさいと思っていたのでいいツールないかなと思ってたんですがシンプルでいいのがあったので同じく計算嫌いな方向けにシェアします。 E:nth-child(n)は、親要素のn番目の子要素であるE要素にスタイルを適応させます。とは理解しつつも、(2n+5)とかになってくるとなんか混乱するんですよね。なんで混乱するんだろｗ Nth-Child Visual Calculator n+2とか3n+8とか入れるだけで適応される箇所を明示してくれる、ってだけのシンプルなものです。何度か使って計算の仕方をおさらいしました。使ってないとまた忘れそうですけどね・・こうやって見てみると8n+5なら5個目スタートで8を足していけばいいだけ、って分かるんですけど。ア

mimosafa 2011/11/10

リンク

Proud CSS3 & HTML5 Web Developer? Here's Your Free Toolbox

mimosafa 2011/11/09

リンク

CSS3アニメーションの基本的な実装例のまとめ

CSSのプロパティ一つに対して、値を二つ（開始と終了）変更し、さまざまなCSS3アニメーションの基本的な実装例を楽しめるデモサイトを紹介します。 LeaVerou / animatable デモページ [ad#ad-2] デモページを楽しむには、Chrome, Safariで閲覧ください。 Firefoxでは一部動作しません。アニメーションのスタートは、2つあります。マウスオーバーで一つ一つのアニメーションがスタートアニメーションが全部同時にスタート全部同時にアニメーションをスタートさせるには、「Animate all」ボタンをクリックします。全部同時にアニメーションすると、何がなにやら分からない状態にw [ad#ad-2] 下記に数多くあるデモから、いくつか紹介します。デモの下にある「background-color」などは、そのプロパティの値を変更してアニメーションしている

mimosafa 2011/11/04

リンク

[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル

階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップパンくずはリスト要素で実装します。シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></

mimosafa 2011/06/21

リンク

HTML5とCSS3をページ全体or少しずつ導入するチュートリアル

デモページの全体のキャプチャ下記は各ポイントを意訳したものです。全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。ウェブページにHTML5を導入ウェブページにCSS3を導入ウェブページにHTML5を導入デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh