ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも簡単利用。
Hover.cssとは Hover.cssとは、手軽にホバーエフェクトを利用できるようになるCSSライブラリです。 すべて、CSSで動作するので、AタグなどのHTML要素のクラス指定部分にクラス名を記述するだけで、100種類以上の様々なマウスホバーエフェクトを手軽に使えるようになります。 利用するときは、こんなタグで利用できます。 Font Awesomeのアイコンフォントを利用したことがある方なら、Font Awesomeを利用するように、クラスを指定するだけで使うことができるので、簡単に利用できます。 Hover.cssの主な利用手順 Hover.cssを利用するのに必要な主な手順は、以下の3手順です。 Hover.cssのダウンロード＆設置 Hover.cssを呼び出す Hover.css用のタグを記入する 利用するファイルも、hover.css（縮小版はhover-min.css）
[CSS]紙がふわりとする繊細なエフェクトをシンプルなHTMLで実装するテクニック
divで実装したパネルに紙がふわりとするようなエフェクトを与えるスタイルシートのテクニックを紹介します。 デモではパネル底の左右がふわりとなります。 Pure CSS Paper Lift Effect 実装は非常にシンプルです。 HTML HTMLは、div一つだけです。 <div class="box"></div> CSS スタイルシートはベンダプレフィックスも含めてあるのでちょっと長いですが、コピペで利用できます。 body { margin: 0; padding: 0; background: #efefef; } .box { position: relative; margin: 40px auto; width: 400px; height: 350px; background: #fff; border-radius: 2px; } .box::before, .box
![[CSS]紙がふわりとする繊細なエフェクトをシンプルなHTMLで実装するテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/bcb821b40e6224665d6d8c37a61bec6e8d65084e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014102305.gif)
[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコードをまとめたスタイルシート -Beemuse
p, div要素などで実装したシンプルなHTMLに紙やステッチのかわいいスタイルを簡単に実装できるスタイルシートをまとめたフレームワークを紹介します。要素を少し増やすとリボンも簡単に実装できます。 Beemuse Beemuse -GitHub 使い方は簡単、CSSファイルを外部ファイルとして記述し、あとはHTMLにclassを追加するだけで、さまざまなかわいいスタイルを利用できます。 <head> ... <link rel="stylesheet" type="text/css" href="css/beemuse.min.css" /> </head> 各デモは:before, :after の疑似要素を使用しているため、IE8+でご覧ください。一部のスタイルはIE10+になります。
[CSS]モーダルウインドウをシンプルな操作とアニメーションでどれだけかっこよく表示できるかのデモ
トリガーはシンプルなクリック操作、そしてシンプルなアニメーションを使って、モーダルウインドウをいかにかっこよく表示するかのデモンストレーションを紹介します。 NIFTY MODAL WINDOW EFFECTS デモはCSS3アニメーションを使用しているので、Chrome, Safari, Firefox, Operaなどのモダンブラウザでご覧ください。 モーダルウインドウのエフェクト19種類 アニメーションgifにして紹介しようと思ったけど、ちょっと重すぎるので断念。 どれもかっこいいのですが、オススメは下記でしょうか。 Fade in & Scale フェードで拡大しながら表示 Fall 縮小しながら集まるように表示 Sticky Up 上から張り付くように表示 3D Flip(Horizontal) 水平にくるっと回転して表示 Just Me 全画面に表示 Slit 真ん中に筋をいれ
[CSS]エレガントからレトロまで、text-shadowを使った美しいエフェクト集
text-shadowを使った美しい4種類のエフェクトを紹介します。 エフェクトはCSSのみで、もちろん画像は使っていません。 HTML <h1 class="elegantshadow">Elegant Shadow</h1> CSS まずは、各見出し共通のスタイルシートから。 h1 { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; font-size: 92px; padding: 80px 50px; text-align: center; text-transform: uppercase; text-rendering: optimizeLegibility; } Elegant Shadow用のスタイルシートです。 .eleg
Change Text Link Hover Effect Using CSS3
2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、
秀逸なアイデアが素晴らしい！CSS3を使ったホバーエフェクトのまとめ
画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。
[CSS]ガラスに光があたったようなエフェクトをアニメーションで適用するスタイルシート
画像をホバーすると、ガラスに光があたったようなエフェクトをアニメーションで適用するスタイルシートを紹介します。 デモページ [ad#ad-2] 実装 HTML 画像のimg要素とエフェクト用のdiv要素をdiv要素で内包します。 <div class="image_shine"> <img src="http://www.wordpressthemeshock.com/banners/banner_10_themeshock.jpg" /> <div class="hover_shine"></div> </div> CSS まずは、ラッパーのdiv要素のスタイルです。 エフェクト用のdiv要素用の「position: relative;」がポイントです。 .image_shine{ width: 200px; height: 200px; margin: 30px auto; posit
CSS3を使ってできる画像まわりのエフェクトやスタイリング18
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
[CSS]テキストに美しい3Dやレタープレスなどのエフェクトを与えるスタイルシート
テキストにシャドウをつける『text-shadow』で、Photoshopで作ったかのように美しい3Dやレタープレスなどのエフェクトを与えるスタイルシートを紹介します。 Text Effects using CSS3 [ad#ad-2] CSS3を使ったテキストエフェクトのデモ text-shadowの指定方法 CSS3を使ったテキストエフェクトの実装 CSS3を使ったテキストエフェクトのデモ text-shadowを使った3種類、@font-faceを使った1種類のデモがあります。 ブラウザは、Chrome, Safari, Firefoxでご覧ください。 デモページ text-shadowの指定方法 text-shadowの指定方法は下記のようになります。 text-shadow: h-shadow v-shadow blur color; h-shadow 水平方向のシャドウのサイズ
[CSS]画像を使用しないで、紙がひらっとめくれたエフェクトを与えるスタイルシート
あらゆるサイズのエレメントに利用が可能な、紙がひらっとめくれたようなページカールのエフェクトを与えるスタイルシートを紹介します。 デモページの拡大 このエフェクトはページのあらゆるサイズの要素に簡単に適用できます。 紙がひらっとめくれたエフェクトの実装方法 HTML HTMLはシンプルです。div要素にclassを付与しているだけです。 <div class="box">My box</div> CSS：シャドウの適用 box-shadowを使用して、内側と外側にシャドウを適用します。 .box { position: relative; width: 500px; padding: 50px; margin: 0 auto; background-color: #fff; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゴーストボタンと相性が良さそうなホバーエフェクト 10＋ - NxWorld
http://11neko.com/menu-style-inspiration/
[CSS]ユーザーを楽しませる気持ちいいエフェクトがたくさんあるCSS3のデモサイト -CSS3 Playground
[CSS]CSS3を使うとこんなこともできる！紙を折ったり反らしたするかっこいいエフェクト
IDEA * IDEA
IDEA * IDEA