花に囲まれた洋館HTML/CSSコーディングTwitterFacebookはてブPocketLINEコピー2013.03.03スポンサーリンクCSSでつくるahaムービーその2。以下の画像のどこかが30秒かけて徐々に変化します。どこが変わってるでしょうか。IE9以下非対応です、モダンブラウザでご覧ください。30秒で変化しきってそのあと30秒で逆再生...を無限ループしてますのでじっくり何度も見てればわかるかも。黒枠にマウスのっけると解答が表示されます。前回のが思いのほか気づきにくかった?みたいなのでものっすごくわかりやすいとこ変化させてみました...がさすがにこれは目立ちすぎですね。ちなみにこれはCSSのキーフレームアニメーション使って作ってます。問題の画像加工も丁寧にやんないと面白みも半減なのでその辺も頑張んなくちゃ。BLOG関連記事HTML/CSSコーディングCSSキーフレームアニメーションを使ったバナーの作りかた広告バナーで多少動きのあるものを作ろうと思ったら現在でもアニメーションgif使うのが主流だと思うんですが、CSSのanimationプロパティとキーフレームを使ってそれっぽいもの出来ないかなぁと簡単なものを試作して見ました。HTML/CSSコーディング[いまからHTML5]本文で使っちゃいけない文字のこと今回はちょっとHTMLタグの説明をはなれて、文書の本文を書くときに気をつけなきゃいけないことについて。HTML5だけでなく以前のバージョンでも同じ話ではあるのですが。特殊な文字を表示する場合にはどうしなければならないか、という話です。HTML/CSSコーディング[いまからHTML5]まずはHTMLファイルの骨組ただいまHTML5勉強真っ最中のゴロドクです。まともにコーディングの指導というものを人から受けたことがなくもっぱら書籍とウェブ上の情報で自習しているわりとグダグダな感じの私ですが、覚えたことを備忘録的に書いたら同じように独...HTML/CSSコーディングCSSで作る立体的なボタンセットのサンプルコードよく見かける立体感のあるボタンの作りかた。グローバルナビゲーションで使われるような横並びのボタンセットをリストアイテムとした場合のサンプルです。HTML/CSSコーディングCSS知らないとハマり続けるfloatboxの貫通問題CSSでデザインしてて、「あれっ」と思うこと。親要素の中にfloatした子要素を入れると子要素の高さが親要素の高さに反映されず貫通して表示されてしまう問題。基本的なことですが一応整理しておかないといつまでもハマり続けたりするので備忘録を。Lint」が昨年(2011年)10月中旬頃よりHTML5に対応しています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。(1)スポンサーリンクタイトルとURLをコピーしました。