The best resources for learning design and codeReceive hand-picked designer and developer tools, news and resources delivered to your inbox weekly.
Learn Design Code
The best resources for learning design and codeReceive hand-picked designer and developer tools, news and resources delivered to your inbox weekly.
Modernizr の使い方 ～ 入門解説 ～ TOP
Modernizr の基本的な使い方を解説する入門サイトです。Modernizr とは？ 【メイン機能】 Modernizr は、JavaScript のライブラリで、訪問者のブラウザがどのような機能（HTML5やCSS3）をサポートしているかをチェックします。 そしてその結果に基づき、html 要素に特定のクラスを付与します。 それと同時に、JavaScript オブジェクト（Modernizr グローバルオブジェクト）にもその結果を記録します。 デザイナであれば、html に付与されたクラスを利用して、ある機能をサポートする場合とそうでない場合とで表示を分けることができます。 プログラマーであれば、JavaScript オブジェクトも利用することでしょう。 【その他機能】 その他にも Modernizr には、以下のような機能があります。 (1) html5shiv IE8
iOS6から使用可能になったWeb Audio APIを試す - とあるプログラマの備忘録
某プラットフォームのiOSの音声がならずいろいろ試行錯誤してみた結果 この方法でなるようになったので一応備忘録 処理のフロー的にはこんな 1,ページが開かれる 2,対象の音声をロード 3,Web Audio APIが使用できるかのチェック ※iOS6から使用が可能 4,XMLHttpRequestでmp3ファイルをバイナリで持ってくる 5,デコード 6,「再生」ボタンを押す 7,ロードしてる音声ファイルを流す という流れになります。 sound.js $(document).ready(function() { /** * @component */ var context; var sound_buffer = null; //onLoad window.addEventListener('load', init, false); /** * 初期化 * **/ function ini
Use a Pattern Brush to Create Rope Effects in Illustrator | Envato Tuts+
In this tutorial, you will learn how to create a simple rope brush in Illustrator and how to use it to create a rope brush text effect. You'll learn the process of drawing a rope using the Rectangle Tool. We'll use blending and vector shape-building techniques, as well as the Live Corners feature. You'll also learn how to create the pattern brush components using the Shape Builder Tool. Finally, y
CSS3アニメーションを使ったボタンホバーの12種類のかわいいエフェクト
12 fancy buttons デモはChrome, Safari, Firefoxなどのモダンブラウザでご覧ください。 12種類の中から、特に気に入ったものを下記にピックアップしてみました。 ※各CSSはエフェクトの箇所のみで、ベンダプレフィックスは省略しています。 demo 4 のアニメーション ホバーすると、上からパタッとなります。 .b04_3d_tick { perspective: 500px; perspective-origin: center top; } .b04_3d_tick div { position: absolute; text-align: center; width: 100%; height: 50px; box-sizing: border-box; padding: 10px; border: #000000 solid 1px; } .b04_
Bootstro.js demo
data-bootstro-step=4 (starting from 0)" data-bootstro-placement="bottom" > Yay. Finally bootstro now supports Bootstrap 3, after a very very long procrastination. Good news is Every thing still stays the same. You pretty much don't need to change anything Latest Bootstro.js still works with Bootstrap 2 by adding the following 1 single line bootstro.set_bootstrap_version(2); before calling bootstro
jQueryを使ったAjaxまとめ
このエントリーはjQuery Advent Calendar 2013の9日目のエントリーです。 8日目は@KazumaNishihataさんのFileAPIとAjaxでした。 普段、PhoneGapを使ったアプリを作ることが多いので、何かとAjaxにはお世話になります。 ということで今回はAjaxの色々な使い方についてまとめたいと思います。 といってもAjaxで使えるオプションの紹介というわけでなく、今まで個人的によく使ってきた使い方や困ったことなどを中心にまとめます。 Ajaxの基本的な使い方 Ajaxとは、Javascriptを利用して行う非同期な通信形態のことです。 要は、通常サーバーとの通信はページをロードしたタイミングで行いますが、Ajaxを利用すると任意のタイミングで（ボタンをクリックしたときやスクロールしたときなど）サーバーとの通信を行うことができます。 そんなAj
D3.jsとFabric.jsを使ってcanvasに描画する
d3.js Advent Calendar 2013 4日目の参加記事です。 以前も、Fabric.jsについては書いたことがあるのですが、D3とFabricの組み合わせにはいろいろな可能性を感じるので、布教のつもりで改めて記事にしたいと思います。 Fabricは、HTML5のcanvas要素を使いやすくするJavaScriptのグラフィックライブラリです。 最近では、Canvas は、私たちが、全く 驚くべき グラフィックス をウェブ上で作ることを可能にしました。しかし、 CanvasのAPIが提供するのは、残念ながら低水準です。 もし、私たちが単に基本的な図形を canvas上にほとんど描きたいと思わず、そのことを忘れてしまえば別ですが、 どんな形にせよインタラクションが必要になったり、 いかなる点であれ、絵の変更が必要になったり、もっと複雑な図形を 描くことが必要になったら、状況は一
CSS filter プロパティで 「半透明ガラス」 効果を再現してみる
2つ前の記事、「Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に」 で、::backdrop 疑似要素に色々スタイル当てて遊んでたとき、::backdrop 疑似要素に対しては半透明の白いレイヤーになるようにスタイル当てて、その上で、CSS filter プロパティを使って画面全体をぼやかしたら、iOS 7 （Windows Aero ...） とかで使われてる、所謂 「半透明ガラス」 っぽい効果が出せるんじゃね？ と思ってやってみました。 実際に iPhone の Safari で表示してみた例が下記の画像です。 ただし、dialog 要素や ::backdrop 疑似要素を使っちゃうと、現時点では Chrome Canary で、さらにフラグを立てないと動作しないっていう、ほとんどの人が試せない状態になってしまうので、今回は div 要素を J
HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
WebGL無しiOSでも簡単軽快3D。three.jsとCSS3DRendererでDOMを3D化
Warning: preg_replace(): Compilation failed: invalid range in character class at offset 4 in /home/koj/www/sites/0017_tettori.net/wp-content/plugins/crayon-syntax-highlighter/crayon_langs.class.php on line 340 Warning: preg_replace(): Compilation failed: invalid range in character class at offset 4 in /home/koj/www/sites/0017_tettori.net/wp-content/plugins/crayon-syntax-highlighter/crayon_langs.cl
【デザイン】photoshopを使って写真を流行の三角形モザイクに加工する方法 | iPhone/iPadアプリ Applision（アプリジョン）
話題のウェブ屋「LIG」さんの記事のサムネイルを見て以来、私は三角形モザイク加工の虜！すげぇオシャレですよね！！ LIGさんで使われてたサムネイル画像と記事がこちら 記事をCSVで一括登録！WordPressプラグインReally Simple CSV Importer 画像：© 2013 LIG inc. 私も作ってみたい！！ というわけでググるとやり方説明しているページを発見！ ・・・・、日本語でＯＫ。。。全部英語でした。 というわけで、日本語に解読して説明しますよ！！ これ使うだけで、なんだか一気に今風の流行乗っちゃってる系に大変身できます！！ １：三角形モザイクする基本画像を用意 まずは、加工するための写真が必要！ってことで用意してください。 比較的色味がはっきりくっきりしてるほうが仕上がり綺麗です。 さて、用意した画像はレイヤーで２回コピーしておいてください。 ２：自由変形ツール
CSSだけで作る カスタム属性を利用したロールオーバーエフェクト | DECONCEPTER
Creative Link Effectsを見ていて、同じテキストが下から出てくるエフェクトどうやってるのかなと思ってみてみたら、簡単だったので紹介します。デモはこちら 1つのノードで同じテキストを2つ用意するには HTML5のカスタム属性を利用して、CSSの擬似要素から呼び出す形でテキストを複製します。又、子要素を絶対配置にして座標を移動させる形でエフェクトを実現するため、入れ子のタグが必要です。 <h1 id="logo"> <a href="http://deconcepter.jp" data-hover="DECONCEPTER">DECONCEPTER</a> </h1> #logo a::before { content: attr(data-hover); } 上記のコードで下図キャプチャのような状態になります。 css transformで座標を移動する 座標を移動した時
Mac+VirtualBox+modern.IEでIE6~10環境を無料で構築する - しゃの
3月中に出すって言ってたmodern.IE日本語版が先日公開されていて、 ホーム | Internet Explorer の検証がより簡単に | modern.IE ※どうでもいい話だけど、modern.IEはレスポンシブデザインだったりする 複数メディアで取り上げられてた。 マイクロソフト、ブラウザーの互換性検証サイト「modern.IE」日本語版を公開 -INTERNET Watch ニュース - 日本MS、Webサイト検証ツール「modern.ie」の日本語版を公開：ITpro マイクロソフト、Webページ検証サイト「modern.IE」の日本語版を公開 | 開発・SE | マイナビニュース 提供サービスは2つ。 ・有料：検証webサービス(2014年1月10日3ヶ月まで無料キャンペーン中 ※要Facebookアカウント) ・無料：検証用仮想環境の配布 検証用仮想環境は幅広く対応して
Animated Books with CSS 3D Transforms | Codrops
In this playground we’ll show you some creative, animated books with CSS 3D transforms and transitions. We’ll show you two types of book designs: hardcover and paperback. Both were made to be easily modifiable in some of their content parts using CSS, images, anchors and some extra little details 🙂 Hardcover Book The hardcover book consists of three cubes: hardcover front, book spine and hardcove
FONTPLUS TIPS 日本語Webフォント使用法
Tips内容 過去記事のロゴのWebフォント化ではこのTipsサイトのロゴをWebフォント化する内容でした。今回、サブタイトルとして「Webフォント活用術」のキャッチコピーを追加しましたので、これもまたWebフォント化してみました。 字間情報も含めてフォントデータしているため、letter-spacingなどを指定しなくてもただテキストを並べただけで自動的にロゴになります。CSSで自由に色の設定なども可能となります。英文字の「W」の斜めのストロークに合わせた斜線、明朝体の「さんずい」や「うろこ」が斜線の角度と一致するのが特徴のロゴをデザインしてみました。すべて直線で構成した明朝体になります。… Tips内容 過去記事「翻訳プラグイン」ではGoogle翻訳を使ったTipsを紹介しました。その場合、サイトのテキスト部分は翻訳されますが、言語によっては、Webフォントのグリフがない書体ではユーザ
WordPress を扱う上で憶えておいて欲しい3つのesc #wacja2012 – Simple Colors
わんばんこ。2012 WordPress アドベントカレンダーの3日目をむゆうさん（ @anticyborg ）と共に担当させていただきます。本当は、アドベントよりおべんｔ（以下略 WordPress で実現系のコードを紹介する記事は、よく目にしますし、セキュリティに関する関心も高いようですが、意外に基本的な所が抜け落ちているケースが多いように感じたので、テーマやプラグイン開発時に憶えておいて欲しい WordPress 関数、esc_html、esc_attr、esc_url について、つらつらと書いてみたいと思います。 この esc_ なんちゃらは、WordPress 2.8 から導入された関数で、それ以前のバージョンでは、wp_specialchars、attribute_escape、clean_urlと様々な名称であったものが、（おそらくは憶えやすいように）統一的な関数名に改名され
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
タブレット向けWebデザインのノウハウ40選 コーナーの記事一覧 | Web担当者Forum
無料でLINEやSkypeのようなリアルタイムアプリが簡単に作れるSkyWay
イラレ作成からWeb書き出しまで
