タグ テキストリンク
人気順 5 users 10 users 100 users 500 users 1000 usersCSSの見過ごしがちだけど興味深い実装テクニック、ホバーでラインを引いて逆方向で元の状態に戻すエフェクト | コリス
先日、当ブログで紹介したThe State of CSS 2020(紹介記事)に使用されているホバーエフェクトが話題になっていたので、紹介します。 テキストリンクをホバーすると、ラインを引くまでは普通のアニメーションです...記事の続きを読む 続きを読む
[CSS]テキストリンクやボタン、プリローダーなどで使えるCSSアニメーションのスニペット集 -CSSeffectsSnippets | コリス
テキストリンクやボタン、プリローダーなどで使えるCSSのさまざまなアニメーションがコピペで簡単に利用できるCSSeffectsSnippetsを紹介します。 気になったアニメーションは、スニペットなどに登録しておくと便利...記事の続きを読む 続きを読む
テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 | NxWorld
見たい時にすぐ動きの確認ができるものが欲しくて一覧化したのでシェアします。いずれも文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛く、利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 先述したように... 続きを読む
【WordPressで特定のカテゴリの記事「だけ」に特定の要素(バナーやテキストリンクなど)を表示する方法】
例えばですが、特定のカテゴリの記事を見てくれた方に、特定のリンクとかバナーとかを表示させたいときが私はあります。「他のカテゴリーでは見えないけど、このカテゴリーの記事を見てくれた方には、ピンポイントでこのリンクも参考として見てほしいです。ぜひこれも!」みたいな。 同じカテゴリの最新記事とか、関連記事とか、そういうコンテンツとはまた別の位置づけで私は結構よく使います。特に、「他のカテゴリでは見えない... 続きを読む
アイコンフォントでリンクタイプ別にアイコンつける方法 | Webクリエイターボックス
CSS3を使ったアイコンフォントで、テキストリンクをもう少し華やかに!画像を使うと案外手間がかかるテキスト横のアイコンを、Webフォントを使って簡単に表示させましょう。今回はリンク先や拡張子で異なるアイコンを表示する方法を紹介します。 アイコンフォントとは? アルファベット1文字に1つのアイコンが設定されているフォントの総称です。サーバー上にあるフォントファイルを読み込んでフォントを表示する「We... 続きを読む
コピペでできる!CSS3の素敵効果でテキストリンクを装飾する小技あれこれ | Webクリエイターボックス
どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな?と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景... 続きを読む
CSS3ビギナーでも分かりやすく解説された、ユーザーが使いやすいボタンを実装するチュートリアル | コリス
CSS3のスタイルやアニメーションを使って、ユーザーが使いやすい美しいボタンを実装するスタイルシートのチュートリアルを紹介します。 下記は各ポイントを意訳したものです。 Step 1:ボタンの実装 Step 2:ホバーのスタイル Step 3:アクティブのスタイル オプション:テキストの選択を不可に まとめ:全スタイルシート Step 1:ボタンの実装 ボタンの実装には、シンプルなテキストリンクを... 続きを読む
「フリーで使えるフォントのまとめ」のまとめ - とりあえず9JP
無料で利用出来そうなフォントをまとめて紹介されているサイトを更にまとめてみます。 ※テキストリンクの先が更にテキストリンクだと「ウンザリ・・・」って感じだと思うので、出来るだけ個別のフォントを画像で紹介しているサイトを選びました。 ※このサイトで紹介しているサイト同士で同じフォントを紹介してたり…という事は当然あるのでその点はご注意願います。特に日本語フォントなどは数そのものが少ないので重複率が高... 続きを読む
[JS]あらゆる要素をガタガタ、ぷるぷる、ちりちりと振るわせるスクリプト -jRumble | コリス
テキストリンクやナビゲーションなど、ページ上のあらゆる要素を振るわせるjQueryのプラグインを紹介します。jRumbleの実装jRumbleの実装は簡単です。 div要素でもリンクでも、あらゆるDOM要素をガタガタさせることができます。JavaScript「jquery.js」と「jrumble.1.0.js」を外部ファイルとして指定します。 続きを読む
[CSS]ユーザーがクリックしやすいリンクのリストを作成するチュートリアル | コリス
HTML:スタイルシート無しの状態 HTMLは非常にシンプルです。 文字数の異なるテキストリンクをリスト要素で実装します。 HTML <ul> <li><a href="#">リスト1</a></li> <li><a href="#">リストリストリスト2</a></li> <li><a href="#">リストリスト3</a></li> </ul> デモページ(当方作成) リストのアイテムはブロ... 続きを読む
最適なテキストリンクの色は? | ウェブ力学
青系統の色が使われていることに変わりはありませんが、検索エンジン以上にバラつきが見られます。特に、Yahoo!の場合は、各ジャンルごとのページでも微妙にテキストリンクの色が変わっていました。それぞれのサイトデザインの特徴に合わせて変化させているのだろうと思います。 楽天のようにデフォルト色を使用しているサイトもありましたが、全体からすると少数派のようです。 Q&Aサイトの最大手OKWaveはGoo... 続きを読む
テキストリンク色の変更で、70億円(!)を稼ぎだすことに成功したマイクロソフト - Feel Like A Fallinstar
ユーザビリティの中でも特に狭義の「テキストリンク色」を変えただけで、恐るべきビジネスインパクトが現れたという事例です。 実際に成果の変化が起こったのは、マイクロソフトが鋭意売り出し中の検索エンジン「Bing」です。 テキストリンクを、入念にテストし、8000万ドルの売り上げ増 マイクロソフトは従来、「Live Search」という形でもう少し明るい青(水色に近い)を採用していました。 Bing... 続きを読む