CSSとHTML Canvasで作るモーショングラフィック - ICS MEDIA
ICS MEDIAのトップページに掲載しているモーショングラフィック。これはCSSとHTML Canvas要素を使って作成したものです。時間経過とともに波の形状と色彩が変化し、多彩な表現を楽しめるようになっています。 本記事ではCSSとHTML Canvasの理解につながることを目標に、このモーショングラフィックの作成方法をステップ形式で解説します。サンプルのソースコードはすべてGitHubにて公開していますので、あわせて参照ください。 ▲ 完成版サンプル ステップ1. CSSでグラデーション背景の作成 サンプルを別ウインドウで開く ソースコードを確認する はじめに、時間経過で色彩が変化するグラフィックを作成しましょう。CSSで縦に長いグラデーションの背景を用意し、CSSアニメーションを使って縦方向に移動させることでグラデーションが変化する表現ができます（ステップ1のソースコード)。 #b
CSSのmix-blend-modeで実現するドローイング表現 - ICS MEDIA
CSSはPhotoshopライクなグラフィカルなブレンドモードを搭載しています。デザイナーやモーションクリエイターにとっては直感的に利用しやすいのではないでしょうか。しかし、CSSのブレンドモードは執筆時点（2015年9月現在）はMicrosoft EdgeやInternet Explorerが対応していないのがデメリットです（追記：2022年現在はほぼすべてのブラウザで利用できます）。 Canvas要素は旧式ブラウザを含め多くのブラウザで利用できるものの、Canvas要素はブレンドモードの種類が少ないという制約があります。ここで挙げたように、それぞれのテクノロジーには一長一短があるのでコンテンツに応じて最適な手段を検討するのが現実解となります。 デモ作成で選んだのはCSS3のブレンドモード デモ作成にあたり2つのレイヤーを作成しました。1つはカラフルな背景のレイヤー、もう1つはドローイン
「CSS Regionsを使った新しいCSSレイアウトを作る方法」HTML5 Conference2013レポート
「CSS Regionsを使った新しいCSSレイアウトを作る方法」HTML5 Conference2013レポート 馬場 美由紀（HTML5 Experts.jp編集部） 11月にiOS7のSafariでサポートされることになり、一躍注目を集めることになった「CSS Regions」。雑誌や新聞のような、自由でクリエイティブなWebデザインを実現できると注目されていますが、その実、何ができるのかは未知数です。 2013年11月30日（土）に開催された「HTML5 Conference 2013」のアドビシステムズ轟啓介さんのセッション「CSS Regionsを使った新しいCSSレイアウトを作る方法」では、主に「CSS Regions」を使ってできること、そして実際の記述方法について解説されました。 複数のボックスをまたいでリフローできる 「CSS Regions」 現在、「CSS Regi
HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック - builder by ZDNet Japan
Adobe Systemsがロサンゼルスで5月に初旬に開催した「Adobe MAX 2013」において、HTML5 Boilerplateの開発者として知られるPaul Irish氏の講演「Mobile CSS Performance」を聴講した。その内容をベースにしながら、CSSを高速化するためのさまざまなテクニックを紹介する。 Paul Irish氏は、HTML5 BoilerplateやModernizrなどの開発者として世界的に著名なGoogleのエンジニア。その彼が直接CSSのパフォーマンスを語るとあって、セッションは大変な人気であった。 一般的にウェブページの高速化、特にモバイルにおいてはCSSを高速化することよりもネットワークのパフォーマンスを最適化する方が効果が高い。そのため、まずはPageSpeedやYSlowなどを効果的に使用し、HTTPリクエスト数を減らす、ダウンロー
JavaScriptのスマホ対応時に知らないと損する16のコト
JavaScriptのスマホ対応時に知らないと損する16のコト：スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）（1/3 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、スマホ向けサイトにおけるJavaScriptの4つの主な役割、実装上の3つの注意点、よく使われるOSSライブラリ4選、OS／機種依存事例5選などを紹介します こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「HTML5のスマホ対応の基礎知識とハマリどころ3選」では、HTML5に対する対応状況、代表的なHTMLタグに対する依存事例を紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での
Queness - Design Inspirations, jQuery Tutorials and Web Design & Development Community
Exclusive web development news, freebies, tutorials and mobile news delivered right to your inbox. See our newsletter sample.
Adobeアカデミックストア
Yes, Adobe offers free products like Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. You can also use Creative Cloud Express, Fresco, and Lightroom Mobile for free, with the option of making in-app purchases. Adobe makes some of the most widely used software applications in the world, many of which are industry standard. Get started with free apps like Adobe Acrobat Reader, A
WebPlatform.org — Your Web, documented
Opening the Web Platform We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.
Adobeアカデミックストア
Yes, Adobe offers free products like Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. You can also use Creative Cloud Express, Fresco, and Lightroom Mobile for free, with the option of making in-app purchases. Adobe makes some of the most widely used software applications in the world, many of which are industry standard. Get started with free apps like Adobe Acrobat Reader, A
最近の「HTMLとかCSSとかAPIとか」、CSSがより便利に使える「実践Sass」～HTML5 Conference 2012 セッションレポート | gihyo.jp
最近の「HTMLとかCSSとかAPIとか」、CSSがより便利に使える「実践Sass」～HTML5 Conference 2012 セッションレポート 9月8日、慶応義塾大学日吉キャンパス協生館にてHTML5 Conference 2012が開催されました。4トラック20セッションの講演が行われたのですが、本稿では次のセッションを中心に本イベントをレポートします。 「HTMLとかCSSとかAPIとか －2012秋編－」 「実践Sass －10を超えるプロジェクト運用で得たノウハウ－」 注 公式レポートは@ITにて順次掲載されていますのでそちらをご覧ください。イベントの公式サイトでは、本イベントに関する記事を収集しているので、こちらを確認してみると良いでしょう。また、各登壇者の発表資料もイベントの公式サイトに掲載されています。 基調講演 昨年開催されたChrome+HTML5 Conferen
良いエンジニアの育て方 - ひがやすを技術ブログ
人を育てるというのは、とても難しい。 なぜなら、育てる方も未完成な人間だから。 ちょっと経験値のある未完成な人が、経験値の少ない未完成な人と、ともに冒険をし、ともにレベルをあげていくことが、人を育てるってことだと思う。 人を育てようと思うと、どうしても上から目線になってしまう。上から目線だと気持ちも相手に伝わりにくい。気持ちが伝わらないと相手もうまく成長してくれない。 だから、人を育てる機会があったら、ともに冒険をする仲間を持ったと考えよう。きっとその方がうまくいく。 それでは、自分の話をしよう。自分というよりは自分たちの話かな。 2010年、自分は、昼間、ブラ三をやりながら、新規ビジネスの企画を考えたり、プロトタイプを作っていたりしていた。ブラ三をやっていたのは、当然ソーシャルアプリというものを学ぶためだ。ブラ三の能力はかなり向上したけど、仕事ではたいした結果が出せなかった。特に企画考え
暑さでやる気がでないWebデザイナーにおくるHTML5表現まとめ
仲夏。HTMLファイ部の本多です。 jsdo.itにて、コーディングコンテスト「Web Creator's Contest Q」を開催しています。 QはWebクリエイターのためのコンテスト、HTML5、JavaScript、CSSを駆使して挑戦しましょう！ 募集中のテーマはズバリ、 ＼ 夏を涼しくする表現 ／ 暑い夏をひんやり涼しくしてくれる作品をお待ちしています！ 本記事では、続々と集まっている投稿作品の一部をご紹介します。 夏の暑さでやる気のでない方、涼しくてアツいHTML5作品をご堪能あれ！ ※ Chrome、Safari など、最新のモダンブラウザでご覧ください。 夏を涼しくするコードまとめ！ ripple sound 音と波紋を合わせた表現が爽やかで良いですね...！ A～Zのキーを押すと自分で波紋を出せます。
Firefox 13 の後方互換性に関わる修正
Firefox 13 は 6/5 のリリースに向けて開発が続けられています。後方互換性は可能な限り維持されていますが、他のブラウザとの相互運用性や最新 Web 標準仕様への準拠のため、後方互換性に関わる修正も含まれます。そのような修正点をまとめましたので、動作検証時などにご参照ください。 ここでは後方互換性に影響し得る主な修正のみ解説します。その他の新機能や変更点については次のページをご覧ください。 ユーザ向けも含めた新機能: Firefox 13 の主な新機能を紹介します 開発者向けの新機能や変更点: Firefox 13 for developers 接頭辞付きの -moz-border-radius* と -moz-box-shadow はサポートを終了します CSS プロパティ -moz-border-radius は Firefox 1 から、-moz-box-shadow は
Media Queries (W3C Recommendation 19 June 2012)
Media Queries Level 3 W3C Recommendation, 05 April 2022 More details about this document This Version: https://www.w3.org/TR/2022/REC-mediaqueries-3-20220405/ Latest Version: https://www.w3.org/TR/mediaqueries-3/ Latest Editor Version: https://drafts.csswg.org/mediaqueries-3/ Previous Version: https://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/ History: https://www.w3.org/standards/history/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新しいCSSの仕様を色々調べてみた
07design.net
すべての人に知っておいてほしい HTML5 & CSS3 の基本原則
Google Chrome - The Fast & Secure Web Browser Built to be Yours
円（サークル）を使ったCSSの次世代表現チュートリアル
CodePen: Online Code Editor and Front End Web Developer Community
