CSSで画像をマウスオーバーしたときに効果を与える小技① | ホームページ制作 東京 【SKYGOLD】 / フリーランス WEBデザインオフィス
という具合に処理を記述していきます。 それでは、一つずつ見ていきましょう。 画像をマウスオーバーで「移動」するCSS「translate」 「translate」は要素を移動できます。translate(X軸,Y軸)という書き方になります。 translateX(値),translateY(値)とすると、X軸、Y軸それぞれのみの記述ができます。 <div class="photo1"><img src="dummy_tn.png" alt=""></div> .photo1 img{ transition: 0.3s; } .photo1 img:hover{ -webkit-transform: translate(5px,5px); -moz-transform: translate(5px,5px); -ms-transform: translate(5px,5px); -o-tra
HTML/CSSで実装できる！今どきデザインのホバーエフェクト30個まとめ
ウェブサイトを魅力的に仕上げるだけでなく、ユーザーの注目を集めることができる、アニメーション・エフェクト。今回は、サイトコンテンツ表示に活用できる、HTML/CSSのみで実装できるホバーエフェクトをまとめています。 CSS3 を駆使したスタイリングは、コピペで利用することもでき、他と差のつくデザインエフェクトを、手軽に実現することができます。そのままコードを編集し、動作を確認することもできるので、今後のデザインプロジェクトに活用してみてはいかがでしょう。 詳細は以下から。 ウェブデザインを魅力的に仕上げる、HTML/CSSホバーエフェクトまとめ HTML/CSS/JS をクリックすると、各コードやスタイリングを確認でき、Result で実際のエフェクトを試すことができます。Return をクリックすると、読み込みを再度行います。 マウスホバーで、タイトルをモザイク状に表示。 See the
CSSでボタンを押したときに沈むようなデザインにする方法 - ディレイマニア
近年、CSSでボタンをデザインすることが多くなりました。 ボタンのデザインが出来たら、次はマウスオーバーしたときのアニメーションもつけたくなりますよね。 今回はシンプルに「ボタンが沈み込む」ような動きの付け方をご紹介します。
CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
CSSで実装する矢印アイコン付きボタンのアニメーションエフェクト - NxWorld
フラットやゴーストといったようにシンプルで一見ボタンと認識しずらい感じのボタンデザインを使う場合、それが少しでもボタンだと分かるように矢印等のアイコンを付けることが多いと思います。 今回はそんな矢印付きボタンを実装する際、ホバー時に矢印にちょっとしたアニメーションエフェクトを実装したサンプルで、いずれも実装にはCSSのみを使用しています。 サンプルの記述内容について CSSで記述している内容はこのサンプルの見た目に関する記述も多いので、矢印の動きのみ抜き出したい場合はボタンとなる要素にposition: relative;を追記し、::before, ::afterで記述している内容や:hoverで記述している部分を使ってもらえれば同じ動きを再現できるかと思います。 また、紹介しているボタンに付いている矢印アイコンは、いずれもCSSのborderを使って実装をしています。 サイトによっては
テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 - NxWorld
文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。 文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛くて利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 サンプルの中で特にdisplay: inline-block;を記述しているタイプのものが意図しない箇所で改行されたり、逆にされなかったりということがあるので注意して下さい。 実際にどのような動きになってしまうのかはブラウザを縮めて確認してもらったり、または自身で環境を用意して実装・確認をしてもらうとよりわかりやすいと思います。 ここで紹介するエフェクトは、基本的に<a href="#">リンク</a>のようなHTMLに対して実装したものになります。 また、サンプルコードに含まれていません
CSS：CSS3の「transform:scale()」でhoverした時に画像を拡大する | raining
CSS3の「transform:scale()」を使用すると要素や画像を拡大・縮小して表示することができます。 画像をマウスオーバーした時にその画像を少し拡大させて表示させるなどをすると、 サイトに動きを出すことができるのでいいと思います。 下記にCSS3の「transform:scale()」を使用して画像をマウスオーバーした時に 拡大させて表示した時の方法をメモします。 ■ 「transform:scale()」の使用方法 ブロック要素を固定させて画像を拡大させた場合の方法です。 画像をマウスオーバーするとアニメーションで拡大します。 【CSS】 .scale { width: 400px; height: 300px; overflow: hidden; } .scale img { -moz-transition: -moz-transform 0.5s linear; -webk
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
