ぷるるんと動くアニメーションが気持ちいい！新感覚のナビゲーション -Gooey pagination
コンテンツスライダーや縦長ページのナビゲーションでよく見かけるビュレットタイプのナビゲーションをかわいいアニメーションで実装するテクニックを紹介します。 アニメーションの操作が気持ちいいので、コンテンツより楽しんでしまうかも。 実際の操作は、下記ページでお楽しみください。 ※Chrome, Safari, Firefox, IEは11では動作しました。 Page scroll concept こっちの方はアニメーションが更に流体になっています。 実装はけっこうシンプルです。 HTML 各ビュレットはリスト要素で実装されています。 5つ点の上を「.select」が移動する感じです。 <ul class="dots"> <li class="select"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></l
CSS3を使ってできる画像まわりのエフェクトやスタイリング18
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
CSSの変態向き - ID, classを顔文字でコーディングする方法 - kojika17
HTMLのIDとclassに顔文字記述しても、CSSではスタイルが適用されません。 ただCSSをごにょごにょするだけで、ID, classを顔文字、日本語でもコーディングすることができます。 誰が得をするのか全くわからないけど、紹介します。 HTMLのID, classを顔文字にする HTMLのID, classを顔文字、または日本語で書きます。 下準備はこれでおｋ。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body ID="（( ◉౪≡౪◉ )）≡౪◉ )）"> <div class="(」・ω・)」うー！"> <h1 ID="(／・ω・)／にゃー！">にゃー！</h1> </div> </body> </html> CSSでごにょご
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
