SVG画像のHTMLでの使い方 | バシャログ。

2021/03/01 6 users バシャログ SVG画像 HTML SVG コロナ

こんにちは。koyaです。 今回は「コロナに負けない！シーブレイン的、withコロナ時代の楽しみ方」でも使用したSVG画像の使い方について説明をします。 svgを使用した理由 今回は牛の肉の部位毎にマウスホバーの判定が欲しかったため、svgを使用しました。 もしpng画像を使用すると、透過された部分にも画像の判定が入っ... 続きを読む

CSSアニメーションを勉強しないとなーと思いつつまだやってない人のために、五分くらいでぱっと分かるCSS Animationを説明するよ。 | Ginpen.com

2013/10/28 116 users Ginpen.com Ｔｒａｎｓｉｔｉｏｎ プロパティ ヤツ

いえーいCSSでぐりぐり動かしてますか！ やろうやろうと思いつつなかなか手が出ないなんて事もありますが、CSS Animationについてそんな人のための簡単な導入です。 CSSでのアニメーションは二種類 実はCSSのアニメーション、と言っても二種類あります。 transition … マウスホバーとかの操作時に動くやつ animation … ずっと動き続けるやつ プロパティは割と似てる 今のと... 続きを読む

PCではマウスホバー、スマフォではタップで動作するレスポンシブなドロップダウンメニューを実装するjQueryプラグイン・FlexNav - かちびと.net

2013/04/21 85 users タップ スマフォ net ドロップダウンメニュー

続きを読む

Webアプリやスマフォアプリの紹介用に作成、配布されているフリーTumblrテーマ・AppBlog - かちびと.net

2013/03/11 27 users net スマフォアプリ Webアプリ 作成 tumblr

Webアプリやスマフォなどのアプリを紹介するために作られたTumblrのテーマ・AppBlogのご紹介です。Tumblrはテーマが豊富ですが、こういったブログ形式のテーマはあまり見かけないので貴重かもですね。 アプリ紹介用のTumblrテーマです。シンプルで見やすく読みやすい印象でした。 AppBlog サイドカラムは固定されています。メニューはマウスホバーでスライドインする仕組み。 メニューには... 続きを読む

マウスホバーで画像を拡大させるjQueryプラグイン・Image Zoom Plugin - かちびと.net

2013/01/21 31 users イメー 備忘録 net マウス 沢山

よくあるマウスホバーによるイメー ジズーマースクリプトです。様々な タイプのズーマーを実装出来るので なかなか便利そうだなーと思って 備忘録。とはいえ同じ物も沢山ある のでお好みで良さそうです。 ECサイトなんかでよく見かけるやつですね。マウスを乗せると拡大され、動かす事で細かい部分を確認出来る、みたいな。 Image Zoom Plugin こういうの。ベーシックな物からちょっと凝ったものまで作... 続きを読む

JavaScriptも使わず元画像も変更せずに画像をグレースケール表示させる - かちびと.net

2012/06/27 70 users グレースケール net JavaScript 元画像 画像

ちょっと調べ物をしたのでメモ。 画像1枚だけで、グレースケール、 マウスホバーでカラー画像に、 みたいなのを実装したい、出来れ ばJavaScriptも使用せず、みたい な内容です。 2枚用意しろよと言われたら実も蓋もないんですけど、画像1枚だけでグレースケール⇔カラー画像を実装したい。画像の数は半分で済むし、加工の時間も不要になるのは大きなメリットです。 1年前に同じ事をunformedbuil... 続きを読む

[CSS]三角・丸・アロー・吹き出し・アイコンなど、全200種以上のさまざまな形状をつくるスタイルシート -Neo CSS | コリス

2012/04/19 443 users コリス 記述 ミス CSS 各デモ

画像を一切使用せずに、さまざまな形状をつくるスタイルシートを紹介します。 Neo Sample 各デモはマウスホバーで、その形状をつくるコードが表示されます。 Eample 1 ただ、残念なことにコードに記述がミスがある [...] 続きを読む

css3で実装する3Dなロールオーバーエフェクトのサンプル - かちびと. net

2011/12/23 66 users net CSS3 サンプル CSS マウス

面白かったのでご紹介。マウスホバー によるロールオーバーエフェクトを cssで3D表現したサンプルです。休日 ですし、ちょっとネタ的な内容です けど、これはこれで勉強になりました。 いろいろと考えますね、ほんと・・ 例によってブラウザは限られてしまうんですが、良い感じの3Dエフェクトでした。 3D CSS rollovers マウスを乗せると縦とか横に回転します。 見ないとピンと来ないですよねとい... 続きを読む

[CSS]ユーザーの操作に合わせて価格表の一部を拡大するCSS3のテクニック | コリス

2011/11/27 65 users コリス Sta CSS table要素 セル

ユーザーのマウスホバーに合わせて、価格表のセルをアニメーションで拡大するCSS3のテクニックを紹介します。 デモページ ホバーしたセルが拡大表示され、ボックスシャドウを使って浮き上がる感じです。 カラーを変更してもよさそうです。 実装 HTML 価格表は実はtable要素を使っておらず、リスト要素で実装されています。 <div class="pricing_table"> <ul> <li>Sta... 続きを読む

様々なインタラクティブ要素のあるグラフが描画できるJSライブラリ「Elycharts」:phpspot開発日誌

2011/08/11 24 users 描画 JSライブラリ phpspot開発日誌 グラフ マウス

Home | Elycharts 様々なインタラクティブ要素のあるグラフが描画できるJSライブラリ「Elycharts」。 マウスをホバーさせると値を表示したりグラフが動いたりするグラフを色々と描画できるのがElycharts。 線グラフ。マウス位置に応じてバーが移動 棒グラフも色々描けます。 円グラフ。マウスホバーで動きます ドーナッツグラフ 複雑な円グラフも描画可能 動きはデモページを確認して... 続きを読む

[JS]カラー画像を白黒に自動変更して表示する画像ギャラリー -Black and White | コリス

2011/07/25 69 users コリス jQuery script jquery.js 白黒

カラー画像を白黒のグレースケール画像に自動変更して表示する画像ギャラリーのjQueryのプラグインを紹介します。 デモページ：マウスホバー（2番目）でカラー表示 Black and Whiteの実装 外部スクリプト 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="js/jquery.min.js"></script> <script src="js/... 続きを読む

[JS]画像は使用せずに、データをビジュアル化するマップを生成するスクリプト -jVectorMap | コリス

2011/06/08 47 users jQuery jVectorMap コリス 国名 スクリプト

HTMLページでデータを視覚化するためのベクターマップを生成するjQueryのプラグインを紹介します。 jVectorMap デモ デモではマウスホバーで国のエリアがハイライトされ、その国名が表示されるようになっています [...] 続きを読む

[CSS]スクリプトや画像を使用しないで、さくさく動作するニュースボックスを実装するチュートリアル | コリス

2011/05/31 87 users Opera キャプチャ Safari Firefox コリス

省スペースにぴったり！　複数のパネルをマウスホバーで表示を切り替えるニュースボックスを実装するスタイルシートを紹介します。 対応ブラウザはIE6/7/8/9, Firefox, Chrome, Safari, Operaとのことで、CSS3対応ブラウザでもっとも期待通りに表示されます。 ※当方のIE6では期待通り動作しませんでした。 下記はCSS3対応ブラウザ：Firefox4でのキャプチャです。... 続きを読む

[CSS]かわいいストライプ柄を作成するスタイルシートのチュートリアル | コリス

2011/05/16 149 users エフェクト コリス ストライプ柄 a要素 HTML

画像を使用しないで、ストライプ柄のボタンを作成するスタイルシートのチュートリアルを紹介します。 ストライプ柄はボタン以外にも適用が可能です。 かわいいストライプ柄のボタンは、マウスホバーのエフェクトも実装されています。 HTML ボタンはテキストを使ったa要素で作成されています。 Blue button 続きを読む