日本の伝統や文化、四季の風物詩をピクトグラムで表現したアイコン素材 -日本の風習を伝える100のアイコン | コリス

2017/12/04 200 users コリス ピクトグラム psd 風習 風物詩

日本の伝統や文化、四季の風物詩をピクトグラムで表現したアイコン素材を紹介します。 配布中止になっていたのですが、今回当ブログで再配布することになりました。作者様に感謝です！ アイコンのフォーマットは、2種類。 .png（透過PNG） .psd（シェイプ） アイコンは日本人に馴染みのある日本の伝統や文化、四季の風物詩がシンプルにデザインされています。.psdのシェイプは、サイズやカラーを変更すること... 続きを読む

同人誌や商用利用もOK！美しく緻密にデザインされた曼荼羅（まんだら）のベクター素材 -Mandala Collection | コリス

2017/01/12 20 users マンダラ コリス EPS 曼荼羅 PNG

デザインやイラストのワンポイントに、背景やオーバーレイさせたり、拡大・縮小・着色して利用できるベクター完備の曼荼羅（まんだら）の素材を紹介します。 利用にあたっては、Webでもアプリでも動画でも紙でもプロダクトでも無料です。 素材のフォーマットはカスタマイズが可能なベクター完備、手軽に使える透過PNGも揃っています。 .ai .eps .png（透過） Mandala Collectionは通常は... 続きを読む

透過PNGをSVG+JPGに変換するスクリプト

2014/11/06 42 users スクリプト

witten by DEFGHI1977@xboxlive 変換前(透過PNG画像) ファイル: サイズ:Byte 変換後(SVG+JPG画像) JPG品質:% サイズ:Byte(%) これは何？ 本スクリプトは，透過PNG画像を同等のSVG画像に変換するものです．元画像をより軽快なJPG画像としつつ，透過部を定義できることことから昨今注目を集めているテクニックです．本スクリプトでは元画像をトリミ... 続きを読む

透過PNG/GIF画像を大幅に軽量化！SVG画像に変換する無料のオンラインサービス -ZorroSVG | コリス

2014/11/04 209 users 透過 JPEG圧縮 コリス デモ 品質

透過PNGは素晴らしいフォーマットですが、そのファイルサイズもなかなかのものです。 透過PNGや透過GIF画像をSVG画像に変換し、JPEG圧縮・品質で軽量化するオンラインサービスを紹介します。 デモでは、99KBの透過...記事の続きを読む 続きを読む

SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！ | Webクリエイターボックス

2014/10/08 237 users SVG クリッピングマスク アクセント マスク フレーム

Webクリエイターボックスでちょこちょこ取り上げてきたSVG。今回は第四弾！SVGを使ったクリッピングマスクを紹介します。今までは画像に透過PNGを重ねてマスクを表現できましたが、高解像度ディスプレイに対応させたり、マスク自体に効果をつけるならSVGが便利かなーと思います。サムネイル画像にフレームをつけたり、デザインのアクセントとして使えるので、ぜひマスターしてくださいね！ SVGのクリッピングマ... 続きを読む

透過PNGをSVGを利用して軽くするテクニック - Weblog - Hail2u.net

2014/09/21 40 users SVG Weblog hail2u.net jpg PNG

透過PNGは現状では唯一に近いフルカラーの透過画像を作成する手段だが、ファイル・サイズが大きくなりがちだ。対してJPGはファイル・サイズという点で大きく優るが、透過することは出来ない。このあちらを立てればこちらが立たずの問題をSVGのマスク機能を使って透過だけを受け持つPNGとJPGを組み合わせることで両立させるテクニックを知った。 透過させた画像をまず普通に作る。それから透過してないJPG画像と... 続きを読む

小さい葉っぱがかわいい！月桂樹をあしらったフレームやアローなどの素材 -StarSunflower Studio | コリス

2013/09/26 59 users コリス 月桂樹 アロー SVG ARROWS

かわいらしくデザインされた月桂樹をあしらったフレームやライン、アロー、リボンなどの素材を紹介します。 Free Laurel Frames & Arrows ダウンロードできる素材のフォーマットは、便利なものが揃っています。 .png 透過PNGでグリーンブラウン、ブラックの2種類。 .svg ベクターなのでサイズ変更可能です。 .abr Photoshop用のブラシ。 アイテムはPNGも高解像な... 続きを読む

「HTML5で冷気を表現したサイトがすごいな」を分解してみた！ / SQUEEZE - Web Design Studio -

2013/07/19 135 users canvas IDEA*IDEA Squeeze 透過 冷気

「HTML5で冷気を表現したサイトがすごいな | IDEA*IDEA」で紹介されていた「メンソール系 氷冷エナジードリンク RAIZIN COOL」のリアルな冷気の表現がHTML5/Canvasで作成されているということで、どんな風に出来ているか気になったので分解してみました。 Canvasに透過pngを描画してループさせる (1)(2)(3)と、それぞれに<canvas>を配置します。そこに透過... 続きを読む

ウェブでも紙でも電子書籍でもOK、全500種ベクターで作られたフリーのアイコン素材 -Freepik | コリス

2013/04/04 360 users Illustrator PNG フォーマット freepik

個人でも商用でも利用できる全500種類のアイテムが揃った、汎用性に優れたシンプルなデザインのアイコン素材を紹介します。 500 Vector Mega Icon Pack ダウンロードできるアイコン素材のフォーマットは、2種類です。 .ai 素材の修正・紙にも使えるIllustratorのベクター素材 .png すぐに使いたい人用の128x128の透過PNG アイコンは全部で500種類！ さまざま... 続きを読む

黒板にチョークで書いたようなかすれ具合がいい味を出してるフリーのアイコン素材 -Chalk Web Icons | コリス

2013/03/17 165 users コリス Twitter Facebook psd 黒板

ウェブだけでなく、紙でも利用可能なハンドメイドのフリーのアイコン素材を紹介します。 黒板デザインの名刺でも作りたいですね。 Free Chalk Web Icons アイコンのデザインは全部で40種類で、Facebook, Twitter, Google+をはじめさまざまなソーシャルサービスが揃っています。 アイコン全40種類 ダウンロードできる素材のフォーマットはPSDと透過PNGで、サイズは6... 続きを読む

Fireworksで作ったスマホサイトやアプリのモックをiPhoneでキレイに見る4つのTips | Webデザインのタネ

2011/10/26 40 users iPhone Fireworks モック JPEG タネ

スマホ案件が増えてきましたね〜。最近はCSS3が使えるのはもちろん、透過PNGを惜しげなく使えることを魅力に感じてモックを作ったり、マークアップをしています。 今日はそのスマホの実機確認するときにFireworksで作ったスマホサイトのモックが見られなかった！なんてことがあったので、PDFの実機確認の方法を紹介します。 1. PDFで書きだすときはJPEG2000ではなく、JPEGのほうが便利 F... 続きを読む

[CSS]あなたのウェブページにキーフレームを使ったアニメーションをちょこっと適用するチュートリアルのまとめ | コリス

2011/09/19 81 users ローディング 意訳 ヘッダ コリス ウェブページ

キーフレームを使ったCSS3アニメーションの入門として、ウェブページにちょっとしたアニメーションを適用するチュートリアルを紹介します。 下記は各ポイントの意訳です。 CSS3アニメーションとは アニメーションでドロップダウンするヘッダ 透過PNGを使ったカラーアニメーション 回転するローディングのアニメーション フォームのエラーをアニメーションで強調 フォームのエラーをアニメーションで強調:その2... 続きを読む

画像は一枚だけで、さまざまなカラーの背景にするチュートリアル | コリス

2011/08/16 64 users Photoshop コリス 透過PNG画像 テクニック 背景

使用する画像は一枚の透過PNG画像だけで、背景にさまざまなカラースキンをスタイルシートの変更で簡単に適用するチュートリアルを紹介します。 透過PNGを作るPhotoshopのテクニックは、他のパターンにも応用できます。 [...] 続きを読む

PNGとGIFとJPEG…Web用画像の書き出し、どんな風に使い分けていますか？［2011年7月現在］

2011/07/25 618 users PNG gif ガラケー 手法 ころ

この記事は 約 3 分 で読めます。みなさん、Web用の画像の書き出しって最近どう使い分けしていますか？？ 私がWebデザインをはじめたころはIE6が全盛期だったこともあり、 あまり透過PNGを使うという選択肢がなかったのですが、 jsなどでコーディング時に対応できる手法が出てきた頃から透過PNGを多用するようになりました。 また、昔は一部のガラケーでGIFに対応していなかったり、 PNGに対応し... 続きを読む

透過PNGで枠だけ作って背景をCSS3アニメーションするという新テクニック:phpspot開発日誌

2011/06/13 95 users CSS-Tricks phpspot開発日誌 背景 バック

Color Animate Any Shape with a Knockout PNG | CSS-Tricks 透過PNGで枠だけ作って背景をCSS3アニメーションするという新テクニックが掲載されています。 CSS3の登場でハックの幅は広がりましたが、今後こういうテクニックが色々現れてくると思うと楽しみです。 まずはマリリンをかたどった縁の画像を透過PNGで作ります このデモは必見 あとは背景を... 続きを読む

商用OK、リンク/クレジット表記不要・透過PNGの消しゴムハンコ画像を無料配布する素材サイト「ハンコでアソブ」 - かちびと.net

2011/04/05 95 users アソブ ハンコ アルファベット ゴムハンコ 商用

ご連絡頂いて、拝見させてもらったら凄く ツボだったのでご紹介。消しゴムハンコ を押したような可愛らしい画像を透過PNG で配布してくれている「ハンコでアソブ」。 商用でも利用できてリンクも不要ですよ。 なかなか珍しいタイプの素材ですね。 リンク・クレジット表記不要、商用OKの素材サイトは物凄く貴重ですよね。有りがたく使わせて頂きます。ハンコでアソブはんこ！アルファベットや雑貨、お天気や服などいろい... 続きを読む

IEの透過PNG+opacityの不具合を治すメモ | Mach3.laBlog

2011/02/17 153 users Mach3.laBlog メモ opacity height

透過PNGの処理が下手くそなのは、IE6だけではなく、IE7/8も同様です。 IEで透過PNGをあてた要素のopacityを弄ると、周りがグレーがかって汚くなります。 この現象はよく知られていると思いますが、今日はこの不具合の治し方のメモを記しておきます。サンプルコード例えば、こんなコード。.test {display:block;width:128px;height:128px;backgrou... 続きを読む

Macのショートカットキー一覧の壁紙がとっても素敵 | Macの手書き説明書

2010/06/17 237 users 壁紙 Mac 手書き説明書 ショートカットキー一覧 VIP

2chまとめブログで有名なスチーム速報さんがショートカットキー一覧が載った画像を作ってくださっています。 Macのショートカットキー一覧の壁紙を作ってみた - スチーム速報　ＶＩＰ 透過PNGなので既存の壁紙に重ねて表示させることが可能。 フリーソフトではLiveQuartzなどでうまく重ねられると思います。 最近Macに移行した人や、ショートカットキーをどうしても覚えておけない人までお勧めです。 続きを読む

透過PNGや角丸などをIE6や7でも実装出来るJavaScriptのメモ - かちびと.net

2010/05/25 421 users ドロップシャドウ net メモ 角丸 IE6

IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 I... 続きを読む

IE6のバグ対策法をまとめた『Ultimate IE6 Cheatsheet』が便利ですね… - IDEA*IDEA ～ 百式管理人のライフハックブログ

2010/05/20 277 users IDEA doctype IE6 ライフハックブログ CSS

資料として素晴らしいのでメモ的にエントリー。 もうなかったことにしたいIE6ですが、現場ではなかなかそうはいかないですよね。そこでUltimate IE6 Cheatsheetなるものが出来ていましたよ。 doctypeはどうしたらいいのか、IE6だけ読めるCSSを書くには、とか、透過PNGをどうするか、などがよくまとまっていますよ。IE6対応をしなくてはいけない人にとっては素晴らしく便利なのでは... 続きを読む

[JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix | コリス

2008/07/09 337 users fix コリス スクリプト 透過PNG画像 外部スクリプト

Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。 Unit PNG Fix 透過PNGの表示は普通の画像や背景画像に対応しており、HTMLファイルに外部スクリプトとして指定するだけ適応されます。 スクリプトの設置には1×1の透明GIF画像が必要で、ファイル名・パスはスクリプトの1行目を変更することで自由に設定... 続きを読む

[CSS]IE6でよく遭遇する6つのバグとその解決方法 | コリス

2008/04/25 677 users コリス min-width マージン CSS パク

CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ d... 続きを読む

IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナル

2008/01/08 552 users エンタープライズ CSS マイコミジャーナル MSIE IE6

Dean Edwards氏は7日(米国時間)、IEの動作をW3C標準仕様へ準拠させるためのライブラリIE7.jsの最新版を公開した。IE7.jsはJavaScriptで開発されたMS Internet ExplorerのHTML/CSS表示を調整するライブラリ。IE7.jsを使うことでMSIEのHTML/CSSまわりの表示処理をよりW3C標準規約に準拠したものにする。IE5やIE6で透過PNGを表... 続きを読む

Breadcrumb CSS - Appleに習うパンくずデザインCSS - youmos

2007/06/27 379 users youmos opacity Apple ペー 半透明

Apple.comのようにパンくずも少し手を加えるだけで、使いやすいものになります、Appleのパンくずの区切りには半透明の透過PNGが使われている為、InternetExplorerへの対応はAlphaImageLoaderをCSSで指定しています。 半透明のアルファチャンネルを持つPNGイメージを使う方法と、CSSでopacityを指定する方法のどちらでも同じようにデザインできます。IEはペー... 続きを読む

CSSを使い、１枚の画像だけでカラフルなグラデーション背景を作る例:phpspot開発日誌

2006/11/19 200 users CSS phpspot開発日誌 グラデーション背景 Fire

A List Apart: Articles: Super-Easy Blendy Backgrounds CSSを使い、１枚の画像だけでカラフルなグラデーション背景を作る例。 次のような透過PNGがあったとして、更にこの下に色を付けると・・・。 大体どうなるか分かると思いますが次のようなグラデーション背景が出来ます。 そんなCSSのテクニックが紹介されてます。 example one (Fire... 続きを読む