企業サイトやプロダクトページをはじめ、オンラインショップ、ポートフォリオ、ブログなど、WebサイトやアプリのUIデザインに適したSVGアイコンが無料で利用できるTabler Iconsを紹介します。 アイコンの種類はなんと1,900種類超え! 豊富なアイテムに加え、カラーやサイズやストロークなどのカスタマイズも簡単で、自分のデザインに合ったSVGアイコンを利用できます。さらに、PNGやWebフォントも揃っています。
ウェブサイトや資料などで簡単なイメージイラストを使いたい時に、30種類のイラストを自分で配色を決定してダウンロードできるサービスが「IRA Design」です。イラストは無料でダウンロード可能で、商用利用も可能となっています。 IRA Design - Build your own amazing illustrations @ Creative Tim https://iradesign.io/ IRA Designにアクセスするとこんな感じ。用意されているイラストを見るには、上部メニューの「GALLERY」をクリックします。 イラストは30種類。背景・人物・物がまとめられたフラットデザインのイラストです。 画面右側にある「<」をクリックすると…… カラーパレットが出てきました。ズボン・Tシャツ・髪・物の4種類を、それぞれ紫・青・緑・オレンジ・赤の5色に変更できます。全部紫に設定すると、
筆ブラシの質感をそのまま再現できるSVGフォントCalifornia Sunriseが、発売を記念して1週間限定の無料ダウンロードキャンペーンを行っています。 デザイン販売サイトCreative Marketの人気フォントデザイナーNicky Laatzによる新作英語フォントで、公式サイトでのみ無料配布されています。 無料ダウンロードできる美しい筆記体やブラシフォントは、以下の記事でも紹介しているので参考にどうぞ。 入力するだけで美しい!筆記体フリーフォント86選 改訂版 商用OKな手描きブラシ無料フォント83個まとめ【5年熟成の秘密レシピ】 【商用可&無料】2020年上半期ベスト英語・日本語フリーフォント厳選90個まとめ 手書きした筆ブラシのリアルな質感を再現!SVG英語フォントCalifornia Sunrise California Sunriseは、通常のOTF形式のフォントに加え
ダークモードに対応している時に、SVGファビコンのカラーをCSSで変更するテクニックを紹介します。 当ブログはダークモードに対応していませんが、ダークモードの周りもいろいろ充実してきましたね。 画像: ツイートより 元ネタは、下記ツイートからです。 💡 Change the color of your favicon when dark mode is enabled.#codyhousenugget pic.twitter.com/Hie9Pgt9MQ — CodyHouse (@CodyWebHouse) July 7, 2020 ファビコンをSVG画像にする利点は、スクリーンの解像度を気にすることなく、1つのファイルでファビコンを提供できることです。対応ブラウザはIEを除く、すべての主要なブラウザでサポートされています。
Norde Sourceは任意のSVGアイコンを一括で管理、スタイルの変更、エクスポートできるSVGマネージャ兼エディタです 各OSに対応したデスクトップアプリで現在は無料で利用する事が出来ます 試しに使ってみました 動作テスト シンプルなUIです。デフォルトではFeatherやFontAwesome、IoniconsなどオープンソースのSVGアイコンセットを配布するプロジェクトが項目に入れられており、その場でアイコンセットを作る事が可能となっています。ついでにOpen Peepsも入れられtました ↑ 勿論、+ADDから任意のアイコンを複数選択して、管理、一括でスタイルを変更する事も可能です。任意のセット名にしたり検索も出来るように。 ↑ エクスポートはSVG、PNG、JPGなどのお馴染みの拡張子からWebPやVeu.js向けなども用意されています ↑ Open Peepsなどのように複
2022年4月27日 CSS, SVG CSSでフォーム内の部品を装飾するのは、昔から難儀でした。特によく使うチェックボックスは色をつけることすら難しく、様々なCSSの小技やJavaScriptプラグインを使って実装してきました。今回はチェックマークにSVGを使い、なるべくシンプルな書き方でチェックボックスを装飾してみようと思います。 ↑私が10年以上利用している会計ソフト! チェックボックスを装飾する手順 1. HTMLマークアップ まずはHTMLを書いていきます。label タグでチェックボックスを囲うと、for 属性や id 属性の指定をしなくても label タグ内のテキストがクリック範囲となるので便利です。テキストは span タグで囲みました。この span 部分にCSSでチェックボックスを表示させる指定をしていきます。 HTML <form> <label> <input t
当ブログでもたくさんの無料アイコンを紹介してきましたが、自分にぴったりのアイコンを探すのはかなり大変だと思います。85,000個以上の高品質なアイコン素材を自由にカスタマイズしてダウンロードできる新しいIcons8を紹介します。 下記のようにカラー変更は当たり前、要素を加えたり、文字入れしたり、さまざまなカスタマイズに対応しています。SVGも完備されているので、重宝しますね。 Icons8 beta Icons8の使い方 無料で利用できるアイコンはなんと、85,000個以上 Icons8の使い方 Icons8の使い方は、簡単です。 さまざまな機能が用意されていますが、直観的にすべてを利用できると思います。 アイコンの選択から、カスタマイズ、ダウンロードまでざっと説明します。
\ ˌi-lə-ˈstrā-shənOpen-source illustrations for any idea you can imagine and create.A constantly updated design project with beautiful SVG images that you can use completely free and without attribution. synopsisCreate better designed websites, products and applications. Browse to find the images that fit your messaging, automagically customise the color to match your brand and use it as a normal
Flat Color 使い方は、簡単です。 Step 1: 外部ファイル 外部ファイルにjquery.jsを使用している場合は、下記の外部スクリプトを加えます。 <script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/jquery-webicon.min.js"></script> AngularJSバージョンも用意されています。 <script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/angular-webicon.min.js"></script> Step 2: HTML あとは、使用するアイコンのコードを書くだけです。 アイコンをクリックするとコードが表示されるので、そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く