CSSの見過ごしがちだけど興味深い実装テクニック、ホバーでラインを引いて逆方向で元の状態に戻すエフェクト | コリス

2020/12/14 119 users ホバーエフェクト コリス ポパー アニメーション エフェクト

先日、当ブログで紹介したThe State of CSS 2020（紹介記事）に使用されているホバーエフェクトが話題になっていたので、紹介します。 テキストリンクをホバーすると、ラインを引くまでは普通のアニメーションです...記事の続きを読む 続きを読む

[CSS]テキストリンクやボタン、プリローダーなどで使えるCSSアニメーションのスニペット集 -CSSeffectsSnippets | コリス

2019/03/15 126 users プリローダー コリス CSS コピペ スニペット

テキストリンクやボタン、プリローダーなどで使えるCSSのさまざまなアニメーションがコピペで簡単に利用できるCSSeffectsSnippetsを紹介します。 気になったアニメーションは、スニペットなどに登録しておくと便利...記事の続きを読む 続きを読む

テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 | NxWorld

2015/09/17 190 users NxWorld ナビゲーションリンク ホバー時 改行 CSS

見たい時にすぐ動きの確認ができるものが欲しくて一覧化したのでシェアします。いずれも文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛く、利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 先述したように... 続きを読む

【WordPressで特定のカテゴリの記事「だけ」に特定の要素（バナーやテキストリンクなど）を表示する方法】

2013/07/15 151 users WordPress バナー 特定 要素 カテゴリー

例えばですが、特定のカテゴリの記事を見てくれた方に、特定のリンクとかバナーとかを表示させたいときが私はあります。「他のカテゴリーでは見えないけど、このカテゴリーの記事を見てくれた方には、ピンポイントでこのリンクも参考として見てほしいです。ぜひこれも！」みたいな。 同じカテゴリの最新記事とか、関連記事とか、そういうコンテンツとはまた別の位置づけで私は結構よく使います。特に、「他のカテゴリでは見えない... 続きを読む

アイコンフォントでリンクタイプ別にアイコンつける方法 | Webクリエイターボックス

2013/03/18 157 users アイコンフォント Webクリエイターボックス フォント 総称

CSS3を使ったアイコンフォントで、テキストリンクをもう少し華やかに！画像を使うと案外手間がかかるテキスト横のアイコンを、Webフォントを使って簡単に表示させましょう。今回はリンク先や拡張子で異なるアイコンを表示する方法を紹介します。 アイコンフォントとは？ アルファベット1文字に1つのアイコンが設定されているフォントの総称です。サーバー上にあるフォントファイルを読み込んでフォントを表示する「We... 続きを読む

コピペでできる！CSS3の素敵効果でテキストリンクを装飾する小技あれこれ | Webクリエイターボックス

2013/01/29 539 users コピペ エフェクト 目次 Webクリエイターボックス マウス

どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景... 続きを読む

CSS3ビギナーでも分かりやすく解説された、ユーザーが使いやすいボタンを実装するチュートリアル | コリス

2012/02/05 337 users ポパー コリス Step チュートリアル アニメーション

CSS3のスタイルやアニメーションを使って、ユーザーが使いやすい美しいボタンを実装するスタイルシートのチュートリアルを紹介します。 下記は各ポイントを意訳したものです。 Step 1:ボタンの実装 Step 2:ホバーのスタイル Step 3:アクティブのスタイル オプション:テキストの選択を不可に まとめ:全スタイルシート Step 1:ボタンの実装 ボタンの実装には、シンプルなテキストリンクを... 続きを読む

[JS]あらゆる要素をガタガタ、ぷるぷる、ちりちりと振るわせるスクリプト -jRumble | コリス

2011/04/06 195 users jQuery jRumble コリス jquery.js 実装

テキストリンクやナビゲーションなど、ページ上のあらゆる要素を振るわせるjQueryのプラグインを紹介します。jRumbleの実装jRumbleの実装は簡単です。 div要素でもリンクでも、あらゆるDOM要素をガタガタさせることができます。JavaScript「jquery.js」と「jrumble.1.0.js」を外部ファイルとして指定します。 続きを読む

[CSS]ユーザーがクリックしやすいリンクのリストを作成するチュートリアル | コリス

2010/12/02 138 users コリス チュートリアル a href CSS HTML

HTML：スタイルシート無しの状態 HTMLは非常にシンプルです。 文字数の異なるテキストリンクをリスト要素で実装します。 HTML <ul> <li><a href="#">リスト1</a></li> <li><a href="#">リストリストリスト2</a></li> <li><a href="#">リストリスト3</a></li> </ul> デモページ（当方作成） リストのアイテムはブロ... 続きを読む

最適なテキストリンクの色は？ | ウェブ力学

2010/06/21 684 users ウェブ力学

青系統の色が使われていることに変わりはありませんが、検索エンジン以上にバラつきが見られます。特に、Yahoo!の場合は、各ジャンルごとのページでも微妙にテキストリンクの色が変わっていました。それぞれのサイトデザインの特徴に合わせて変化させているのだろうと思います。 楽天のようにデフォルト色を使用しているサイトもありましたが、全体からすると少数派のようです。 Q&Aサイトの最大手OKWaveはGoo... 続きを読む

テキストリンク色の変更で、70億円（！）を稼ぎだすことに成功したマイクロソフト - Feel Like A Fallinstar

2010/03/18 927 users マイクロソフト Bing ユーザビリティ 水色 変更

ユーザビリティの中でも特に狭義の「テキストリンク色」を変えただけで、恐るべきビジネスインパクトが現れたという事例です。 実際に成果の変化が起こったのは、マイクロソフトが鋭意売り出し中の検索エンジン「Bing」です。 テキストリンクを、入念にテストし、8000万ドルの売り上げ増 マイクロソフトは従来、「Live Search」という形でもう少し明るい青（水色に近い）を採用していました。   Bing... 続きを読む