CSS疑似要素にSVGを指定する方法 | mktia's note
CSS 疑似要素の ::before や ::after は文字だけでなく，SVG を指定することもできます． クラスを指定するだけでデザインが適用できるので，毎回 HTML ソースに追加するような手間なく SVG を使用できるようになるので超楽です． 大きさ指定不要の場合 最も簡単なのは content に直接 URL を指定してしまうことです． url() を使用することで，SVG ファイルを相対パスで呼ぶことができます． p::before { content: url("../assets/example.svg"); } しかし，この方法では SVG のサイズを変更することができません． 大抵の場合は大きさを変更しないと見た目が大変なことになるので，次の方法を使います． 大きさ指定する場合 content ではなく，background-image として SVG を読み込むと，
実装の仕組みが分かれば簡単！画像の一部を切り取るカットアウトを実装するCSSとSVGのテクニック
Webページやアプリで見かける、通知や注目の役割を担うカットアウト（画像の一部を切り取る）を実装するCSSとSVGのテクニックを紹介します。 画像に小さなバッジをつけたり、画像をグループ化する際に重ねたり、ヘッダやヒーローで画像を重ねたり、さまざまなUIで見かけます。 Thinking About The Cut-Out Effect: CSS or SVG? by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カットアウトとは アバター画像で見かけるカットアウト カットアウトの実装 1: clip-pathを使用する カットアウトの実装 2: CSSのマスク カットアウトの実装 3: SVGのマスク アバター画像を重ねるカットアウト カットアウトの実装 1: clip-pathでマスク カットアウ
SVGのオブジェクトごとにCSSで色を切り替える - わすれたあかんえ
デザインpsdを見ながらhtmlでコーディングするとき、たくさん画像を書き出しますよね。 たとえばpngのアイコンを作る場合、形が同じでも色が違えばpngファイルをたくさん書きださなければいけません。色だけ変えたものをひとつずつ、@2xサイズも用意してちまちまと……書き出して…… やってらんないっすよ！ せめて、形が同じなら使いまわしたい…… そう！SVGを使えば、同じオブジェクトを使ってCSSで色だけ変えたものを量産できるのです！ 「それだったらwebフォントでいいじゃん」と思われるかもしれませんが、webフォントはアイコンひとつにつき1色しか使えませんよね？SVGでやればアイコンひとつでも複数色使うことができます。 このSVGアイコンを使いまわして、 こんなかんじでカラフルなアイコンを量産しますよー！ ベクターでアイコンを作成 アイコン作るのがめんどくさい人はicomoonから適当なア
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
WordPressの投稿でSVG画像を使えるようにしても、OGPやTwitter Cardsで対応してなかった件 – Rriver
WordPressの投稿でSVG画像を使えるようにしても、OGPやTwitter Cardsで対応してなかった件 イメージオプティム でPNG画像を最適化すると、やたらと時間がかかるなぁと思ってTwitterでつぶやいたら「さっさとSVGに行けと言う啓示なのでは？笑」というコメントをいただきました（笑）。最近このブログに使う画像はSVGに最適なイラストが多いですし、ファイルサイズを小さくできて高解像度のディスプレーにも対応できるので確かにメリットがありそうです。 そこで早速WordPressの投稿にSVG画像をアップしようと思ったんですが。。。メディアアップローダーでは以下のようなメッセージが出てきてアップさせてもらえませんでした。デフォルトではサポートされてないんですね。ちょっと驚きました。 ということで、今回はWordPressの投稿でSVGを使うために必要なカスタマイズや関連する設定
実は簡単！3分で分かるSVGアイコンの作り方 | WebNAUT by Beeworks
※この記事は2017年3月30日に執筆された記事です。現在は仕様が異なる可能性があります。 スマートフォン、Retinaディスプレイ、など高解像度ディスプレイへの対応にSVGが注目されるなか、WebNAUTでもリニューアルに伴いアイコン類を全てSVGにしました。この記事では、サイトのリニューアルや立ち上げなど、沢山のアイコンをSVG形式で作るときに役立つ方法を紹介します。 SVGとは？ “Scalable Vector Graphics”の略称であり、簡単に言うとweb上で使える拡縮可能なベクター画像です。主に下記のようなメリットがあります。 スマホ対応・Retina対応も1つのファイルでOK 同じデザインなら、スマホ用、hover用、色違い…、などいくつもpng画像を用意する必要はありません。また、結果的に画像が減るのでHTTPリクエスト数の削減にも繋がります。 後からサイズや色の調整が
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ZeroGram ゲームプログラミングの素