コピー2013.02.15HTML/CSSコーディングCSS演出小ネタ連投です。【borde-radius】で作った丸型の要素に対し、マウスオーバーでコンテンツを回転させながら浮かび上がらせる方法です。言葉で説明するのはとっても難しい(けどやってることは全然難しくない)のでさっそくサンプルをご覧下さい。info</a></p>【p】のなかに【span】と【a】が並んで内包されています。通常時は【span】のみ表示させておいてhoverで【a】を浮き上がらせてこよう、という構想。rotateZ(0deg);}サンプルページ最初にまとめて設定していますが【p】、【span】、【a】すべてに対し100px×100pxサイズを指定、【border-radius:50%】で円形の体裁としています。【span】と【a】を普通に並べずに重ねて表示したいので全部ひっくるめて【position:absolute】としています。これで親要素(【p】)の左上基準にあわせて子要素(【span】と【a】)が重なって表示されます。rotateZ(0deg);}これをhover時とそうでないときとで行ったり来たりします。【opacity】は要素の透明度ですね。通常時に0にしておいてhoverで透過無しに。【transform】では【scale】で0.5→1とサイズを変えつつ、【rotateZ】で-360°→0°と回転を加えています。【transition】で変化の速度と変化率を調整してます。構造としては単純ですね。【transform】による回転については以前の記事CSSのtransformでクルクル回転するパネルのサンプルでも触れているのであわせて参照ください。背景変更と組み合わせて使ってみるこういうのも使いどころが難しいなぁと思いつつ複数並べたときのサンプルなどを。/></div>先ほどのサンプルに比べ【p】の中に【img】が追加されてます。これを複数並べたもの。CSSCSSは全部載せると装飾部分が冗長なので要点だけ抜粋。img{display:none;position:absolute;width:480px;height:360px;display:none;border-radius:10px;}p:hover+img{display:block;opacity:0.4;}サンプルページはい、こんな感じで【img】は【display:none】で通常非表示にしておき、隣接セレクタ【p:hover+img】を使ってマウスオーバーした【p】のすぐ隣の【img】だけ表示するようにしています...って本題のボタンアニメーションとは全然関係ないですね。これによってマウスオーバーした項目に関連する画像が背景に表示されているように見える、ということです。いうの作っちゃうと我ながら美的センスがないなぁと思います。画像を変更するよりも単色塗りつぶしの背景で色が変わりつつメッセージも変更される、とかの方がしっくり来まると思います、きっと。まっとうなデザイナーさんが作ればもっと綺麗なものになるんじゃないでしょうかwんじゃまた。コピーgorodokuをフォローする0gorodokuこの記事を読んだ人はこんな記事も読んでいます。今春(2011年5月)に最終草案となりある程度安定した仕様がかたまりつつあるHTML5。W3C勧告と仕様確定までは道のりは遠いですが、ブラウザの実装も充実しつつあり(おい、IEのことは言うなよ!)そろそろHTML5...HTML/CSSコーディングCSSで作る立体的なボタンセットのサンプルコードよく見かける立体感のあるボタンの作りかた。グローバルナビゲーションで使われるような横並びのボタンセットをリストアイテムとした場合のサンプルです。解説ページや技術系のページなんかでは数式表現を用いなければならない場面ってありますよね。ワープロソフト付属の数式エディタで数式作成して、その画面をキャプチャして画像化...HTML/CSSコーディングCSSのみ画像不要のストライプ背景の作り方を若干丁寧に解説してみる縦ボーダーのシャツを着ても縞のゆがみなんて全く気にならないガリのゴロドクさんです、どうも。CSSで作る吹き出しの記事がなかなか評判良かった(WEBクリエイターボックスさんにツイとFBで拡散されて見たことのない時間PVになりました。いう記事が話題になってまして、ブラウザをメモ帳代わりにするっていうお話なんですが...いろいろ調べてるうちにブラウザ上で動作するエディタができちゃいました。久々にWeb制作?ネタです。釣りのネタ書こうと思って久々に自宅のPCでnotepad++立ち上げたらEmmetの展開が死んでました。私は基本的にブログの記事はhtmlで記述できるところは最初からhtmlで記述しています。WPのエデ...HTML/CSSコーディングnotepad++用のemmetプラグイン、64bit版が入手できなくて困ってる人向けメモnotepad++は年に1回くらい困り事が発生してる感じのごろどくですどうも。emmetの展開ができなくなったと思ったらプラグイ...HTML/CSSコーディングCSSだけでスマホでも使えそうなスライドインするメニューを考えてみた一週間ほど鼻水が止まらず、咳までで出したごろどくです、どうも。北海道ではまだ花粉の時期ではないので花粉症ではないのですが、ここ数年毎年この時期には同じような症状で体調崩してる気がします。年度末の気の緩みでしょうか。空き地に放置された...一昔前にahaムービーって流行りましたよね。時間かけてちょっとずつ変化する画像、どこが変わってるかわかりますか?ってやつ。脳科学者の茂木健一郎さんがテレビ出だした頃からですよね。あれっぽいやつCSSで作ってみたのでどうぞ。HTML/CSSコーディングCSSのtransformでクルクル回転するパネルのサンプルCSSの【transform:rotate()】を使った回転するパネルのサンプルを作ってみました。手法としては比較的知ってる人も多いかもしれませんが自分用備忘録として。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。BLOG検索タイトルとURLをコピーしました。