CSSahaムービー 花に囲まれた洋館
出題編 以下の画像のどこかが30秒かけて徐々に変化します。さてどこが変わってるでしょうか。IE9以下非対応です、モダンブラウザでご覧ください。 30秒で変化しきってそのあと30秒で逆再生…を無限ループしてますのでじっくり何度も見てればわかるかも。 答えは以下の通り。黒枠にマウスのっけると解答が表示されます。 解答編 前回のが思いのほか気づきにくかった？みたいなのでものっすごくわかりやすいとこ変化させてみました…がさすがにこれは目立ちすぎですね。 ちなみにこれはCSSのキーフレームアニメーション使って作ってます。 問題の画像加工も丁寧にやんないと面白みも半減なのでその辺も頑張んなくちゃ。 んじゃまた。
CSSで作ったahaムービー 空き地に放置された… | 56docブログ
一昔前にahaムービーって流行りましたよね。時間かけてちょっとずつ変化する画像、どこが変わってるかわかりますか？ってやつ。 たしか脳科学者の茂木健一郎さんがテレビ出だした頃からですよね。あれっぽいやつCSSで作ってみたのでどうぞ。 出題編 以下の画像のどこかが30秒かけて徐々に変化します。さてどこが変わってるでしょうか…あ、すみませんIE9以下では多分見れないと思いますのでモダンブラウザでどうぞ。 ちなみに30秒で変化しきってそのあと30秒で逆再生…を無限ループしてますのでじっくり何度も見てればわかるかも。 答えは以下の通り。黒枠にマウスのっけると解答が表示されます。 解答編 ちょっと簡単すぎましたかね？ ちなみにこれはCSSのキーフレームアニメーション使って作ってます。 次はもうちょっと凝った問題作ってみようかな。 んじゃまた。
もうCSS3で悩まない チートシート/リファレンス系サイトまとめ
先日書いたCSS小ネタまとめのようにCSS3も使えば使うほど味が出て、応用次第で色んなことできて楽しいですよね。私も大好きです、CSS3。 IE非対応云々のためハックがどーこーとかめんどくさいことはありますけど。 というわけでここらで初心者からパワーユーザーまでぜひおさえておきたいチートシートページやリファレンスサイトをまとめておきますので参考にどうぞ。 CSS3の困った/アレが知りたい、はここで調べよう 筆者選で7つほど。他にもいろいろあるんですが、読みやすいのメインに挙げてみました。 1.E BISUCOM TECH LAB : CSS3プロパティ＆ブラウザ対応一覧 恐ろしくまとまり過ぎているページ。もともと書籍の巻末付録だったものをWebで公開しているらしいです。各プロパティの対応ブラウザが一目でわかるのがありがたい。 ベンダープレフィックスの要・不要とかまで書いてます。時々更新され
CSSで文書の段組表現を行うcolumnプロパティの使い方
CSSレイアウトやってると段組もボックス並べてやっつけちゃいたくなりますが、一連の文書を段組にそって記述するために途中でぶった切ってボックスまたいで書くのは面倒くさいし記述の方法としてももなんか変です。 というわけでビジュアルじゃなくて文書読ませるのに段組をするプロパティのご紹介。 段組にすると視線の横移動が少なくて済む お題のHTMLはこちら。 <div> <p>上海のある家の2階で、占い師をやっているインド人の老婆が、アメリカ人の商人と話し合っていた。商人は戦争で大儲けをする為に、日米戦争がいつ頃起こるのかを占って欲しいと頼む。始めは渋っていた老婆だが、前金として小切手をもらうと愛想が良くなり、自分にはアグニの神がついているから占いは絶対に外れないと言って引き受ける。商人が帰ると老婆は家にいる一人の少女を呼びつけ、今夜アグニの神にお伺いをたてるなどと話す。</p> <p>丁度その時、下
CSSでディスクを回転浮上させるエフェクトのサンプル
CSS演出小ネタ連投です。 【borde-radius】で作った丸型の要素に対し、マウスオーバーでコンテンツを回転させながら浮かび上がらせる方法です。 transformで拡大と回転 言葉で説明するのはとっても難しい（けどやってることは全然難しくない）のでさっそくサンプルをご覧下さい。 HTML <p> <span>Shop</span> <a href="#">More info</a> </p> 【p】のなかに【span】と【a】が並んで内包されています。通常時は【span】のみ表示させておいてhoverで【a】を浮き上がらせてこよう、という構想。 p,span,a{ display:block; position:absolute; width:100px; height:100px; border-radius:50%; font-size:16px; text-align:cen
CSSのtransformでクルクル回転するパネルのサンプル
CSSの【transform:rotate()】を使った回転するパネルのサンプルを作ってみました。 手法としては比較的知ってる人も多いかもしれませんが自分用備忘録として。 回転変形おもしろーい ベースとなるHTMLはこちら。 <p><a href="#">Sample Box 1</a></p> はい、1行ソースです、すみません。単純に【p】の中に【a】を内包しているだけ。これに p{ display:block; margin:10px; width:100px; height:100px; } a{ display:block; line-height:100px; text-decoration:none; text-align:center; color:#fff; border-radius:6px; background-color:#44f; transition:0.3s
CSSキーフレームアニメーションを使ったバナーの作りかた
広告バナーで多少動きのあるものを作ろうと思ったら現在でもアニメーションgif使うのが主流だと思うんですが、CSSのanimationプロパティとキーフレームを使ってそれっぽいもの出来ないかなぁと簡単なものを試作して見ました。 animationプロパティと@keyframes CSS3には【animation】というプロパティがあってこれを使うと【@keyframes】で指定したキーフレームに沿って時間的に他のプロパティを変化させることができます。これによりアニメーション的なものやコマ送り動画（パラパラアニメ）みたいなものが作れます。 …というのを言葉で説明してもイマイチよくわからないと思うのでまずはサンプル成果品をご覧下さい。 ちなみにこのプロパティ、当記事作成段階ではChrome,FireFox,Safariでのみ対応してますのでOperaやIEの方は対応ブラウザでご覧いただきたいと思
画像不要CSSだけで作るテキストロゴデザインのTips
WebサイトのロゴタイプといえばPhotoShopを初めとした画像ソフトを用いて作るのが一般的な気もしますが、シンプルなものならCSSのプロパティを指定するだけでも作れたりします。今回はそのサンプルとフォント関係で使うCSSプロパティいくつかのおさらいなどを。 行間・字間で印象はぐっと変わる サイトトップのタイトルを画像ではなくh1タグなどで表示して文字として扱うのはSEO的効果がある！…とは限りませんが、ユニークな人名や店名、フレーズなどをサイトのタイトルとしたときには競合少ないんでタイトル+他のワードなどで検索されたときに多少の効果はあるんじゃないでしょうか。 Web fontもいちいちロードするのに時間がかかるというデメリットもありますが、日本語使わない英数字だけなら比較的ストレスなく使いやすいと思います。というわけで今回のサンプルに使うフォントは過去記事に書いたGoogle web
CSSのみ画像不要のストライプ背景の作り方を若干丁寧に解説してみる
縦ボーダーのシャツを着ても縞のゆがみなんて全く気にならないガリのゴロドクさんです、どうも。 CSSで作る吹き出しの記事がなかなか評判良かった（WEBクリエイターボックスさんにツイとFBで拡散されて見たことのない時間PVになりました。ありがとうマナさん！）ので画像不要・CSSのみの定番演出シリーズ第2弾ということで「ボーダー柄の背景」の作り方を解説します。 ツートンのバックグラウンドイメージを繰り返す ベースとなるHTMLは例によって1行のみです。どのタグでも良いんですがとりあえず中身のないdiv要素を用意してこれに適用することとします。 <div class="stripe"></div> CSSではクラスで管理しようと思いますので適当にクラスを付けておいて下さい。 基本となるCSSは以下の通り。 .stripe{ display:block; width:425px; height:22
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
