これでもうロゴのSVGを探さないで済む！ SNSやブラウザ、ライブラリ、ソフトウェアなどのロゴをSVGで簡単に利用できる -svglソーシャルメディアをはじめ、各種ブラウザ、フレームワーク、ライブラリ、言語、ソフトウェア、AI関連などのロゴをSVGで簡単に利用できるsvglを紹介します。 SVGはコードをコピペで利用したり、SVGファイルをダウンロードすることもでき、簡単に利用できます。2024年6月現在、419種類のロゴが揃っており、ブックマークしておくと便利です。 ロゴのデザイン集としてもいいですね。
【解決】svgの色が変わらない！CSSorSCSSで変更したいのに！ | 武骨日記
毎日朝7時更新/プログラミング芸人/WEBデザイン/フォトグラファー/インド/JavaScript芸人/Reactエンジニア
HTML/CSS イラレで作ったSVGを外部ファイルで読み込み。色変更・レスポンシブ対応可能にするまでの手順
こんにちは！ 現在作成している自主制作サイトで イラレで自作したロゴのSVGファイルを外部ファイル形式で読み込み、 色やサイズを変える手順についてまとめたいと思います。 実現にあたりGoogle検索で色々な方の記事を参考にさせて頂きました。 参考記事を書いて下さった皆様、勝手にですがお礼を申し上げます。 ありがとうございました<(_ _)> また、この方法では実装後の表示確認をローカル環境でしようとすると （ローカル環境での確認：サーバーを通さず、自分のPCでブラウザで確認する事とさせてください） ブラウザのセキュリティポリシーに引っかかり SVGの画像が表示されずに困惑する方がいらっしゃるかも？？と思ったので、 簡単にですがGoogleChromeでのローカルでの確認手順も書いておこうと思います。 自作サイトでのSVG使用箇所 自作サイトBakeryColne(ベーカリーコルネ)ではお店
ファビコンを環境ごとに変えると分かりやすい（Next.js, Vue3, SvelteKit, Astro） - Qiita
ファビコンを環境ごとに変えると分かりやすい（Next.js, Vue3, SvelteKit, Astro）faviconVue.jsastroNext.jsSvelteKit 「開発環境」「プロダクション環境」などごとにファビコンを変えておくと、パッと見てわかりやすい 絵文字をファビコンに設定できる Next.js, Vue3, SvelteKit, Astro での実例を紹介した そもそもFavicon（ファビコン）って？ ウェブページのアイコンです。ブラウザでページを開いたときに、タブなどに表示されていたりします: Favicon - Wikipedia File:Wikipedia favicon in Firefox on KDE (2023).png - Wikipedia ファビコンの設定方法 pngなどの画像や、SVGファイルを用意して、それをHTMLのhead内で指定しま
今すぐ使える最新CSSテクニックや書き方20選 サンプルコード付レシピ
今すぐ使える最新CSSテクニックや書き方20選 サンプルコード付レシピ ひと手間でガラリと変わる、これからの新しいCSS HTML/CSSの入門書などには載っていない、登場したばかりの最新CSSテクニックをまとめてご紹介します。 サンプルのソースコード付きなので、理解しやすく、実装したいときにも役立ちます。 ページの演出に使える、デザインの仕上げにもオススメしたいワザが揃いました。 「こんなことがCSSでできるの?!」と思ってしまう、オドロキのテクニックを学んでみましょう。 コンテンツ目次 1. キラキラに輝くホログラフをCSSで実装 2. クールなグラデーション背景のつくり方 3. oklch()による色の設定 4. 夢のような景色「Dreamy Blur」エフェクト 5. オフキャンバスのメニューをポップアップで実装 6. スクロール連動型のCSSアニメーション 7. 3Dなグリッチ・
Webやスマホアプリに最適なSVGアニメーションのスピナー！ 超軽量サイズで、くるくる快適に動くぞ -SVG Spinners
商用プロジェクトでも完全に無料、コピペで簡単に利用できるSVGアニメーションのスピナーを紹介します。よく見かけるものから変わったものまで、さまざまなスピナーが揃っており、スピナーの素材として重宝すると思います。 SVGのスピナーのほとんどは、300-2500バイトの超軽量サイズ。アニメーションも快適で、くるくる気持ちよく動きます。 SVG Spinners -GitHub SVG Spinnersは、SVGで実装された超軽量のスピナーです。24x24dpで設計されていますが、SVGなのでサイズやカラーを簡単に変更できます。MITライセンスで、商用プロジェクトでも無料で利用できます。 スピナーは44種類あり、その中からいくつかコピペしてみました。 まずはよく見かけるドットが回転するスピナー。 <svg width="24" height="24" viewBox="0 0 24 24" xm
>SVG、線を描くアニメーション。
〽️use要素の使い方。 〽️画像を準備。 〽️アニメーション実装 〽️マイナスの「遅れ」。 〽️いろんな要素でやってみよう。
動く流体シェイプをコピペで作成 Blob Animation + SVGおすすめツール
液体が波打つような、ゆるやかなスライムのような曲線をもつBlob流体シェイプ。ウェブサイトに取り入れることで、直線的で無機質な印象から、ナチュラルで優しい印象を与えることができます。 スムーズでなめらかな動きを加えたBlog流体シェイプを手軽に作成できるオンラインツール「Blob Animation」が公開されています。 Blob Animationで作成したアニメーションは、コピペ可能なCSSコードでダウンロード、利用可能です。 Blob Animation https://blobanimation.com/ アクセスすると以下のような画面が表示されます。 左側にBlogアニメーション、右側にアニメーションをより細かく設定できる調整ツールとして、「Animation Speed（アニメーション速度）」、「Gradient（グラデーション）」、「Blob Layers（Blobレイヤー数
2024年版、ファビコン画像の作成方法と設置方法、さまざまなデバイスに対応させるには6種類のファイルが必要
最近のデバイスやブラウザに対応させる最小限のファビコンセットには、6種類のファイルで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて6種類だけです。 ファビコンに必要な6種類のファイル、ファビコンの設定方法、ファビコン画像を作成する方法について紹介します。 How to Favicon in 2024: Six files that fit most needs by Andrey Sitnik Sitnik氏は、PostCSS, Autoprefixer, NanoIDの制作者です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2024/2/28: 元記事がアップデートされたので、当記事もアップデートしました。 はじめに ファビコンの設定方法 -ショートバージョン ファビコンの設定方法
Web制作者は要チェック！ SVGとCSSを使用したUIコンポーネントの実装テクニック
SVGを使用してUIコンポーネントを構築すると、実装がより簡単により分かりやすくなります。SVGとCSSを使用したUIコンポーネントの実装テクニックを紹介します。 SVGなのでカラーやサイズも簡単に変更でき、軽量で、レスポンシブにも完全対応です。 Building UI Components With SVG and CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. SVGで切り抜きを実装 2. SVGでセクションの見出しを実装 3. SVGでリンクの下線を実装 4. SVGでテープを実装 終わりに はじめに SVGはアイコンやイラストだけでなく、わたし達デベロッパーが忘れがちなパワーをたくさん持っています。CSSと比較して、SVGを使用することが理にかなっているユースケー
マイクロインタラクションからクリエイティブ表現まで！Tween24.jsを使った演出表現 - ICS MEDIA
ウェブサイトのリッチな表現に欠かせないアニメーション。実装にはCSSを使ったものからJavaScriptを使ったもの、WebGLを使ったものまでありますが、今回はTween24.jsを使ったウェブ制作の場面で使える実践的表現を紹介します。 基本的な導入方法や使い方は記事『新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました』をご覧ください。 CSSアニメーションとの違い CSSのtransitionプロパティや@keyframesを使ったアニメーションなどがあります。これらは比較的手軽にアニメーションを実装できるのがメリットです。手軽さとは引き換えに複雑なアニメーションや動的に変数が変わるようなアニメーションが苦手です。一方でJavaScriptを使った手法は、複雑なものや動的なアニメーションも実装できるメリットがありますが、CSSと比べると記述量も
最近見かける、粒子の粗いグラデーション！ほんの少しのCSSとSVGで実装できるの知ってた？
CSSとSVGでグラデーションにノイズを与え、粒子の粗いグラデーションを実装する方法を紹介します。 背景など通常のグラデーションに使用するだけでなく、暗くしてシャドウに使用したり、輝度とコントラストを上げてホログラムのような虹色のグラデーションとして使用することもできます。 Grainy Gradients by Jimmy Chion 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ノイズを加えたグラデーションを生成できるオンラインツール 実装: SVGノイズとCSSグラデーション SVGのturbulenceを使用する SVGとグラデーションを使用してCSS背景を作成する 明るさとコントラストを高める ノイズのカラーが均一でない CSSのブレンド機能 粒子の粗いグラデーションの使用例 さらに詳しく ブラウザのサポー
コピペでOK！セクション間のおしゃれな仕切りをカスタマイズして実装できる便利なWebサイト3つ
2021年9月14日 CSS, SVG, Webサイト制作 上下に並んだセクションの間に、斜めのラインや模様を取り入れると一気に印象が変わります。複雑な図形もSVGを使って実装できますが、一からコーディングするとなるとなかなか手間がかかります。そこで予めいろんな模様が用意されているWebサイトを使って手軽に挿入してみましょう！ ↑私が10年以上利用している会計ソフト！ SVG Shape Dividers Generator Tool SVG Shape Dividers Generator Tool 画面右側にカーソルをあわせるとパネルが表示され、模様が選択できます。左側のパネルから表示位置や色、模様の大きさなどが調整可能。「Animate」をオンにすると、キーフレームアニメーションで動くコードが生成されますよ。「COPY CODE」をクリックでCSSコードをコピーできます。 個性的な模
変幻自在なグラフィック表現！CSS, SVG, Canvasでマスクを使いこなせ - ICS MEDIA
近年、ウェブ技術の発展により、画像の一部だけを表示する「マスク表現」がよく見られるようになりました。一言でマスクと言っても、アニメーションやインタラクションとの組み合わせによりさまざまな表現が可能です。 また、どの技術を用いるかという選択も重要になります。マスク表現はCSS, SVG, Canvas APIといった技術で実現できますが、それぞれが異なる得意分野をもちます。 本記事の前半では、マスク表現を実現する技術について解説を行います。後半では実践的なマスク表現をいくつか紹介しながら、それぞれの実装方法を紹介します。いままで技術的に難しいと諦めていた表現が、マスクによって実現するヒントになれば幸いです。 ▼マスク表現の例（背景画像の一部を表示している） - Erika Moreira Portfolio マスクとは 本記事で紹介するマスク表現とは、画像の一部を切り抜く手法です。マスキング
商用利用無料！UIデザインに適した、シンプルで使い勝手がよいSVG完備のアイコン素材 -Iconic
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが無料で利用できるIconicを紹介します。 アロー・ホーム、サーチ・ショッピングカート・バッグ・スター・メールなど、UIデザインでよく使用されるアイコンが揃っており、フォーマットはSVGで利用できます。また、Vue, Reactのコンポーネントとしても利用できます。 Iconic Iconic -GitHub Iconicアイコンの特徴 Iconicアイコンの使い方 Iconicアイコンの種類 Iconicアイコンの特徴 Iconicは24pxのグリッドでデザインされたSVGフォーマットのアイコンです。160種類のアイコンが揃っており、今後もアップデートで増やしていくとのことです。 Iconic アイコンは26のカテゴリに、全160種類。 24pxグリッドに基づくピクセルパーフェクトなデザイン。
Web制作を楽にする便利なSVGツール53個まとめ
この記事では、Webデザイン制作の面倒な作業を楽にこなす、便利なSVGツール53個をまとめてご紹介します。 背景テクスチャやSVGシェイプから、オンラインSVGツールやSVG最適化ツールなど、SVGにまつわるあらゆるツールを揃えています。 新しいツールが見つかり次第アップデートしていく予定なので、ブックマークしておくと良いかもしれません。 Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ Web制作をもっと楽に！便利なSVGツールまとめ Haikei ユニークなSVGシェイプや背景、シームレスパターンを作成できるオンラインツールで、グラデーションや波ウェーブなど基本的なシェイプはほぼ揃います。 配色やサイズなど、本格的なカスタマイズができるのも特長で、作成したデザインはSVGやPNGファイルとして無料ダウンロード可能です。 Cool Backgrounds お好みの配色をつか
無料で簡単に色のカスタマイズができるアイコン集「SVGBOX」
「SVGBOX」はCDNを利用し、簡単に色のカスタマイズができる4174種類のアイコンを配布しています。 SVGBox https://svgbox.net/ アイコンを探すには、上記のURLにアクセスして「Iconsets」をクリック。 14種類のアイコンセットから好きなアイコンセットを選択。 アイコンの一覧が表示されます。 ここで、色の指定ツールをクリックすると…… カラーピッカーが立ち上がるので好きな色を指定します。 すると、表示されているすべてのアイコンの色が指定したものに変化しました。 アイコンにカーソルを合わせると現れるメニューからアイコンを表示するためのタグを取得することができます。 メニューの上から1つ目「アイコンへのリンクを取得」をクリックすると、アイコンを表示するためのURLが取得できます。ただし、このURLには色指定のパラメータが入っておらず、黒いアイコンが表示されて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コピペで楽々、CSSでできるボーダーアニメーション５選
WebサイトやスマホアプリのUIでよく使用するアイコンのSVGコードをコピペで簡単に利用できる -Akar Icons
CSS Filters Generator - Modify images with CSS/SVG only - JustCode.today