変幻自在なグラフィック表現！CSS, SVG, Canvasでマスクを使いこなせ - ICS MEDIA
近年、ウェブ技術の発展により、画像の一部だけを表示する「マスク表現」がよく見られるようになりました。一言でマスクと言っても、アニメーションやインタラクションとの組み合わせによりさまざまな表現が可能です。 また、どの技術を用いるかという選択も重要になります。マスク表現はCSS, SVG, Canvas APIといった技術で実現できますが、それぞれが異なる得意分野をもちます。 本記事の前半では、マスク表現を実現する技術について解説を行います。後半では実践的なマスク表現をいくつか紹介しながら、それぞれの実装方法を紹介します。いままで技術的に難しいと諦めていた表現が、マスクによって実現するヒントになれば幸いです。 ▼マスク表現の例（背景画像の一部を表示している） - Erika Moreira Portfolio マスクとは 本記事で紹介するマスク表現とは、画像の一部を切り抜く手法です。マスキング
【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた | バシャログ。
モニターを見つめる目に優しいメガネがZoffからも出る！しかも度付きOK、フレームも選べる！気になってます。hakoishiです。 さて、今回は実は便利なcssのセレクタ指定方法をちょっとだけ掘り起こしてご紹介。 直下にある要素だけ、とかセレクタ名が部分一致したら、はたまたリンク先パスによって、とか実はかなり便利です！ 特定の要素の直下の要素だけに一括でマージンを設定 特定の文言を含むセレクタ、及びその位置で対象を絞り込み指定 リンク先のパス次第でスタイルを切り分ける 特定の要素・セレクタを例外とする 特定の要素の直下の要素だけに一括でマージンを設定 #container>* { margin: 0 10px; } IE7以上対応。 親>子で、直下要素のみを対象指定。 上記例ではid="container"の直下の要素すべてにマージンが設定されます。 ユニバーサルセレクタには正直不安を感じ
HTML5でスマホをコントローラにするゲームを作ってみた | CSS-EBLOG
HTML5でスマホをコントローラにするゲームを作ってみた カテゴリ：HTML5 2011年10月27日 09:00 Canvasゲームをカスタマイズ ゲーム自体は以前作ったものをそのまま使いました。 今回作ったスマホコントローラ版 http://edo-m18.me:9000/ 以前作ったものをカスタマイズして、弾を打つ部分と自機を移動する部分を、関連付けたスマホから操作できるようにしてみたものです。 これはあくまでアイデア、ってことで快適にプレイできるまでは作りこんでいません(; ´Д`) ただ、特にプラグインなどを使わずともここまでできる、というのは非常に面白いなと思いました。 Node.jsを使って実装 今回、WebSocket部分はNode.jsを使って実装しました。 最近Node.jsにハマりすぎてプライベートではNode.jsしか触ってませんｗ やはりサーバサイドとクライアント
Flash Player 11 対応の 3D 物理演算ライブラリ「AwayPhysics」 | ClockMaker Blog
Flash Player 11 対応の 3D 物理演算ライブラリ「AwayPhysics」を使ってデモを作ってみました。AwayPhysics は名前のとおり Away3D 4.0 alpha (Stage3D版) 対応の物理演算エンジンで、今までの3D物理演算ライブラリよりも高速に動作します。 [立方体バージョン 100個] Demo Source [球体バージョン 100個] Demo Source 以前「ActionScript 3.0 での 3D 物理演算ライブラリjiglibflash」という記事で JigLib を紹介したことがありましたが、次の記事によると jiglib よりも AwayPhysics のほうが高速とのこと。JigLib と AwayPhysics との比較デモが紹介されています。 Away3D 4.0 jiglib vs Bullet « DevJamMem
フロントエンドの開発効率が3倍に…！？デバッギングプロキシCharlesの使い方 :: 5509
タイトルは釣りかとおもいきや僕は普通にあるのとないのとで3倍くらい差があるので、界王拳アプリのひとつです。特にWebアプリとか大きめの規模のサイト開発でとても役に立ちます。 Charles こんなことができます（目次） いちいちサーバーへファイル転送なんかしてられない Charlesのインストールとライセンス Map Local（指定URLのリクエストをローカルへ向ける Map Remote（指定URLのリクエストを別のURLへ向ける 常にキャッシュをオフに Locations 設定の流れ（ほとんど全部共通） Throttling で回線速度をシミュレート リクエストが丸裸 例えばXMLHTTPRequestの場合 ログの設定はRecording Settingsから 紹介してる以外にも Reverse Proxy を設定できたり、 Break Points で指定リクエストのパラメータを
Photoshopで複製したレイヤーに「のコピー」をつけない方法 – creamu
ふと思いついてエントリー。 Photoshopでは、通常レイヤーやフォルダを複製すると、「レイヤー1」「レイヤー 1 のコピー 2」という風に「のコピー」というのがついてしまいますが、CS5から、オプションでつけないようにすることができます。 レイヤーパレットのこの部分をクリック 「パネルオプション」をクリック デフォルトでついているここのチェックをはずす これで快適にレイヤーをコピーしまくることができます。 ぜひやってみてください！ 書籍プレゼントへのたくさんのご応募、ありがとうございました！70名を超える方にご応募いただきました。 合計2冊のプレゼントだったので、少ないのですが、当選者の方にはメールを送らせていただいて、発送させていただきました。ですのでメールが届いていない方には、申し訳ありません。次回また何かありましたら、よろしくお願いします！
Román Cortés » Pure CSS Coke Can
Último proyecto completado: Chimeneas Rofer & Rodi Proyecto actual en curso: Arteforo (versión en castellano abajo) After doing the CSS Paper Bird effect, I found out that by a combination of the CSS1 properties background-attachment and background-position, 2D displacement maps could be created and, by scrolling, the displacement map would be applied to different parts of the texture (a backgroun
HTML5で誤用されがちな各要素の正しい使い方 | コリス
HTML5はXHTML1.0やHTML4を継承しつつ、使い方が大きく変わった点もあります。 よく利用されるHTML5の各要素の誤用されがちな例とそれを正しく適切に使う方法を紹介します。 You're Doing it Wrong: Common HTML Tag Misuses [ad#ad-2] 下記は各ポイントを意訳したものです。 <br>の誤用 <br>の間違った使い方 <br>のよくある誤用は、コンテンツ間にスペースをつくるために使用することです。 これはWYSIWYGエディタで作成するとよく起きる現象で、複数の空の行で隙間をつくります。 <br>の適切な使い方 <br>は文章を改行するために使用するものです。 段落に分けるには<p>を使用し、文章同士の間をあけるためにはCSSのmarginなどで間隔を設定します。 <div>の誤用 <div>の間違った使い方 HTML+CSSでペ
MdN Design｜総合情報サイト
スマートフォンと違い、iPadなどのタブレットに最適化された表示を行っているサイトはまだまだ少ない。 そこで今回は、LESSON 13同様、別HTMLを用意せず、同じHTMLにJavaScriptとCSSを使用して、タブレットタイプ用に表示を最適化させる。 タブレット用にするからといって特別にHTMLの作り方を変える必要はなく、正しくマークアップできていれば基本的に問題ない。 ただ、あまりにも無駄に多い入れ子構造や、レイアウトは避けたほうがよい。あくまでも(X)HTML/CSSを意識して作ろう。 今回はタブレットにも使用されるので、HTML5やCSS3を駆使してPC用も作ってよいが、IEなどの未対応ブラウザへの対応が発生するので注意が必要だ。 【1】のような、ブログ形式のPCページ構成をベースに構築していく。 使用するCSSは ・PC用CSS（デフォルト） ・スマートフォン用CSS ・タブ
レイアウトや配色等をインタラクティブに設定できるWordPressテーマを作る為のフレームワーク・PressWorkちょっとやばい - かちびと.net
その場でインタラクティブにレイアウトや配色を 調整出来るようなテーマを作る為の開発者向け WordPressテーマフレームワークのご紹介。 久々に凄いなーと感じて脊髄反射的に記事に。 PressWorkで作られたテーマならユーザーが 直感でレイアウトを作る事が出来ます。 以前、直感でWebサイトを作成できるフリーWebサービスという記事を書いたんですが、このサービスのように、インタラクティブにレイアウトやカラーなどを決める事が出来るWordPressテーマ。というだけでも凄いんですが、これがフレームワークとして配布されているのでちょっと驚きでした。 HTML5で出来ています。管理画面に入る事も無く、FTP不要で直感的に、インタラクティブにレイアウトを組む事が出来ます。やばい。 以下に解説を少し。 テーマをアクティブにする 最初にテーマをアクティブにします。外観でPressWorkを選択する
覚えて嬉しい＆使って楽しい！B級ショートカット集【Photoshop版】
Photoshopの秋 時短の秋 ひぶたポケモンが進化しておおひぶたポケモンて。セキネです。 みなさんショートカットは好きですか？ぼくはどっちかというと好きです。 そこで、今回は王道ショートカットではなく、知っておくと実は使える／知っていても使うまでいかない／ボタン押した方が早いじゃないかというようなちょっとB級臭のするショートカットや小ネタを紹介します。ちなみにB級かそうでないかは独断と偏見で選んでます。そのへんよろしくお願いします。 目指せ、カンバス以外非表示系男子。 ※Macキーボードでの記載となります。Windowsの方はCommand→Ctrl／option→altへと脳内変換をお願いします。 ※OSやバージョン違いによって差異があるかもしれません。 ツール まずは意外と使いこなせていない人が多いツール切り替えショートカット。 ツールパレットまで移動する時間を省ければ全体で大きな
クオリティの高いWEBレイアウトpsd「40 Professional and Detailed Web Layout PSD Templates」
TOP > WebDesign > クオリティの高いWEBレイアウトpsd「40 Professional and Detailed Web Layout PSD Templates」 WEBを制作する際にphotoshopで制作しているひとには便利なpsdテンプレート。パーツを参考にしたり、全体のベースとしたり様々な使い方がありますが、今日紹介するのはクリエイティブで、プロフェッショナルなWEBレイアウトPSDファイルをまとめたエントリー「40 Professional and Detailed Web Layout PSD Templates」です。 Free Professional PSD Template: BlueMasters – Smashing Magazine 様々なテイストのpsdファイルがまとめられていますが、今日はその中から気になったテンプレートをピックア
【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL（zip：12kb） HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
WordPressのfunctions.phpを編集する便利なテクニック25+ – creamu
100768523/ Hemera/ Thinkstock WordPressをカスタマイズしたい。 そんなときにおすすめなのが、『25+ Extremely Useful Tricks for the WordPress Functions File』。WordPressのfunctions.phpを編集する便利なテクニック集です。 WordPressのバージョンを非表示にして、クライアントにアップグレードのアラートを見せないようにしたり、ダッシュボードのフッターを編集したりと、いろいろとあります。 WordPressのバージョンを非表示にする function wpbeginner_remove_version() { return ''; } add_filter('the_generator', 'wpbeginner_remove_version'); function remo
プラグインを使用しないでWordPressをより便利する10のチップス
WordPressにほんの数行記述するだけで、多くの便利な機能を付け加えるチップスをMegaMagから紹介します。 10 wordpress hacks & tricks that I like 1.コメントがついた記事をサムネイル付きで表示 サイドバーやフッタなどどこにでも、たくさんコメントがついた記事をサムネイル付きで表示します。 「http://an-alternative-image.jpg」はサムネイル画像が無い場合のデフォルトの画像を指定してください。 <textarea name="code" class="html" cols="60" rows="5"> <?php $popular = new WP_Query('orderby=comment_count&posts_per_page=5'); ?> <?php while ($popular->have_po
JavaScript使ってないのに使ってる風のピュアCSSなテクニック集:phpspot開発日誌
30 Pure CSS Alternatives to Javascript - Speckyboy Design Magazine JavaScript使ってないのに使ってる風のピュアCSSなテクニック集。 最近ではCSS3等の登場によってCSSだけでもかなり高度なことが出来るようになっていますが、それらのコレクションがまとまっていました。 CSSだけでもこれだけのことが出来るという可能性を知るのに調度良いです。 マウスオーバーでハイライトする地図 タイムライン LightBoxもCSSで コンテンツスライダー スピーチバブル 無理してCSSのみにこだわる必要はありませんが、楽な選択肢を取れるなら覚えておいて損はありませんね。 関連エントリ ピュアCSSで実装された吹き出しのデザイン例色々 ピュアCSSで画像を壁に貼ったポラロイドギャラリー風にするサンプル クリーンなデザインでピュアＣＳ
見ておくべきHTML5サイト集:phpspot開発日誌
5 Must See HTML5 Sites 見ておくべき、かどうかは分かりませんが、HTML5の可能性について知ることができるサイト集です。 ビデオ、キャンバス、ドラッグ＆ドロップ、ストレージ等HTML５のデモ集。 サポートブラウザの対応もアイコン付でわかりやすいサイト。 CanvasでWindowsのPaintを実現した凄いサイト HTML５で書かれたサイトのギャラリーサイト。 といった感じでHTML5について学べるサイト集。暇なときに眺めるだけでも予習になりそうですね。 関連エントリ 無茶苦茶カッコいいHTML5ビデオプレイヤー「SublimeVideo」 最近公開のHTML5関連の参考サイト色々まとめ
ke-tai.org > Blog Archive > ドコモのiモードHTMLシミュレータIIが8.4にバージョンアップし、無駄にカッコよくなりました
ドコモのiモードHTMLシミュレータIIが8.4にバージョンアップし、無駄にカッコよくなりました Tweet 2010/3/19 金曜日 matsui Posted in DoCoMo, ソフト紹介, タレコミ | 1 Comment » フォーラムからmemokamiさんにタレこんでいただきました。 情報提供ありがとうございます。 ドコモ純正の定番ケータイエミュレータである「iモードHTMLシミュレータII」が8.4にバージョンアップしたとのことです。 → NTTdocomo iモードHTMLシミュレータII [nttdocomo.co.jp] 前回のバージョンアップから約5ヶ月ぶりの更新ということになります。 今回の変更内容は以下の通りです。 シミュレートモード5から8までのブラウザエンジンおよびFlashエンジンのバージョンアップ メイン画面のデザインを変更 テーマ設定機能に対応 通
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
