JavaScriptとCSSは不要！SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders
JavaScriptもCSSも画像も使用せず、SVGで実装された軽快で気持ちいいアニメーションで動くローディングのアイコンを紹介します。 ページに実装する時もJavaScript/CSSは必要ありません。簡単なHTMLでOK！ デモページ SVG Loadersの使い方 使い方は、簡単！ Step 1: SVGファイルをダウンロード 下記ページの右サイドの「Downlaod ZIP」から、SVGファイルをダウンロードします。 SVG Loaders -GitHub Step 2: HTML あとは、imgタグで配置するだけです。 <img src="svg-loaders/puff.svg" /> アイコンのカラーを変更したい時は、svg要素のfill属性を変更します。 <svg fill="#fff" width="140" height="64" viewBox="0 0 140 64
いますぐ使えるCSS3テクニック集！ コピペ用サンプル付き！
CSSアニメーションでつくるダイナミックマウスオーバー CSSアニメーションで作成するダイナミックなマウスオーバーエフェクトを紹介します。（使用例： 社員紹介ページ） 社員の画像にマウスオーバーするとマンガ風のエフェクトがダイナミックにアニメーションします。エフェクト部分にSVGと呼ばれるベクター画像を用いることで、GIFアニメーションなどを使うよりダイナミックできれいなエフェクトを実現できます。 実際につくってみよう 以下にサンプルコードを用意しました！ CSSとSVGでマンガ風のエフェクト - jsdo.it - share JavaScript, HTML5 and CSS SVGとCSSアニメーションで作成したマウスオーバーエフェクトのサンプル プレビュー中に出る右下の「Stop」ボタンをクリックすると、サンプルのコードを確認できます！ サンプルガールの画像にマウスオーバーしてみて
Archived MSDN and TechNet Blogs | Microsoft Docs
Archived MSDN and TechNet Blogs 1/21/2020 2 minutes to read MSDN and TechNet blog sites have been retired, and blog content has been migrated and archived here. Archived blogs are grouped alphabetically by the initial letter of the blog name. Blogs and blog posts can be searched by their names, using the Search box at the top of the page. Actively updated blogs have been moved to other blog sites,
『HTML5 Web Applicationのつくりかた』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 サイバーエージェントでフロントエンドの開発をしております 原(@herablog) です。 スマートフォン版 アメーバピグ新規作成で使用した技術について触れたいと思います。 #ちなみにこの記事ではHTML5を「最新ブラウザ向けのwebアプリケーション作成技術」というかなり広い解釈で使用していますので予めご理解ください。 今までDesktop・Android向けはFlashで作成されていたのですが、今回はiOS, Androidともに対応したいということで、HTML5でできるところまでやってみることにしました。 No Lag作るにあたり
Chrome+HTML5 Conferenceのデザイナーズトラックで学んだこと
Chrome+HTML5 Conferenceのデザイナーズトラックで学んできたことを簡単にまとめてみました。 主にあとで自分が詳しく調べるとき用の備忘録です。 内容がすごく濃くて、HTML5初心者の私にとって為になるお話ばかりでした。 HTML5について (1) HTML5では何ができる？ セマンティックなコンテンツプラットフォームの実現 ⇒Webページの中に記述された情報が何を意味するのかをソフトウェアが理解しやすくなる リッチなアプリケーションプラットフォームの実現 ⇒HTML5関連のAPI利用や、Canvas、WebGL、SVGなどで表現の幅を拡大。 (2) 使うとこんな良いことが…！ 意味のあるマークアップによって、検索性が向上する。 ページの要素が整理され、視覚障害者、聴覚障害者の方にとって情報が伝わりやすくなる。 CanvasやWebGL、SVGなどの利用により、高度で多彩な
HTML5でWebアプリ！マークアップエンジニアがつくるToDo管理アプリ
「DeNA × 面白法人カヤック × クリーク・アンド・リバー社 セミナー」に登壇することになりました。 はじめまして。 このブログで書くのは初めてのME課の比留間(@edo_m18)です。 今回は9/23に開催される「DeNA × 面白法人カヤック × クリーク・アンド・リバー社 セミナー」で、 自分のセッションのプロローグを書きたいと思います。 セッションのタイトルは「もしも、マークアップエンジニアがひとりでWebサイトをつくるとしたら ～HTML5でつくるWebアプリ～」です。 話の内容は、最近なにかと目にする「HTML5」について。 その中でも関連API(JavaScript)を使ったwebアプリについて話したいと思っています。 HTML5になることで、今まではサーバを介してしかできなかったこと、そもそもブラウザ上では実現不可能だったことが実現できるようになります。 これを利用して
Firefox 4 と SVG
Scalable Vector Graphics Scalable 拡大/縮小できる 様々なもの/ことに対して適用できる Vector 絵をオブジェクト（円、四角、テキスト...）の集合として表現 ⇔ビットマップ画像 (画素の集まり) Graphics 図形/画像のための仕様 つまり、XML で 2次元図形を表現するための仕様 SVG の仕様 SVG W3C が標準化 SVG 1.1 (2003年1月) デスクトップ向け (Full) とモバイル向け (Basic/Tiny) SVG Tiny 1.2 (2008年12月) SVG 1.1 Full にない機能も (video/audio、折り返しできるテキストなど) 主要ブラウザのサポート Firefox, Opera, Chrome, Safari, Internet Explorer 9 既存技術との親和性 <svg xmlns="h
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなまとめ（仮）
SVG Demo
Flash LiteコンテンツをHTML5に変換「FlashForward」
Wonder-boys.net
HTML の内容への SVG 効果の適用 - MDC