detailsタグを使った開閉コンテンツのスタイルサンプルいろいろ
Result detailsタグを使った開閉コンテンツのスタイリングサンプル集です。 JSは開閉時のアニメーションに使用されているので、無くても開閉やアイコンのアニメーションに影響はありません。 css[data-css-icon] { --animdur: .3s; --loading-animdur: 0.8s; --animtf: ease-in; --bdw: 2px; --bdrs: 50%; --bgc: transparent; --c: currentcolor; --dots-bgc: silver; --dots-size: 0.5rem; --icon-size: 1rem; --size: 2.5rem; align-items: center; cursor: pointer; display: flex; justify-content: space-betwe
商用でもクレジット無しで無料で使える大量のサウンドエフェクトを配布する・「Mixkit – Download free sound effects」
Mixkitは以前ご紹介した、商用でも無料、クレジット表記無しで使える動画を配布するビデオストックサイトで、新たに同じ条件のライセンスでサウンドエフェクトを大量に公開したようなのでご紹介。 用意されたSEの数は把握できませんが、遷移時に利用できるもの、自然の音やテクノロジー関係の音、動物や物流関係の音、人が出す音、戦争に関する音、楽器やライフスタイルなどの大きなカテゴリに分けられており、更にその下にも小さなカテゴリが作られ、それぞれの項目に多数のSEが公開されています。 相当な量がストックされていて、全てその場で視聴及びダウンロードが可能となっています。SE探しの定番サイトになりそうなレベルの多さです。 ライセンスは独自ライセンスですが、YoutubeやSNSへの動画のお供、ビジネスプロジェクトや映画、CM、ゲームや教育関係など様々なシーンで利用可能だそうです。が、何しても良いわけではなく
Moment.jsライクに使える2KBほどの軽量な日付操作ライブラリ・「Day.js」
Day.jsはMoment.jsライクに使える2KBほどの軽量な日付操作ライブラリです。Moment.jsとほぼ同じ使い方で同じように操作する事が出来ます。 他ライブラリにも依存せず、Moment.jsを使っている方なら学習コストもほぼ不要でファイルサイズもかなり軽量になっています。 Moment.jsにあるような痒いところに手が届く機能を削いだ分、軽量化されている、みたいな感じでしょうか。国際化も進んでおり、翻訳者も募集されています。 ざっくり使い方です。今回は用意されているCDNを使います。unpkgの他、cdnjsやjsDelivrにも用意されているみたいです。 <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>まずスクリプトを読み込みます。 <script>dayjs().format()</scr
簡易的なダークモード・その2
Result 以前書いたCSSで出来る簡易的なダークモードの改良版です。 以前のコードだと画像や動画なども反転させてしまい、機能しなかったので画像や動画も含められるように。 尚、以前同様にダークモードのスイッチにはJSを使用していますのでCSSのみで施工したい場合は便宜変更ください。 css.inverted { filter: invert(100%) hue-rotate(180deg); } .inverted img, .inverted iframe{filter: invert(100%) hue-rotate(180deg); }方法はいたって単純で、反転させたくない要素を再反転させればOKです。 たとえばvideoタグも追加したい場合は .inverted img, .inverted iframe, .inverted video{filter: invert(100%)
任意のキーワードで検索も可能な超シンプル軽量で使いやすい無料のWindows用クリップボードマネージャ・「Snatch」
Snatchは任意のキーワードで検索も可能な超シンプル軽量で使いやすい無料のWindows用クリップボードマネージャです。 起動はショートカット(ctrl+shift+v)、表示されるのは過去にコピーした内容と検索窓のみという超シンプルなUIです。 履歴をクリアしない限りはSnatch導入後にコピーした内容は全て検索対象となるようです。今後は画像のコピー情報の保持機能やテーマ変更機能なども追加されるかも、だそうです。 クリップボードマネージャはなんとなく肌に合わずに使っていませんでしたが、こちらは合うかも、と思ったので使ってみる事にします。不穏な名前は覚えやすいけど他に何かなかったんでしょうかね・・ｗ 個人的にあまり良い印象の言葉ではないですね。 本アプリはWin向けに作られており、Windows Storeからダウンロードする形で入手します。 Snatch
さまざまなタイプのSVGの背景を手軽に作れるWebアプリ・「BGJar」
BGJarはさまざまなタイプのSVGの背景を手軽に作れるWebアプリです。既に用意されている雛型を元に好みの形にカスタマイズしてコードをコピーしたりDL出来る、というもの。 シンプルなものやアニメーションするもの、波のような形状など、どこかで見たことがあるような背景を直感的な操作で作成する事が出来ます。 編集できる要素はサイズ、背景やオブジェクトの色やグラデーションなど。オブジェクトの編集等は雛型によるみたいです。 配布されるコードのライセンスはCC BY 4.0との事なのでクレジット表記すれば商用でも利用可能にはなっています。 BGJar
細かい設定も可能な、画像にさまざまなカラーフィルターをかけられるCSSライブラリ・「filters.css」
filters.cssは細かい設定も可能な、画像にさまざまなカラーフィルターをかけられるCSSライブラリです。 昔ご紹介したInstagram.cssなどのように、任意の画像にclassを付与するだけでカラーフィルターをかけられる、というもの。 こちらは細かい設定も可能で、より使いやすく設計されている印象です。 サンプル 動作テストです。フィルターがかかっているのが確認出来ましたでしょうか。 <link href="https://unpkg.com/filters.css" rel="stylesheet">↑ CDNが用意されているので手軽に試せますね。 <img class="hover-blur-2" src="foo.jpg" />↑ 例えば上記ならマウスホバー時にfilter: blur(2px);をかける事が出来ます。 他にもgrayscaleやcontrast、satura
スクロールに応じて任意のテキストにアニメーションしながらハイライト
Result スクロールするとテキストにアニメーションしながらハイライトする、というもの。 通常のハイライトよりも目を惹く印象です。コードはVanillaとなっています。 JavaScript(function (document) { const markers = [...document.querySelectorAll('mark')]; const observer = new IntersectionObserver(entries => { entries.forEach((entry) => { if (entry.intersectionRatio > 0) { entry.target.style.animationPlayState = 'running'; observer.unobserve(entry.target); } }); }, { threshold:
プライバシーに配慮したシンプルで使いやすいオープンソースのGoogleアナリティクス代替アクセス解析ツール・「Plausible」
Plausibleはプライバシーに配慮したシンプルで使いやすいオープンソースのGoogleアナリティクス代替アクセス解析ツールです。 通常のアクセス解析ツールとしてサービス展開していますが、OSSとしてもソースコードが公開されています。 Cookieは使用せず、GDPR、CCPA、およびPECRに完全に準拠しているそうです。 シンプルにアクセスを解析し、コンバージョン向上を目指す目的を達成できるような機能のみに絞られており、1ページのみでデータを確認出来るようになっています。 また、Webページ読み込みを阻害しないよう軽量な追跡スクリプトとなっており、GAが17.7 KBなのに対し、Plausibleは1kbのスクリプトのみで済みます。 データのレポートは毎週/毎月なので提出の指示が可能ですが、データ自体もオープン/クローズの選択やクローズにしつつ特定のユーザーとの共有が可能となっています
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
任意のSVGファイルをアップロードして色を変更したり背景を追加したりできるオンラインSVGエディタ・「Iconscout Icon Editor」
Googleフォントを使ったテキストのみのシンプルなロゴを作成、SVGやPNGでダウンロードできる・「Typography Logo Maker」
沢山のオープンソースなアイコンプロジェクトを収集し、横断検索したりオリジナルのパックを作成してダウンロードできる・「Icônes」
ジグザグや方眼紙、ストライプなど、シンプルなパターン背景をCSSのコードで提供する・「CSS Background Patterns」
任意の要素をドラッグ移動出来るようにする軽量スクリプト・「dragmove.js」
くっきりしていて見やすいシンプルなオープンソースの線画SVGアイコンパック・「Phosphor」
小さなサイズでも形状を認識できるようデザインされたオープンソースのミニマルなアイコンセット・「Radix Icons」
シンプルで汎用的なオープンソースのアイコンセット・「Mono Icons」
背景やポーズ、性別や顔を変更して好みのイラストを作れる・「Sapiens Character Builder」
テキストからダイアグラムやフローチャート、ガンチャートなどを作れる・「Quick Diagram」
OSSでソースコードも公開されているJavaScript製のシンプルで使いやすいフローチャート作成Webアプリ・「Drawflow」
