画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 | NxWorld

2015/02/13 182 users 備忘録 NxWorld 全てCSS CSS サンプル

なんとなくどんな感じのものが実装できるか試してみたので備忘録。いずれもli要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。使用できるブラウザは限られてきますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。最近はWebフォント使ったりSVG使ったりすれば使い勝手良いものが実装できますけど、それす... 続きを読む

保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた

2015/02/04 523 users アニメーション CSS3 table-cell 保存版 横幅

この擬似クラスを使うことにより3番目のli要素にわざわざ別のクラスを付けなくても独自のスタイルを適応することができるので、運用性の向上が図れます。 ▼記事リンク Useful :nth-child Recipes | CSS-Tricks 要素を均等に横並び CSS3の「display:table-cell」は要素を均等に横並びにすることができます。「float」でも要素を横並びに出来ますが、横幅... 続きを読む

連続した要素を分割してページネーションを実装、移動時にエフェクトを加えるjQueryプラグイン・jPages - かちびと. net

2012/02/02 62 users エフェクト 実装 net ページネーション 要素

ちょっと珍しいタイプでしたので備忘録。 連続した要素を、指定した数に達したら 分割して、ページネーションを自動で 生成し、移動時にエフェクトが加わえる、 というもの。大量のリストをコンパクト に、という方に向いてそうですね。 連続した要素になら基本的になんでも使えるっぽいので何かしら応用できるかもしれません。コンパクトにまとめられるのは素敵ですね。 jPages 例えばli要素が100個くらいあっ... 続きを読む

[JS]新聞のカラムのようなレイアウトを生成するスクリプト -ezColumns | コリス

2011/02/07 107 users コリス パラグラフ jQuery カラム スクリプト

div要素だけでなく、p要素やli要素で実装されたパラグラフを新聞のカラムのようなレイアウトにするjQueryのプラグインを紹介します。ezColumnsの実装例HTMLp要素で実装したパラグラフをdiv要素で内包します。A - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ma... 続きを読む