タグ

htmlとsvgに関するcolissのブックマーク (3)

  • 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: 元記事がアップデートされたので、当記事もアップデートしました。 はじめに ファビコンの設定方法 -ショートバージョン ファビコンの設定方法

    2024年版、ファビコン画像の作成方法と設置方法、さまざまなデバイスに対応させるには6種類のファイルが必要
    coliss
    coliss 2022/03/10
    最近のブラウザやデバイスに対応させる最小限のファビコンセット。
  • SVGでレイティングに使用するスター(星形)を実装するテクニックを解説

    Webページやスマホアプリで見かけるレイティングに使用するスター(星形)を実装するSVGのテクニックを紹介します。 一口にスターといってもさまざまな状態があり、オン・オフ、半分、アウトライン、サイズ変更など、さまざまな実装テクニックが解説されています。 Star Rating: An SVG Solution by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 実装の要件 スターを実装する基HTML アクセシビリティ SVGを再利用する方法 スターのスタイル 部分的なスターを実装する 1. SVGのmaskを使用した実装 2. SVGグラデーションを使用した実装 アウトラインスタイルのスターを実装する 1. SVGのmaskを使用した実装 2. SVGグラデーションを使用した実装 スタ

    SVGでレイティングに使用するスター(星形)を実装するテクニックを解説
    coliss
    coliss 2021/08/31
    Webページやスマホアプリで見かけるレイティングに使用するスター(星形)を実装するSVGのテクニック。
  • CSSで実装されたローディング・スピナーのアニメーションのまとめ | コリス

    シンプルなローディングのアニメーションから、複雑で楽しいローディングのアニメーションまで、CSSで実装されたローディングアニメーションを紹介します。 ほとんどが外部ファイルとclassを加えるだけの簡単実装で、いざという時用にブックマークしておきたいものばかりです。 下記の回転しながら整列するアニメーションもCSSのみで実装されています。

    CSSで実装されたローディング・スピナーのアニメーションのまとめ | コリス
    coliss
    coliss 2019/01/17
    CSSで実装されたローディングアニメーションのまとめ
  • 1