[B! css][hover] gotackのブックマーク

gotack id:gotack

cssとhoverに関するgotackのブックマーク (3)

Shape Hover Effect with SVG | Demo 2
Crystalline Soko radicchio bunya nuts gram dulse. View Cacophony Two greens tigernut soybean radish artichoke. View Languid Beetroot water spinach okra water chestnut. View Serene Water spinach arugula pea tatsoi. View Nebulous Pea horseradish azuki bean lettuce. View Iridescent A grape silver beet watercress potato. View Resonant Chickweed okra pea winter purslane. View Zenith Salsify taro catsea
gotack 2015/01/26
hover

css
リンク
[CSS]シンプルな気持ちいいアニメーションで、ボタンのテキストと背景をホバー時に変更するスタイルシートのテクニック
ボタンをホバーすると、テキストと背景をスライドのアニメーションで変更するスタイルシートのテクニックを紹介します。ぱっと見、スクリプトを使ってるように見えますが、スタイルシートのみの実装です。 Button with slide hover transition 実装もシンプルです。 HTML hrefにはリンク先を入力して利用してください。 <div class="btn-cont"> <a href="javascript:void(0)" class="btn"><span>twitter</span></a> </div> CSS ホバー時に変更するテキストと背景は「body .btn-cont .btn:after」に記述します。 body .btn-cont { position: absolute; top: 50%; left: 50%; -webkit-transf orm
gotack 2014/11/21
hover

CSS
リンク
小さな工夫が光る、テキストリンクのHoverアニメーション参考集 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。近頃はいろいろな動きを取り入れたサイトが増えていて、「Webって楽しい」というワクワクが今まで以上に感じられます。私が最近ちょっと気になっているのは、サイト全体の大きな動きではなく、いちパーツである「テキストリンク」のHoverアニメーションです。大きな部分の動きや同じリンクでも目につきやすいボタンリンクには、いろいろなバリエーションの動きが取り入れられています。一方でテキストリンクについては、ありきたりなエフェクトになってしまっているサイトがまだまだ多いなぁ、と思われます。そんな中で、そういった些細な部分も手を抜かず作り込まれているサイトを見ると、思わず「おっ！」と立ち止まってしまいます。サイトコンセプトに沿った効果的なアニメーションを入れることができれば、ワンランク上のWebサイトになっていくはず。というわけで今回は、テキストリンクのHo
gotack 2014/11/21
Webデザイン

CSS

hover
リンク
1