スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ゴーストボタンにマウスを乗せたときの動きいろいろ16個

昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。

ghost-btn.png
スポンサーサイト

画面サイズに合わせて高さを指定する3つの方法

縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。

height-max.png

マウスを乗せたときと外したときでtransitionの内容を変える方法

CSS3で追加されたtransitionはホバー時の変化に動きを付けてくれるプロパティですが、マウスを乗せたときと外したときで変化の仕方を変えることができます。

trantion-hover-tittle.png

CSSで作ったドロップダウンメニューのドロップの動きいろいろ

CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。

dropdown-effect.png

3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる

CSSを使って、3本線のメニューボタンを開閉にあわせて変化させる方法を紹介します。先日作ったWebギャラリーサイトでも使っている方法です。

3line-bar-intro.png

使い勝手のよさそうなアイコンをCSSだけで6個作ってみた

近頃アイコンに画像を使わずWebフォントを使うことが多くなりました。とはいうものの、少しのアイコンを使うために、多くのアイコンが入ったファイルを読み込むのもどうかなということもあります。そのアイコンをCSSで表現できるならそれに越したことはないと思います。

css-icon.png

アイコン型WebフォントをCSSでデザインしたボタン10個

アイコン型WebフォントをCSSでデザインしてボタンをいろいろ作ってみました。よく似た記事を書いたことがある気もしますが、今回はフラットな感じにしてみました。

icon-btn00.png

普通の縦メニューをレスポンシブデザインに対応させてみる

レスポンシブデザインに対応した縦メニューを作ってみました。できるだけ詳しく解説してみますので、これを参考にサイトに合わせて自由にカスタマイズしてもらえたらうれしいです。

vertical-menu-responsive1.png

CSSで画像リンクにマウスを乗せたときの動きを考えてみた

画像リンクにカーソルを乗せると半透明になるようにしているサイトをよく見かけます。薄くなりすぎるのはあまり好きではないので半透明以外にいい方法がないか色々と考えてみました。

css-img-link.png

レスポンシブWebデザインに対応したメニューの作り方【追記あり】

レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。

responsive-menu0.png
Recent Entry
Popular Entry
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。