手軽で簡単、すぐに導入できるAIによるWebサイト多言語化サービス・「TranslateWith.ai」
TranslateWith.aiは手軽で簡単、すぐに導入できるAIによるWebサイト多言語化サービスです。 JSファイルを1つ読み込むだけでWebサイトを多言語化できる、というもの。導入まで1分もかからない手軽さが魅力です。AI駆動型で精度も良さげでした。 無料プランは1サイト/3言語/5000文字/月2000PVまで。有償プランは諸々の制約が軽減される点に加えてサブドメイン（en.example.comのようなもの）指定が可能なのでSEOにも有利だそうです。 尚、言語モデルやAPIの言及はありませんでした。個人事業みたいで連絡=創立者且つ開発者と話せますよと明記されていたので質問すれば答えてくれるかもしれませんね。 TranslateWith.ai
任意のWebサイトへのアクセスを不可にするChromeエクステンション・「Just Focus」 | かちびと.net
Just Focusは任意のWebサイトへのアクセスを禁止してくれるChrome拡張です。非常にシンプルなもので、アクセスを自分自身に禁止したいURLを入力すれば自動でJust FocusのWebページにリダイレクトされるようになる、というもの。作業に集中したいけど気になるWebサイトがあってたびたびアクセスしてしまう、という僕のような人間にはありがたいエクステンションです。URLは複数指定可能です。禁止開始すると、時間を計測、停止すればアクセスできるようになりますが、指定したURLは残るので再度設定せずともすぐにアクセス不可にできます。他にこれといった機能はありませんがこの手のツールはこれくらいの機能で丁度いいかもですね。 Just Focus
フリーで使えるシンプルな線画アイコンのセット・「Evericons」 | かちびと.net
EvericonsはCC0で使えるシンプルな線画アイコンのセットです。上図のようにシンプルな線画のみのSVG/PNGアイコンの他、Skechファイルなども同梱されていました。Webサイトに表記はありませんがダウンロードするとReadmeテキストがありますのでそちらにCC0のライセンス表記があります。ただし、変更される場合もあるので利用前にご確認下さい。 Webサイトにアクセスすると、メールアドレスの登録を促されますが、ダウンロードするだけなら不要なのでフォーム下部の「click here to download」をクリックすればすぐにDL出来ます。 Evericons
CSSスニペット：テキストリンクの下線をマウスホバーで波のようにアニメーションさせる | かちびと.net
Result リンクにマウスホバーすると波のようにアニメーションする、というもの 背景に波打つSVGが使われています。ちょっと面白いなと思ったので備忘録 css:root { --mainColor: #ff9800; } a { background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 3px 3px; color: #000; text-decoration: none; } a:hover {/*背景に波打つアニメーションをSVGで描く*/ background-image: url("data:image/svg+xml;ch
Matter.jsを使ってスクロール時に背景をアニメーションさせる・「Floaty Bubbles」
物理エンジンのMatter.jsを使って、背景をスクロールに応じてアニメーションさせるサンプルです。物理エンジンに沿った動きをするのでランダム性があります。なんとなく目にも優しい印象ですね。Matter.jsの存在を知らなかったので備忘録として。 Floaty Bubbles
SVGとCSSでアニメーションする円状プログレスバー
Result SVGとCSSで作れるサークルプログレスバーです css@keyframes load {/*アニメーション*/ 0% { stroke-dashoffset: 0; } } .progress {/*親要素*/ position: relative; display: inline-block; padding: 0; text-align: center; } .progress > li {/*プログレスバーを包括する子要素*/ display: inline-block; position: relative; text-align: center; color: #93A2AC; font-weight: 100; margin: 2rem; } .progress > li:before {/*カスタムデータ属性に設定したデータ名のテキストを表示*/ conten
グラデーションな下線
Result 下線がグラデーションになっているかのようにする 疑似要素をグラデーションにして1pxだけすき間を空け、下線がグラデーションになってるかのように見せます cssa {/*はみ出した部分はoverflow: hidden;で非表示にする*/ color:#111; display: inline-block; overflow: hidden; position: relative; font-size:2rem; text-decoration: none; vertical-align: bottom; } a:after {/*すき間をあける*/ background: linear-gradient(to bottom, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.8)) center 1.08em/100% 1px no-repe
Google Fontsの各フォントをタグ付けして探しやすく整理している・「Font Library」
Font Libraryは大量に存在するGoogle Fontsのフォントをタグでカテゴライズし、探しやすくするプロジェクトです。OSSとして公開されています。タグ付けし、整理して探しやすくしたもので、各アイテムはフォントページへリンクしているだけのシンプルなものとなっています。日本語圏だと選択肢が少ないのでそこまで手間を感じる方は多くないかもしれませんが、英字の場合は800種以上あるGoogle Fontsから探すのは結構苦労しますので探しやすくなるのは有難いですね。本ツールはOSSとして公開されており、ソースコードはMIT、タグのデータはCC0で公開されています。 Font Library
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ファミコン風のスタイルを提供してくれるCSSフレームワーク・「NES.css」
オープンソースで公開されている汎用的でミニマルなアイコンのセット・「Eva Icons」 | かちびと.net
任意のWebサイトからデータを抽出し、リンクカード化してくれるAPI・「Microlink」 | かちびと.net
ユニークな形状も作れるborder-radiusジェネレーター・「FANCY-BORDER-RADIUS」 | かちびと.net
SVGのフィルターを、結果を見ながら学べる・「SVG Filters」
CSSのみで作られたシンプルなアイコンセット・「ICONO」
日本語でも使える、任意の検索キーワードに関連するカラーを提案してくれる・「Picular」
シンプルで直感的なSCSSフレームワーク・「FICTOAN」
一通りのUIコンポーネントを揃えた軽量なCSSフレームワーク・「Mustard UI」
軽量で多機能なモダンCSSフレームワーク・「Teutonic CSS」
ライブラリやエディタ、フレームワーク等の多種多様なチートシートをまとめている・「Devhints」
CSSグラデーションのサンプルを公開しているWebサイトをまとめた・「gradient-backgrounds」
