iOS 8 Mobile Safari の変更点を予測してみました - latest log
iOS 8 Mobile Safari の変更点を WebKit Changeset から予想してみました。 主な変更は、 HTML5 API Blob URL ( new URL("http://example.com").hostname -> "example.com" ) IndexedDB CSS -webkit-filter with SVGFilter CSS JIT 古い仕様に基づく CSS Variables が削除されました HTML <img srcset> <audio autoplay> <iframe seamless> に関わるコードが削除されました <input type="file"> に関わるコードが削除されました <style scoped> に関わるコードが削除されました Shadow DOM に関わるコードが削除されました DOM Events W
数多くの無料アイコンから必要なものだけをセットにして、軽量化されたWebフォントやSVGを作成できるサービスのまとめ
セットになったアイコンはデザインが統一されており、それはそれで便利ですが、全部のアイコンを使うことはほとんどないと思います。 自分が必要なアイコンだけをセットにし、軽量化されたセットにして、WebフォントやSVGとして利用できるオンラインサービスを紹介します。 用意されたアイコンからセットを作ってもよし、自分のアイコンを加えてセットにすることもできます。 flat icon フォーマット：font(woff, eot, ttf, svg), png, svg, eps, psd 462種類のパック、55,000個のアイコンから使用するアイコンだけを選択し、セットにすることができます。チェックしたアイコンはクッキーで保存されているので、ログインしないでも利用できます。
ミニマルなデザインに役立つ！小さくてもくっきり分かる500種類の無料アイコン素材 -Clear Icons -Solid
個人でも商用でも、Webページでもスマホアプリでも、無料で利用できるミニマルにデザインされた小さいアイコン素材を紹介します。 500種類全てデザインが統一されており、小さくてもミニマルなので、名前の通り「Clear」なアイコンに仕上がっています！ Clear Icons -Solid ダウンロードできる素材は、Web制作者が使いやすいようさまざまなフォーマットが用意されています。 .psd .svg .png (Black & White) .csh PSDやベクターも嬉しいですが、カスタムシェイプも揃ってるのは嬉しさ倍ですね。 アイコンは全部で500種類！ ビジネスやホビーなど、さまざまなアイテムが揃ってます。
【保存版】デザインにも提案資料にも "めっちゃ使える" 無料のアイコン素材サイト17選
どうも、平成の☆ やな☆ぎさわです。 デザインや資料作成などで素敵なアイコンをサクッと配置したり、ワンポイントで使いたい時ってありますよね。 そんなとき、自分で作ると時間がかかるし、そもそも作れないよぉなんて悩んでる方は多いのではないでしょうか。というわけで、王道中の王道ですが、今回は素敵なアイコンサイトのご紹介と行きたいと思います。 もはや何番煎じだかわからないからこそ、全力で厳選しました。ぜひ。 ありとあらゆるアイコンが無料＆超激安で手に入る金字塔的サイト「ICONFINDER」 ICONFINDER >>サイトはコチラ 僕は、資料を作る際に必ずと言っていいほどこのサイトに依存してます。 検索は英語限定ですが、JPG、PNG形式はもちろん、ベクターデータや3D系まで異常なほど豊富なアイコン収録数が魅力。 本職のデザイナーさんでここを知らないって人はもはやいないと思いますが、非デザイナー
SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
【パス初心者向け】トレースするときに気をつけていること - デザイナーのイラストノート
SVGの普及かアイコンブームか、パスを使ってイラストを描く方が増えた気がします。前から書いてみたかった、パスでトレースするときに気をつけるといい「作り方」と「考え方」を記事にしてみました。 文字をトレースしてみよう パストレースの練習として、文字やロゴマークをトレースすると言うのはよく聞きます。曲線あり直線有り中抜きあり、で練習にはいい素材です。特にフォントの場合はアウトラインをとることで、どこにアンカーポイントを置けばいいのか参考にすることが出来ます。 試しにこの2つのお題に取り組んでみました。この形を実現するのにどんな方法をとりますか？正解はいくつもありますが、例えばこの方法。 完成！いいじゃない！と思いますか？確かに形としては完璧なんですが、練習であれば個人的にはこちらをおすすめしたいです。 さっきとの違いが分かるでしょうか？3つの図形を組み合わせて文字の形を作っています。文字を書く
SVGを制作できるアプリ,お絵描きソフトを徹底的に調べました！ 114個 - 聴く耳を持たない(片方しか)
私はTwitterでよくSVG関連情報をチェックしているのですが、 SVGってどう作ったらいいの？ みたいな投稿をしばしば見かけます。 SVGは地味な存在ですが近年は徐々に注目を浴び、関連ツールも増えてきたのでそうした人向けにSVG制作ツールって結構たくさんあるよ！と、まとめてみた次第です。 でも114個って多過ぎ！ ……って思うかもしれない、いや正直オレもそう思う。 なので最後に114個の中から管理人のお薦めツール10選っていうのもまとめておいたので、さっくり読みたい人はそれだけチェックすれば良いかと。 そもそもSVGとは、なに？ そもそもSVGってなに？という人もいるでしょう、それについては以前記事にまとめました。 SVGとはなにか？とSVGの学習に役立つサイトや書籍の紹介 SVGの説明と、SVGの学習に役立つサイトや参考になる書籍の紹介をしています。 今回とりあげるSVG関連ツールと
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト！ 2014年7月3日 追記：SVGスプライトの書き方について修正＆追記しました。 SVGってなに？ SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
[JS]アイデアが素晴らしい！ページにちょっとしたアクセントを加えるスクリプトのまとめ
そのまま使ってもよし、アイデアに刺激されインスパイアされてもよし、の工夫をこらした素晴らしいアイデアのスクリプトを紹介します。
商用利用無料、シンプルなアウトラインが非常に美しいアイコン素材 -150 Outlined Icons
ウェブサイトやアプリで使うさまざまなアイテムが揃った、シンプルな美しいアウトラインで作成されたミニマルなアイコン素材を紹介します。 フォーマットはPSD, AI, SVG, Icon Fontと全て揃ってます！ 150 outlined icons – PSD AI SVG Webfont ダウンロードできるアイコンのフォーマットは全てベクターで、4種類が揃っています。 .psd .ai .svg フォント（.woff, .eot, .ttf, .svg） あらゆる作業環境でそのまま使用できますね。 アイコンのアイテムは全部で、150種類！ ウェブサイトやブログ、アプリでよく利用するアイテムが揃っています。
Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
SVGMagic
div要素の背景画像としてSVGを使用します。 SVGMagicの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="SVGMagic.min.js"></script> </head> SVG画像をPNG画像に変換するのには、PHPを使用しています。 converter.php（ダウンロードファイル一式に含まれています） SVGMagic.min.js内では、配布元のサーバーのファイルを参照してい
Radian - Home
Radian is an open source JavaScript library that makes it easy to embed plots in HTML documents. It is being developed as part of OpenBrain’s BayesHive project. Instead of writing JavaScript plotting code yourself, you use custom HTML elements to represent plots. For instance, the HTML code on the left produces the plot on the right: <plot height=200 aspect=2 stroke-width=2 x="[[seq(0,4*PI,101)]]"
[CSS]水平に配置したセクションを分けるスタイルのさまざまな素敵なテクニック
1ページに複数のセクションを水平に配置した際に、それらの区切りとなるさまざまなスタイルを紹介します。 縦長の1ページで構成されたプロモーションサイトやポートフォリオなどで見かけるものだけでなく、こんなこともできるのかとアイデアが素晴らしいものもたくさん！ デモページ 各デモと共にそのスタイルを紹介します。 まずはHTMLから。基本となるのは、2パターンです。 1つ目は、section要素にclassをつけるだけ。 <section class="ss-style-hogehoge"> コンテンツ </section> 2つ目は、svg要素を使用します。 <section> コンテンツ </section> <svg id="hoge"> SVGの中身 </svg> sctionだけの場合はclass、svgを使用するものはidになっています。 以下、各デモとそのスタイルです。 HTML/C
Internet Explorer 9正式版のHTML5／CSS3／SVG対応
Internet Explorer 9正式版のHTML5／CSS3／SVG対応：特集：Web制作者＆開発者のためのIE9概説（後編）（1/3 ページ） 連載目次 前編に引き続き、Internet Explorer 9（以降、IE9）正式版の新機能について解説する。後編である今回は、IE9の主要なHTML5／CSS3／SVG対応機能を紹介する。 ■4. HTML5対応 最近、HTML5への注目度が高まっている。2011年6月に米国で行われた「次期Windows 8（コード名）プレビュー・イベント」で、「“HTML5”で記述できるWindowsネイティブ・アプリケーション」（まだ詳細は不明）という新しいアプリケーション種別が登場することが発表されたことからも、その勢いは増すばかりだ。特にグーグルが強力に推進している印象のあるHTML5だが、マイクロソフト技術系である.NET開発者も大きな関心と
HTML5の新機能が使用可能かどうかを判別するJSコード一覧 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） HTML5で色々と新機能が登場しましたが、ブラウザの対応状況は未だまちまちです。 こちらのサイトでは、ブラウザが対応しているかを判別する為のJSコードを一覧にしてくれています。 The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything – Dive Into HTML5 軽く抜粋してみます。 audio return !!document.createElement('audio').canPlayType; video return !!document.createElement('video').canPlayType; canvas return !!document.createElement('canvas').getCo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVGアイコンを使ってみたい人にぴったり！実装は簡単で使い勝手のよいアイコンフォント -Stackicons
2014年、無料で商用利用できる最新フリーアイコン素材のまとめ
ちょっと珍しいアイコン素材のまとめ、日本の伝統文化、エコ、キッチン用品、矢印、雪の結晶などレアアイテムたくさん
Taken SPC: いい加減な canvas 要素の紹介