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

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

icon-btn00.png

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

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

vertical-menu-responsive1.png

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

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

css-img-link.png

jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる

最近更新ペースが遅くなっています。最近仕事の関係でサイトを作っているのですが、そこで使った方法を紹介します。スクロールしてコンテンツが現れたときにアニメーションが開始します。jQueryを使っています。

scroll-tittle.png

CSSだけで作る「多階層」なドロップダウンメニュー

以前書いた「CSSだけで作る動きのあるドロップダウンメニュー|Webpark」という記事が検索エンジン経由でそこそこアクセスがあり、よく質問をいただきます。そのなかで多階層にできないのかという質問があったので作ってみました。

drop-down-menu-3level2.png

CSSだけで作るamazon風な縦型メガメニュー

先日、「CSSだけで作る動きのあるドロップダウンメニュー」という記事のコメント内で、amazonのようなメガメニューをCSSだけで作れないのかというコメントいただきましたので作ってみました。

amazon-like-mega-menu.png

ついつい押したくなる、CSS3を使ったラジオボタンのデザイン

フォームってあまり使うこともないのですが、CSS3を使ってデザインするとなかなか面白かったので、今回はラジオボタンを使ったサンプルを紹介します。

radiobutton00.png

擬似要素とCSS3を使ってリストメニューを楽しくデザイン

画像を使わずに擬似要素を使ってリストメニューをデザインしてみました。CSS3のtransitionを使った動きのあるメニューも作ってみました。

rist-point-catch.png

スマホ用サイトに便利! リンクを表す矢印をCSSだけで作る方法

去年地元のイベントのホームページを作ったのですが、Google Analyticsで調べてみると、スマホからのアクセスが全体の3/4もありました。

css-arrow0.png

オンマウスでふんわり現れる!CSS3を使った吹き出しサンプル5つ

タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。

icon-tooltip-effect.png
Recent Entry
Popular Entry