THE HAM MEDIA BLOG

覚書:テキストリンクのクリック時に動きをつける

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
:active
リンク
CSS

覚書:テキストリンクのクリック時に動きをつける

一般的な技術なんだけど、実は使った事がなかったので、
ちょっと覚書の為にエントリー。

テキストのクリック時にちょっとした動きが欲しいとき、
位置をずらす方法。

サンプル

■CSS

a:active{
    position:relative;
    top:1px;
    left:1px;
}

クリックする時のCSSは:activeで指定。
position:relative;にして、そこから上左1px動きをつける。

■プレビュー

このCSSを設定しようとしたときに、
最初はmarginとかpaddingで位置指定していたら、
クリックする度に周りも1pxずれる時が出てきたので、
改めて勉強してみた。

この技術って、デザインの技とかで取り扱われているようなことなので、
けっこう皆が知っていることなんですよね。
自分が使った事なくて、使ってみたらどうなるんだろうってことで使ってみました。

今後サイトで導入していこうかな。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。