Tag : CSS

- 102 Articles -

CSSで装飾されたボタンを手軽に使いたいときに便利なボタンライブラリ 5

Read Article

CSSで装飾されたボタンを手軽に使いたいときに便利なボタンライブラリ 5

特定のCSSを読み込み、適応したい要素にclass指定をするだけで簡単に装飾されたボタンを実装できるボタンライブラリを5つ紹介します。カラーやサイズ指定をはじめ、ライブラリよっては20種類以上のデザインが用意されているものもあります。そのまま利用させてもらうのはもちろん、特に中規模〜大規模サイトではボタンを共通コンポーネントのひとつとして用意することも多いと思うので、その際の参考にすることもできま…

  • Tips
CSSで実装するオーバーレイ表示時のエフェクトサンプル 10

Read Article

CSSで実装するオーバーレイ表示時のエフェクトサンプル 10

初期表示では非表示になっているナビ表示時やモーダル表示時の背景などで利用されるオーバーレイを表示する際のエフェクトサンプルを自分用にほしくて作ったのでシェアします。すべてCSSを使って実装しているので、カラーや透過率などのデザイン的な部分はもちろん、表示されるスピードやタイミングについてもCSSで調整可能です。また、全体的にシンプルで使いやすいもの中心なのでそのまま利用するだけでなく、いずれかをベ…

  • Tips
CSS(一部SVGも使用)で作成されたユニークなローディングアニメーション 15

Read Article

CSS(一部SVGも使用)で作成されたユニークなローディングアニメーション 15

見栄えからアニメーションまで基本的にCSS(一部SVGも使用)を使って作成されているユニークなローディングアニメーションを、CodePenにアップされているデモから紹介します。ローディングはそんなに長い時間表示させることは少ないですし、自分の場合はサクっと汎用的なシンプルなデザインのものを実装することがほとんどですが、こういった部分まで拘りたいとかちょっと面白いアニメーション付けたいってときに参考…

  • Tips
ボタンにユニークなホバー・クリックエフェクトを付けたいときに参考になるエフェクトサンプル 10

Read Article

ボタンにユニークなホバー・クリックエフェクトを付けたいときに参考になるエフェクトサンプル 10

近年多くのサイトで採用されているパッと見がシンプルなボタンデザインでも、ホバーやクリックぐらいは少しユニークな感じにしたいと思ったときに参考になりそうなエフェクトをCodePenにアップされているデモから紹介します。そのまま参考にさせてもらうだけでなく、さらに自分なりにアレンジを加えてみたり、あとは紹介しているものを組み合わせてみても面白いエフェクトができそうです。

  • Tips
サイト制作のスタイル設定を効率的に行うことができるリセットCSSとノーマライズCSSのまとめ

Read Article

サイト制作のスタイル設定を効率的に行うことができるリセットCSSとノーマライズCSSのまとめ

ブラウザ毎に設定されているデフォルトスタイルの差異をなくし、サイト制作のスタイル設定を効率的に行うことができるリセットCSSやノーマライズCSSを紹介します。すべてを完全にリセットしてしまうものもあれば、リセットは一部にして有用なスタイルは保持するものもあったりと様々なタイプがあるので、自分の癖やプロジェクトガイドラインに合わせて選ぶこともできると思います。

  • Services & Resource
CSS:ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法

Read Article

CSS:ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法

ここ最近主にナビゲーションなどでホバー時にアンダーラインをアニメーションさせるエフェクトの実装要望が多いので、パッと使えるようによく利用するものをひと通りまとめたのでシェアします。また、大体この手のアニメーションを利用する際はサイト全体で動きを統一させることが多いのですが、たまに場所によって少し違いをつけたいということもあるので、そういったときにすぐ対応できるようにSassのmixinを用いて実装…

  • Tips
CSSとテキストで実装するローディングアニメーションのサンプルコード

Read Article

CSSとテキストで実装するローディングアニメーションのサンプルコード

CSSとテキストで実装したローディングアニメーションのサンプルです。サイズ・カラー・フォントといった見栄えについてはもちろん、アニメーションタイプやスピードを調整したい場合もすべてCSSで変更できるようになっていますし、表示させるテキストもHTMLを書き換えるだけで変更可能なので、手っ取り早くローディングを用意したいときなどに便利です。

  • Tips
CodePenで公開されている、CSSでエフェクトやアニメーションを付けたいときに参考になるデモ 15

Read Article

CodePenで公開されている、CSSでエフェクトやアニメーションを付けたいときに参考になるデモ 15

ホバーやクリックした際の動きを中心に、CodePenで公開されているCSSを使ってちょっとしたエフェクトやアニメーションを付けたいときに参考になりそうなデモを紹介します。いずれも目新しい感じのものではないのですが、ひと通りの動きがまとめられているデモが多めなので、エフェクトをどんな感じにするか悩むことが多い人はこういったものをメモしておくのがおすすめです。

  • Tips

Close the search window,
please press close button or esc key.