Analog Studio

Tips

Web サイト制作に役立つ情報や小技などをまとめています。

CSS

記事一覧

CSSのグラデーションに縞模様(バンディング)が出てしまった時の対処法【gradient】

概要

CSSのグラデーション関数は便利ですよね。最近のWebデザインではボーダーやボタンなどにグラデーションが付いていることも増えてきました。画像の作成が必要なく修正も用意で、簡単にオシャレにできるので人気があります。しかし、グラデーションを使っていて縞模様が気になってしまった…という経験をお持ちの方も多いのではないでしょうか?この現象はバンディングやマッハバンドと呼ばれPhotoshopなどでも発生してしまうなかなか厄介なものです。生成されたイメージの階調が少なく淡いグラデーションではどうしても気になってしまい根本的には解決できません。そこで今回はそんなバンディングを目立たなくする手法を紹介します。

アナログノイズのような「グリッチエフェクト」をCSSで実現する方法

概要

グリッチエフェクト、いわゆるアナログノイズが乗った映像の乱れのような効果があります。動画では良く利用されておりちょっとオシャレな演出ですよね。シンプルなページにもちょっとしょた動きが欲しいという時に役に立つこの「グリッチエフェクト」は、CSSだけで簡単に実装できますので紹介していきます。

CSSのbox-shadowを滑らかにtransitionさせる方法【カクカクさせない】

概要

カードデザインというデザインを検討したことがある方は多いのではないでしょうか?レシポンシブなデザインに対応したECサイトやブログなどの一覧表示でよく使われていますね。一つの商品や記事などをカード状の要素で構成してそれを並べることでどんな幅のディスプレイにも馴染みが良く、それぞれの要素の幅は固定なのでスタイリングやしやすいという特徴があります。このTipsも一覧表示にはカードデザインを採用しています。そんなカードデザインなどでマウスカーソルを合わせた時、ちょっとした演出として影を付けたいことがあります。:hover疑似クラスでbox-shadowを設定するだけなのですが、transitionでアニメーションを付けるとカクカクすることがあります。今回はこれを滑らかにスムーズなアニメーションにするちょっとしたひと手間を紹介します。

Font Awesome 5 Free を疑似要素で使う方法と高速化のヒント

概要

SNSのアイコンなどを文字のように色を変えたり劣化させずに拡大縮小したい時に役に立つものにアイコンフォントがあります。アイコンフォントは、ここ数年のSNSの浸透で特に浸透してきたように思います。そんなアイコンフォントの中でも無料で使えて種類が非常に豊富な「FontAwesome5」(Free版)について解説します。基本的な使い方は既に色々な情報がありますので、ここでは疑似要素での使用方法とCSS読み込みの高速化をハックしていきましょう。