タグ

関連タグで絞り込む (2)

タグの絞り込みを解除

CSSとeffectに関するIndigo_blueのブックマーク (3)

  • ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験

    スムーズスクロール以外の方法で、ページ内リンクによって画面が切り替わったことを利用者にわかりやすく伝える方法はないかということで、ページ内リンクでの移動時に画面を一瞬点滅させるスクリプトを jQuery で書いてみました。 タイトルが (謎) な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。 実装方法は JavaScriptCSS アニメーションの組み合わせや、JavaScript (というか jQuery) でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いの

    ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験
  • Box Shadowのエフェクトサンプル&便利な素材まとめ - NxWorld

    今さらな内容で特に目新しいものがあるわけではありませんが、自分用で一覧化したものが欲しかったので備忘録。 CSSのbox-shadowを使用して実装するエフェクトサンプルとシャドウエフェクトを付けたデザインを制作する際に便利な素材をいくつか紹介します。 CSSのbox-shadowで実装したエフェクトサンプル 以下はいずれも画像は使わずにCSSのbox-shadowを使用してシャドウエフェクトを実装しているサンプルで、単純にシャドウを付けたもの、内側に付けたもの、要素が浮かんでいるように見せるものなど全10種類あります。 HTMLはEffect 10以外は全てdiv要素ひとつで、共通のスタイルとして下記をCSSで指定しています。

    Box Shadowのエフェクトサンプル&便利な素材まとめ - NxWorld
  • 3D Paper button effects

    About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-

    3D Paper button effects
  • 1