スライドショーで実装されているページネーションのデザインショーケース - NxWorld
webサイトでよく見かけるコンテンツのひとつにスライドショーがありますが、実装している多くのサイトでスライド切り替えができるページネーションが設置されています。 サイトによってはこのページネーションの部分もしっかりとデザインしているところもあるので、同じくこういった細かいところまでこだわりたいときに参考になりそうなページネーションデザインをタイプ別にまとめてみました。 デザインショーケースとは言っていますが中には少しアニメーションを加えているのもあるので、見栄えだけでなく動きの面でも参考になるサイトもあります。 サークル 見かけることが多いと思うサークルタイプのページネーションを用いているサイトです。 スライダーやカルーセルといったjQueryプラグインなどでも、予め設定されているスタイルでこのサークルタイプを用いているものが多いですね。 ほとんどがシンプルで同じような見栄えではありますが
無料アイコンを探す時に必ずチェックしたいダウンロードサイトのまとめ
Webページやプレゼンの資料やお店のフライヤーなど、法人でも個人でもWebサイト・ブログ・映像・アプリ・ゲーム・紙で無料利用できるフリーのアイコン素材を紹介します。 WebページにはアイコンフォントやSVGアイコン、紙にはPNGアイコン、デザインもベーシックなものからちょっと変わった面白いものまで、見ているだけで楽しめるアイコンばかりです。 Fontello Font Awesome, Entypo, Typicons, Iconicなど、メジャーサイトのアイコンを自由に組み合わせて、自分用のアイコンセットを作成してダウンロードできます。 Webサイトで使うベーシックでシンプルなものなら、ここだけで足りるでしょう。 ライセンスは各アイコンごとに異なりますが、SIL, BSD, MITのオープンソースのものが主です。
ゴーストボタンにマウスを乗せたときの動きいろいろ16個
昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せたときに動きをつけるサンプルを紹介します。 サンプルはこのページで全て載せていますが、まとめて見たいという方はこちらをどうぞ。 ということで、HTMLはこんな感じになります。 <a href="#" class="btn sample1">sample 1</a> 普通のリンクですね。btnは共通部分、sample1はサンプルごとで違ってくる部分になります。 では、共通部分のCSSです。 a.bt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
