MingCute Icon _ Carefully Designed Icon LibraryMingCute Icon is a set of simple and exquisite open-source icon library. Whether you're a designer or a developer, it's perfect for use in web and mobile.
SVG形式のファビコンを設置しよう
2022年4月27日 SVG, Webサイト制作 つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！ ↑私が10年以上利用している会計ソフト！ SVGファビコン設置方法 1. SVG形式のファビコン用画像を用意 グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。 SVG形式で保存します。 2. HTMLファイルに記述 あと
アニメーション実装の選択肢のひとつになると思う。Lottieを試してみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
サイト制作時に今は当たり前のようにおしゃれなアニメーションがついてる時代がきましたね。 CSS3で実装できることも増え、あんまりゴリゴリJavaScriptでってことは減ってきてる気がします（もちろん必要なときはいっぱいあるのでケースバイケースですが）。 制作者としては、意図した通りのアニメーションをつくりたい、それもなるべく手間をかけずに、という思いがあるのではないでしょうか。 そんな悩みを解決してくれるかもしれない「Lottie」を試してみました！ ※今回、After Effectsの使い方はありません、ごめんね。JavaScript側の組み込み方の説明です。 Lottieとは Airbnb制作のiOSやAndroidにも対応したアニメーション用のライブラリです。Adobe After Effectsで作ったアニメーションを、そのままWebにもってこれるやつらしい。 一部使えない機能も
CSSとSVGでチェックボックスを装飾しよう！
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
SVGで作る非長方形なヘッダ画像いろいろ
Result インラインに書いたSVGを画像に重ねる 背景と色を合わせれば簡単にユニークな形状のヘッダ画像を実装できる css.card { width: 32%; max-width: 100%; margin: 0 0 4rem; background-color: #ddd; } .card .wrap-image { position: relative; } .card .wrap-image img { width: 100%; height: auto; } .card .wrap-image svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; } .card .wrap-image svg polygon, .card .wrap-image svg path { fill: #d
We Love SVG - Google Fonts for icons | Icons8
<script type="text/javascript" src="//web.archive.org/web/20151204075254/https://cdn.rawgit.com/icons8/bower-webicon/v0.10.7/jquery-webicon.min.js"></script> Flat ColorWin10Font AwesomeFoundationMaterialGlyphiconsIcomoonIonWebhostinghubEntypoElusiveWPFMfglabsRaphaelSimple LineWeatherLsfLineconsMeteoconsMetrizeOcticonsIconicMakiOpenwebiconsStroke7TypiconsZocialBrandicoFontelicoStateface <!DOCTYPE h
アイコンを探す手間がなくなる！30種類の有名どこ全9,769個のSVGアイコンを一元管理・一行で簡単に利用できる -We Love SVG
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 あとは、使用するアイコンのコードを書くだけです。 アイコンをクリックするとコードが表示されるので、そ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
