タグ

WEBデザインと(2) デザインに関するbeth321のブックマーク (2)

  • Change Text Link Hover Effect Using CSS3

    2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな?と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト! 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、

    Change Text Link Hover Effect Using CSS3
  • そのデザイン処理、こんな風に工夫すればもっと良い物になりますよ / Maka-Veli .com

    お前偉そうだなシリーズ第一弾 まぁ全部、全体のデザイン次第ですし、流行りモノ感もありますが。 ちょっとだけ変えると、グッとクオリティ上がりますよー的な小ネタです。そしてかなり個人的趣味です。 シャドウ ドロップシャドウなんかは手軽にクオリティ上げられていいですよね。 ただシャドウはつけすぎる(濃すぎる)と主張が強くて重くなりがち。 シャドウ自体はただの効果・装飾ですから、体を引き締める程度にかけておけば良いと思います。 また、単なる上下・左右のシャドウではなく、球体・曲線でシャドウを上手く入れていくと面白いですよ。柔らかみもありますし。 グラデーション 立体感を出してチープな印象を防げるグラデ。 ただ、最近はベタ塗りでビビットに見せる装飾が流行ってきましたね。 思い切ってベタに変えるのも手。 もしくは、かなり差を狭くして「これグラデ?」と思わせるくらいのモノが良いかも

  • 1