UI用にデザインされた、かなり珍しいアイソメトリックのアイコン素材！ 商用利用無料、SVGやFigmaも揃ってる -Isocons

2024/10/22 14 users figma アイソメトリック PNG フォーマット 改変

当ブログでもこれまでにSVGのアイコン素材はたくさん紹介してきましたが、アイソメトリックのアイコン素材は初めてです。 アイソメトリックのイラストは見かけますが、アイコンはほんと珍しいですね！ 商用利用、改変、再配布も可で、アイコンのフォーマットはSVGとPNGが揃っています。また、カスタマイズも可能で、アイ... 続きを読む

SVG アイコンの表示に mask-image CSS プロパティを使用する

2024/06/15 13 users プロパティ CSS マスキング アイコン 外部

SVG アイコンの表示に mask-image CSS プロパティを使用する 2024.06.15 mask-image プロパティは CSS でマスキングを行うためのプロパティであり、SVG アイコンを表示する際に有用です。mask-image プロパティを使用することで、外部の SVG ファイルを読み込みつつ、アイコンの色を CSS で指定することが可能になります... 続きを読む

SVGとPNG完備のおしゃれなイラスト素材！ あらゆるメディアで完全無料で利用できる太っ腹ライセンス -Transhumans

2023/09/12 321 users ベクター 太っ腹ライセンス プレゼン 商用 ポスター

商用でも完全に無料で利用できる、SVGとPNG完備のおしゃれなイラスト素材を紹介します。Webやアプリ、プレゼン、提案書、ポスター、同人誌など、あらゆるメディアで無料で利用できます。 イラストはすべて手描きのベクターで、80年代のSF映画や日本のイラストにインスパイアされて描かれています。 Transhumans さっそく... 続きを読む

ChatGPTでSVGのイラストを描いてみよう - Taste of Tech Topics

2023/07/28 24 users Midjourney chatgpt フォーマット 海水浴

最近三年ぶりに海水浴にって来ました、やっぱり夏は海ですね。菅野です。 ChatGPTは、言語生成AIであり、Stable Diffusion、Midjourneyといった画像生成AIとは異なり画像を生成することは通常できません。 しかしながら、テキストベースのフォーマットであれば、プログラムといった文章とは異なるものも出力することがで... 続きを読む

商用利用無料！ 医療・健康向けのUI用に美しくデザインされたSVGとFigmaのアイコン素材 -svg.health

2023/05/24 17 users figma メディカル ヘルスケア Figma用 UI用

医療や健康、メディカル、ヘルスケアのアイテムが美しくデザインされたアイコン素材を紹介します。 珍しいアイコンがかなり多く揃っており、医療や健康関連のデザインをする時には重宝すると思います。SVGだけでなく、Figma用も...記事の続きを読む 続きを読む

ChatGPTにSVGでお絵描きさせる｜temoki / Tomoki Kobayashi｜note

2023/05/07 137 users chatgpt テキストフォーマット GPT Note ひよこ

ChatGPTはテキストを生成するGenerative AIであるが、SVGのようなテキストフォーマットの画像であれば描くことができるのではないか？と思い、試してみることにした。モデルにはGPT-4を使用し、GPTにひよこ🐤を描かせることをゴールとして始める。 svgのフォーマットを知っていますか？はいかいいえで答えてください。 ... 続きを読む

CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう - ICS MEDIA

2023/03/30 42 users animationプロパティ プロパティ CSS おさらい

offsetプロパティは、パス上に要素を配置・移動させるCSSのプロパティです。animationプロパティやtransitionプロパティと組み合わせることで、手軽に一見複雑そうなアニメーションが作れます。 SVGやJavaScriptは詳しくないけど、複雑そうな動きのアニメーションを作ってみたい方、animationプロパティなどのおさらいを... 続きを読む

制作事例：Lottieのアニメーションを手描き風に動かしたい！SVGとWebGLを使った2つのアプローチ - ICS MEDIA

2023/01/19 13 users WebGL Lottie ICS メインビジュアル アプローチ

制作事例：Lottieのアニメーションを手描き風に動かしたい！ SVGとWebGLを使った2つのアプローチ ICSでは2022年に株式会社ニコン様の中長期ビジョンを紹介する特設サイト『2030年のありたい姿』の実装を行いました。この記事ではサイトのメインビジュアルとして使用している手描き感のあるアニメーションを実現するため... 続きを読む

最近のWeb制作に役立つ、CSSの便利ツール総まとめ

2023/01/19 165 users CSS Flexbox フォントサイズ Web制作 可変

最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニ... 続きを読む

ブックマークしておくと便利！ 背景、テクスチャ、パターン、シェイプ、グラデーションなどを生成するSVGツールのまとめ

2022/08/10 412 users テクスチャ シェイプ グラデーション アイソメトリック 背景

WebサイトやスマホアプリのUIデザイン、イラストなどにもぴったりな背景、テクスチャ、パターン、シェイプ、グラデーション、装飾グラフィック、カラーパレットなどのSVGを生成するオンラインツールを紹介します。 ネオンカラーや美しいグラデーションをはじめ、アイソメトリックやスパイラルなどの幾何学形状、波線や等... 続きを読む

商用利用無料、UIデザイン用のSVGアイコンが1000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Icon

2022/07/27 473 users SVGアイコン 太っ腹ライセンス 改変 再配布 UIデザイン用

WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 アイコンは小さいサイズでもくっきり見えるようにデザインされており、SVGだけでなく、Webフォントも揃っています。 MingCute Icon MingCute Icon -GitHub MingCute Iconの... 続きを読む

Webやスマホアプリに最適なSVGアニメーションのスピナー！ 超軽量サイズで、くるくる快適に動くぞ -SVG Spinners

2022/07/14 17 users スピナー SVGアニメーション コピペ アニメーション web

商用プロジェクトでも完全に無料、コピペで簡単に利用できるSVGアニメーションのスピナーを紹介します。よく見かけるものから変わったものまで、さまざまなスピナーが揃っており、スピナーの素材として重宝すると思います。 SVGのスピナーのほとんどは、300-2500バイトの超軽量サイズ。アニメーションも快適で、くるくる... 続きを読む

便利なツールが登場！ 画像をWebPとAVIFに変換・最適化、SVG, PNG, JPG, GIF画像の軽量化・最適化ができるオンラインツール -Optimize Images

2022/05/16 204 users WebP AVIF jpg PNG gif

次世代の画像フォーマットとして注目されているWebPとAVIF、Webサイトやアプリでよく使用されるSVG, PNG, JPG, GIFの変換・軽量化・最適化ができるオンラインツールを紹介します。 IEのサポートがなくなると、WebPが画像フォーマットの主流になりそうですね。 Optimize Images Optimize Imagesは、画像（SVG, PNG, JPG, ... 続きを読む

全部、完全に商用利用無料！ UIデザインに適した400種類以上のSVG・Figma用も揃ったシンプルでかわいいアイコン素材 -Doodle Icons

2022/03/14 277 users UIデザイン かわいいアイコン素材 全部 fig 商用利用無料

アイコン用のグリッドを使用して手描きされた、ちょっとラフなかわいい感じにデザインされたアイコン素材を紹介します。 15のカテゴリに、400種類以上のアイコンがセットになっており、個人でも商用プロジェクトでも完全に無料で使用できます。フォーマットは.png, .svg, .figが揃っているのも便利ですね。 Doodle Icons... 続きを読む

2022年のファビコン設置方法、さまざまなブラウザやデバイスに対応させる最小限のセットは6種類のファイルが必要

2022/03/10 370 users デバイス 最小限 ブラウザ ファイル セット

最近のブラウザやデバイスに対応させる最小限のファビコンセットには、6種類のファイルで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて6種類だけです。 ファビコンに必要な6種類のファイル、ファビコンの設定方法、ファビコン画像を用意する手順について紹介します。 How to Favi... 続きを読む

Web制作者は要チェック！ SVGとCSSを使用したUIコンポーネントの実装テクニック

2022/02/03 47 users レスポンシブ UIコンポーネント CSS 実装 軽量

SVGを使用してUIコンポーネントを構築すると、実装がより簡単により分かりやすくなります。SVGとCSSを使用したUIコンポーネントの実装テクニックを紹介します。 SVGなのでカラーやサイズも簡単に変更でき、軽量で、レスポンシブにも完全対応です。 Building UI Components With SVG and CSS by Ahmad Shadeed 下記は各ポ... 続きを読む

Deno のこれまでとこれから JSConf JP 2021

2021/11/27 92 users deno middle assets align center

class: middle, center <img src="./assets/logo.svg" align="center" width="200" /> Deno の これまで と これから --- アジェンダ - Deno とは - Deno のこれまでのロードマップ - Deno のこれからのロードマップ --- # 話す人 <img src="./assets/hinosawa.jpg" align="right" width="300" /> 日野澤歓也 twitter @k... 続きを読む

こいつ、動くぞ！ 商用利用無料、シンプルにデザインされたSVGもフォントも揃った高品質なアイコン -Boxicons

2021/11/10 346 users アニメーシ フォント こいつ アイコン SVGアイコン

1,500種類以上のアイコンが揃った、Webサイトやスマホアプリにぴったりなシンプルにデザインされた無料アイコンを紹介します。 オープンソースで個人でも商用でも無料で利用できます。また、SVGアイコンとアイコンフォントで利用できるので、サイズやカラーの変更はCSSでできます。アイコンはリスト、固定幅、アニメーシ... 続きを読む

もうこれでUI用のアイコンには困らない！商用でも完全無料で利用できる、SVG完備のアイコン素材 -iconsax

2021/10/27 308 users figma SVG完備 SVGアイコン フォーマット 商用

WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるiconsaxを紹介します。 ホーム・サーチ・アロー・カート・メールなど、Webページやスマホアプリでよく使用されるアイコンが揃っています。スタイルは6種類、フォーマットはSVGをはじめ、Adobe XD、Figma... 続きを読む

最近見かける、粒子の粗いグラデーション！ほんの少しのCSSとSVGで実装できるの知ってた？ | コリス

2021/09/22 307 users コリス ホログラム シャドウ ノイズ グラデーション

CSSとSVGでグラデーションにノイズを与え、粒子の粗いグラデーションを実装する方法を紹介します。 背景など通常のグラデーションに使用するだけでなく、暗くしてシャドウに使用したり、輝度とコントラストを上げてホログラムのような虹色のグラデーションとして使用することもできます。 Grainy Gradients by Jimmy Chi... 続きを読む

Emacs用のSVG実装のカラーピッカー | Misohena Blog

2021/09/07 13 users カラーピッカー emacs github.com 作図ツール

先日からEmacsの中で動く作図ツールを作っています。 https://github.com/misohena/el-easydraw その一環として今日はカラーピッカーを作りました。この手のソフトには必ずあるアレです。 Emacs上での先行事例はいくつかあるようでしたがSVGでの実装は見当たりませんでしたし、まぁ、自分で作りたいじゃないですか。こう... 続きを読む

これから実装する人にオススメ！レイティングに使用するスター（星形）を実装するSVGのテクニック | コリス

2021/08/31 15 users レイティング コリス 一口 実装テクニック テクニック

Webページやスマホアプリで見かけるレイティングに使用するスター（星形）を実装するSVGのテクニックを紹介します。 一口にスターといってもさまざまな状態があり、オン・オフ、半分、アウトライン、サイズ変更など、さまざまな実装テクニックが解説されています。 Star Rating: An SVG Solution by Ahmad Shadeed 下記... 続きを読む

実装の仕組みが分かれば簡単！画像の一部を切り取るカットアウトを実装するCSSとSVGのテクニック | コリス

2021/08/17 17 users コリス ヘッダ バッジ CSS ヒーロー

Webページやアプリで見かける、通知や注目の役割を担うカットアウト（画像の一部を切り取る）を実装するCSSとSVGのテクニックを紹介します。 画像に小さなバッジをつけたり、画像をグループ化する際に重ねたり、ヘッダやヒーローで画像を重ねたり、さまざまなUIで見かけます。 Thinking About The Cut-Out Effect: CSS o... 続きを読む

全デバイス・全ブラウザで PDF を読みたい - Kaizen Platform 開発者ブログ

2021/07/19 18 users Kaizen Platform PDF 全デバイス バンド

TL;DR PDF を画面に埋め込む方法は、iframe, object, embed, Viewer（3rd party library の利用）がある。 ブラウザネイティブの PDF 表示機能はブラウザ差異が大きいため、PDF を canvas や svg に変換して表示するライブラリやビューアーを利用した方が安定する。 しかし 3rd party library / service の利用はバンド... 続きを読む

変幻自在なグラフィック表現！CSS, SVG, Canvasでマスクを使いこなせ - ICS MEDIA

2021/07/02 15 users インタラクション canvas CSS アニメーション マスク

近年、ウェブ技術の発展により、画像の一部だけを表示する「マスク表現」がよく見られるようになりました。一言でマスクと言っても、アニメーションやインタラクションとの組み合わせによりさまざまな表現が可能です。 また、どの技術を用いるかという選択も重要になります。マスク表現はCSS, SVG, Canvas APIといった技... 続きを読む