SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！
2014年10月8日 SVG Webクリエイターボックスでちょこちょこ取り上げてきたSVG。今回は第四弾！SVGを使ったクリッピングマスクを紹介します。今までは画像に透過PNGを重ねてマスクを表現できましたが、高解像度ディスプレイに対応させたり、マスク自体に効果をつけるならSVGが便利かなーと思います。サムネイル画像にフレームをつけたり、デザインのアクセントとして使えるので、ぜひマスターしてくださいね！ ↑私が10年以上利用している会計ソフト！ SVGのクリッピングマスク基礎 1. 画像を用意 それではさっそく試してみましょう！まずは切り抜かれる画像を用意し、img タグで表示します。この時画像に mask というクラスを与えておきます。 <img class="mask" src="images/rose.jpg" alt="Rose"> 2. マスクの型を用意 Illustratorで
動画ファイルを簡単にGIFアニメに変換できるフリーソフト「openAviToGif」
ブラウザや画像ビューアさえあれば手軽にムービーを再生できるGIFアニメーションは、YouTubeなどに頼らずにちょっとしたムービーを挿し込みたい時に重宝するもの。いざ自分でもGIFアニメを作成しようとすると意外と手間がかかるものですが、Windows向けに提供されているフリーソフトの「openAviToGif」を使うと、元になる動画ファイルを読み込ませて簡単な設定を行うだけでGIFアニメを作成することができます。 openAviToGif | SourceForge.net http://sourceforge.net/projects/openavitogif/ 以下の画像をクリックすると、openAviToGifを使って作成したGIFアニメが再生されます(クリックでアニメを再生：5.2MB)。GIFアニメなので音声は再生されませんが、特に難しい操作などは行わずにスムーズなアニメが作成で
スマホやPCのブラウザ間でYouTubeのプレイリストを共有できる「Playlistful」
パーティーには音楽が欠かせないものですが、欠席している人や遠く離れた人でも流しているBGMを共有できれば同じ雰囲気を味わうことも可能です。でも「音楽は共有したいけど勝手にスキップされたりしてケンカしたくない！」という時に便利なのが、招待された人はプレイリストを勝手に変更できずにスマートフォン・タブレット・PCのブラウザ間でYouTubeのプレイリストを共有できる「Playlistful」です。 Playlistful http://playlistful.com/ 「Start a party」をクリック。 表示されているURLを開きます。 シェアする人に表示する名前を入力したら「Join」をクリック。 プレイリストは空なので「Search」をクリックして入力欄からアーティスト名や曲名を入力します。 検索結果が表示されるので、お目当ての曲が見つかったら「ADD」をクリックしてプレイリストに
Make an HTML5 video a background
About This jQuery plugin enables you to very easily use an HTML5 video as a background to a website or any div. For browsers that don't support the HTML5 video tag, it just uses an image. Warning Don't abuse this code... Don't use it too often, too many video instances will slow down the browser. Please bear in mind bandwidth usage for both you, and your visitors
[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法）
動画を背景としてブラウザいっぱいに表示し、その上にオーバーレイでコンテンツを配置するCSSのテクニックを紹介します。 動画の背景はレスポンシブ対応、video要素に対応していないIE8や、動画の自動再生に対応していないスマホへの対応方法も！ Create Fullscreen HTML5 Page Background Video 下記は各ポイントを意訳したものです。 以前紹介した時（前の記事）からアップデートされ、実装の解説も充実しているので、改めて許可を得て翻訳しました。 中の人は、Smashing Magazineのエディタさんです。 動画を背景に使う時の大切なポイント デモ CSSで動画を背景にしたコンテンツを実装する方法 動画を背景に使う時の大切なポイント 動画をサイトに使う時は、動画が単にかっこいいからという理由ではなく、サイトのメッセージが伝えられる動画を使用しましょう。 動
![[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法）](https://cdn-ak-scissors.b.st-hatena.com/image/square/bacd812f6000c78e30e028d375e68638a387b65a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014090501-01.png)
Animated gif tools
Online GIF maker and image editorVideo to GIFResizerOptimizerGIF MakerEzgif.com is a simple, free online GIF maker and toolset for basic animated image editing. Here you can create, edit and convert GIF, APNG, WebP, MNG and AVIF animations. ezgif.com news and updatesMar 6, 2024Added PNG to SVG and JPG to SVG converters using autotrace and vtracer tools. Feb 23, 2024We have doubled the maximum uplo
VOBをwmvやflvに変換する方法
VOBファイルをwmvやflvに変換する方法を紹介します。 １．はじめに VOBというのはDVDのファイル形式です。 VOB形式を直接YouTubeにアップロードすることはできないので他の形式に変換したいのですが、変換する方法が分かりません。 ということで、VOBファイルをwmvやflvに変換する方法を紹介します。 ここではWindowsで「XMedia Record」というフリーソフトを利用する方法を解説します。 ２．XMedia Recordのダウンロード・インストール XMedia Recordのページにアクセスして、左側のメニューにある「Download」をクリック。 Downloadのページに何種類かのダウンロードリンクがあるので、一番上の「XMedia Recode」の「Download」をクリック（執筆時点のバージョンは3.1.9.1）。 ファイルのダウンロードが始まるので任
iPhoneの動画ファイルをWindowsで他の形式に変換する方法
iPhoneの動画ファイルをWindowsで他の形式に変換する方法を紹介します。 １．はじめに 「VDSLアダプタの「VDSL LINK/ACT」ランプがゆっくり点滅したらNTTフレッツ・サポートセンタへ連絡」で使っている動画はiPhoneで録画したものですが、最初、録画した動画をYouTubeにアップロードしたところ、期待通りに再生されませんでした。 具体的には、再生を開始するとすぐに最後の部分にスキップしてしまうという状態になりました。 iPhoneの動画ファイルの形式はMOVなので、とりあえずファイル形式を他の形式（今回はWMV）に変更して再度アップロードすることで解決しました（他に解決方法があるかもしれませんが）。 ということで、iPhoneの動画ファイルをWindowsで他の形式に変換する方法を紹介します。 形式を変換するには、Microsoftで配布されている無償の「Micro
YoutubeやVimeoの動画を背景に指定できるjQueryプラグイン・OKFocus video
YoutubeやVimeoの動画を手軽に背景指定できる、というスクリプトのご紹介。jQueryに依存しています。既に同等のものが存在しますが、使いやすそうだったので備忘録。 動画を手軽に背景指定出来る、というもの。 動作サンプルです。 背景なので重ねたレイヤーの背景を透過すればマスクっぽく出来ますね。 <script src='jquery.js'></script> <script src='okvideo.js'></script>本体とスクリプトを読み込みます。 $(function(){ $.okvideo({ source: 'http://vimeo.com/*****', volume: 0 }) });VimeoまたはYoutubeの動画のURLを貼るだけ。これで背景に動画が流れます。ミュートはvolumeを0に指定します。 他にもオプションいろいろ。詳細は以下でご確認下さ
これは貴重！商用利用無料のかっこいい動画素材がダウンロードできる -Mazwai | コリス
背景いっぱいに動画を表示したページを作りたい！ でも動画をつくるのは大変、、、そんな時にはかっこいい動画素材が揃った「Mazwai」。 Mazwai Mazwaiの紹介の前に、、、動画をページに使いたい時は、先日紹介したスクリプトがスマホも配慮されており簡単です。 動画をブラウザいっぱいやエレメントの背景として配置できるスクリプト（スマホにも配慮） -Vide MazwaiではまさにWebページで使いやすい動画のフォーマットが2種類用意されています。 .mp4 .webm 動画もいい感じのものがたくさん揃っています、風景、人物、街中、オブジェクトなどいろいろ！ ダウンロードできる動画は、2種類が用意されています。 ショートバージョンは各サムネイルを右クリックでダウンロードでき、ロングバージョンはサムネイルをクリックして動画を全画面表示し、右下のアイコンからダウンロードできます。
[JS]動画をブラウザいっぱいやエレメントの背景として配置できるスクリプト（スマホにも配慮） -Vide
.mp4, .webm など、動画をブラウザいっぱいやdivなどのエレメントの背景として配置できるjQueryのプラグインを紹介します。 デスクトップでは動画が再生され、スマホでは仕様のため代替の静止画像が表示されます。 デモページ iOSでは動画はネイティブのプレイヤーのみ再生可能なので、静止画像が表示されます。Androidでは一部の機種で動画が再生されてしまいますが、基本的には静止画像が表示されます。 Videの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部スクリプトとして記述します。 <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.vide.min.js"></scr
Adobe製品の代わりに使える無料アプリ10+
2014年6月27日 Illustrator, Photoshop, 便利ツール PhotoshopやIllustratorなど、Adobeの製品はクリエイターの必需品のひとつとなっています。しかしその値段からなかなか手が出せない…という方も多いのではないでしょうか？今回はAdobe製品の代用として使える無料アプリをいくつか紹介します。金欠の学生さんや、様々な理由から脱Adobeを考えている方の参考になれば幸いです！ ↑私が10年以上利用している会計ソフト！ Photoshopの代わりに GIMP 長年Photoshopの代用として愛され続けているGIMP。Photoshopの拡張子であるpsdファイルが開けることはもちろん、Photoshop用のブラシなども利用可能。画像の編集・加工ツールとしてPhotoshopとほぼ同様の機能を備えています。日本語の公式チュートリアルも充実！私もお金の
[CSS]動画を背景として表示させ、オーバーレイでコンテンツを配置するテクニック
動画をブラウザいっぱいに背景として表示させ、その上にコンテンツをオーバーレイで配置するテクニックを紹介します。 HTML5 Video 実装 HTML 現在、動画ファイルは二つのフォーマットを用意するのがよいでしょう。WebMはGoogleが推奨するものでChrome, Firefox, Operaでネイティブにサポートされています。 <video autoplay loop poster="polina.jpg" id="bgvid"> <source src="polina.webm" type="video/webm"> <source src="polina.mp4" type="video/mp4"> </video> オーバーレイで表示するコンテンツは、通常通りの実装です。 <div class="overlay"> コンテンツ </div> CSS まずは、動画をフルスクリー
スクリプト無し、動画をページの背景いっぱいに表示する方法
jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。 フルサイズのデモ IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。 実装は、非常にシンプルです。 HTML 動画はbody内の一番下にvideo要素で配置し、その上には通常通りコンテンツを配置できます。 <body> ... コンテンツ ... <!-- 背景に設置する動画 --> <video autoplay loop poster="http://mattgrossdesign.com/raw-media/first-frame-screencap" id="video-background" muted> <source src="http://mattgrossdesign.com/raw-media/wood
無料で使えるCCライセンスの写真・映像などの素材を配布している10サイトを一括検索できる「Find CC」
ブログやウェブサイトで使用する写真を色んなサイトで探し回るのは結構大変。そこで、写真共有サービス・動画共有サービス・オンライン写真コミュニティなどのクリエイティブ・コモンズ・ライセンス作品を取り扱っている10サイトから、画像やムービーを一括検索できるようにしたのが「Find CC」です。 Find CC - クリエイティブ・コモンズの作品を一括検索 http://findcc.net/ トップページはこんな感じ。一番上に検索欄があり、検索欄の下で検索したいウェブサイトを選択したり、ライセンスの条件を指定したりできます。 写真やムービーは「パブリックドメイン」とCCライセンスの「表示」「表示-継承」「表示-改変禁止」「表示-非営利」「表示-非営利-継承」「表示-非営利-改変禁止」から条件指定が可能。それぞれの表示が何を意味しているかの説明は各表示にマウスを載せると読むことができます。 Fin
HTML5の標準を狙うGoogleの動画フォーマット「WebM」のこれまでまとめ
高画質かつ高圧縮の「H.264」がビデオフォーマットの主役の座についていますが、次世代のウェブフォーマットであるHTML5においては、H.264とともに主役として期待されているのがGoogleの開発する「WebM」です。WebMのこれまでの流れと今後の動画標準規格を巡る争いについてまとめてみました。 Google builds WebM patent pool of its own to fight back against MPEG-LA | Ars Technica http://arstechnica.com/business/2011/04/google-builds-webm-patent-pool-of-its-own-to-fight-back-against-mpeg-la/ Google and MPEG LA Announce Agreement Covering VP
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Youtubeの動画のスタイルをカスタマイズして任意のWebサイトに埋め込む為のツール・「reEmbed」
CodePen - PrettyEmbed.js Demo
Youtubeから手軽にgifアニメを作れる・「GIF YouTube」
Vide
