Trianglify.io is a tool for generating low poly triangle patterns that can be used as wallpapers and website assets.
Trianglify.io · Low Poly Pattern Generator
Trianglify.io is a tool for generating low poly triangle patterns that can be used as wallpapers and website assets.
SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き
画像ファイルなしCSSだけでSVGを表示 – webdev
スタイルシートだけでSVG画像を表示する方法です。 画像ファイルを読み込んで表示するのではなく、SVGのコードをBase64でエンコードしてソースに直接埋め込みます。 古いブラウザでは表示できませんので、ご注意を。 × InternetExplorer 8 以下 × Android 2.3 以下 メリットは、ページ読み込み時のリクエストを減らせること デメリットは、一見なんの画像を貼り込んでいるのかわからないので、うまく管理しないとカオス化すること…です。 実際のコードはこのようになります。 当ブログの開発環境アイコンに使っているパソコンが表示されています。 <div class="sample"> </div> .sample:after { content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZ
[Photoshop]画像アセット機能からSVGを書き出す時に忘れがちなこと | ヨネコウェブ
この記事は 2016年2月26日 に投稿されました。 内容が古いかもしれません。ご注意ください。 ※最後に更新されたのは 2019年1月24日 です。 SVGは簡単に書き出せるけれど PhotoshopCCの画像アセット機能を使って、レイヤー名の末尾を「.svg」としておけばSVG形式のファイルとして書き出しができるわけですが見落としがあったので備忘録。 ベクトルスマートオブジェクトじゃなくてシェイプレイヤーで書き出す Illustratorからコピペしたパスのデータを、いつもはベクトルスマートオブジェクトとして貼付けして使っているのですがこのままではSVG書出しした時にパスになりません。 貼り付けのオプションで「シェイプレイヤー」にしておかないと、図形のSVGとして書きだされません。ベクトルスマートオブジェクトをSVGとして書き出すとアートボードは寸法があるがパスがないというファイルが書
![[Photoshop]画像アセット機能からSVGを書き出す時に忘れがちなこと | ヨネコウェブ](https://cdn-ak-scissors.b.st-hatena.com/image/square/cc0bc120cd8eb3e7a12866d6e7e414a0339456b6/height=288;version=1;width=512/https%3A%2F%2Fyonecoweb.com%2Fcms-v202306%2Fwp-content%2Fthemes%2Fwp_ync_006%2Fassets%2Fimages%2Fblog%2Fogp_blog.jpg)
フロントエンドの実装から見る第四十七回衆議院選挙 開票速報ページまとめ - 暮らしの技術
700億円ほどのお金がかかっているといわれ，why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした．投票日と言うことはその後に来るのは開票で，開票と言うことは開票速報がはじまるわけです． 報道各社を見てみますと，各々工夫を凝らした開票速報ページを用意しておりまして，これがなかなかおもしろいということで，その比較でございます． まとめ 長いので先にまとめです． まずテレビと新聞で圧倒的に態度が違います．テレビはあくまで番組の補助だったり宣伝が目的．ウェブページではあまり情報を出したくない様子です．一方新聞各社は トップページ上段，ファーストビューのど真ん中を思いっきり使い，文字通り全面展開といったパターンが多い． フロントエンドの実装から見ると，基本的にグラフが必要な場面ではCSS，日本地図が必要な場面では「画像+mapで部分リンク」か「要素の絶
WEBデザイナーのはじめての「SVG」 | 株式会社WEB企画
皆さん、師走をいかがお過ごしですか？ 今回は前々から試してみたかったSVGについての記事です。 基本予備知識0から色々触ってみて、SVGはどんなことができるのかとSVGの面白いなーと思った点等をまとめてみました！「これからSVG試してみようかな？」と思ってる方(特にWEBデザイナーさん)の参考になれば幸いです。 それではどうぞー！！ SVGとは その前にSVGについて簡単な説明しておきます。 SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、JPEGやPNGのような画像(ビットマップデータ)ではなくイラストレーターで扱うベクターデータです。 その始まりは1998年と意外に古いのですが、ブラウザ対応が追いついておらず、長い間陽の目を見ることがなかったかわいそうなやつです。 SVGのいいとこ SVGがJPEG等の画像と比べていいなーと思
SVGOMG - SVGO's Missing GUI
Global settings Show original Compare gzipped Prettify markup Multipass Number precision Transform precision Features Remove doctype Remove XML instructions Remove comments Remove <metadata> Remove xmlns Remove editor data Clean up attribute whitespace Merge styles Inline styles Minify styles Style to attributes Clean up IDs Remove raster images Remove unused defs Round/rewrite numbers Round/rewri
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Curve SVG Background Animation
CSS-only image slider using SVG patterns