CSSのみで昔のフィルム映像みたいなアニメーションノイズ
Result 👆 こういうやつをCSSだけで実装する、みたいなやつです。セピア込みVer.もありました。 動画の上にかぶせればJS不要で古い映像みたいな演出が出来ますね。 css:root { --trsn: all 0.5s ease 0s; --black: #000; } *, *:before, *:after { position: absolute; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--black); perspective: 100vmin; } .content { width: 100vw; h
URLに2文字加えてGitHub上のWebページやコードをVSCode風のUIで表示する・「github1s」
github1sはURLに2文字加えてGitHub上のWebページやコードをVSCode風のUIで表示するWebアプリです。 https://github.com/conwnet/github1s例えば上のようなURLを https://github1s.com/conwnet/github1sというように、github.comをgithub1s.comとするだけでVSCode風のUIでGithubを閲覧できるようになる、というもの。昔別の用途ですが似たようなものがありましたね。Youtubeをなんか便利にする、みたいなのだった気がする。 各ブラウザのエクステンションも用意されていますが、前述のようにGithubのドメインに1sを加えるだけなので無くても良さそうですね。 勿論ツリーもコードもVSCodeライクになりますのでユーザーの方なら見やすくなるかもしれませんね。こちらのアプリはOSS
Webサイトマップをビジュアル化して見積もりを計算できる・「Octopus.do」
Octopus.doはWebサイトのサイトマップをビジュアル化して見積もりを計算、シェアできる見積もり計算アプリです。 ページごとに作成する項目を書き、工数を設定すると自動で計算してくれる、というもの。単位は時間となっており、通貨は円にも対応しています。なかなかユニークで便利なツールでした。 というわけで使用感です。 ざっくり使い方 概ね直感で使えると思います。作成予定のコンテンツや作業内容をページ毎に書き、かかる時間を設定します。（※右に0hとあるのは「Oh」ではなくて「0h(0時間)」です。） 各ページに工数を設定したら右上の$マークのボタンをクリックします。メニューが開くのでCurrencyをJapanese YENに設定し、税（TAX）を日本の消費税率の数値に設定します。これで自動計算してくれるようになります。また、別途かかる費用がある場合は項目を追加できるようになっています。 作
シンプルで軽量、扱いやすいベーシックなCSSフレームワーク・「minstyle.io」 | かちびと.net
minstyle.ioはシンプルで軽量、扱いやすいCSSフレームワークです。minstyleの頭文字をプレフィクスに、要素の名称を付与する命名規則となっており、ユニーク且つ分かりやすい、学習コストを低くしつつも既存Webサイトのclassとのコンフリクトが無い設計で中途導入できるのが魅力です。例えば以下のような書き方です。 <blockquote class="ms-blockquote ms-blue"> <em>hogehoge</em> </blockquote>これで背景が青のblockquoteとなります。 使いやすいと感じるかは人それぞれかもしれませんが、個人的には命名規則を覚える必要がほぼ無いというだけでも使いやすそうに思いました。勿論RWD対応となっています。ライセンスはMITとのこと。 minstyle.io
CSSスニペット：CSSでinputに入力したらlabelのスタイルが変更されるようにする | かちびと.net
Result :placeholder-shown疑似クラスを使ってlabelのスタイルを入力の有無でスイッチします css.input-label { color: blue; } .input :not(*):placeholder-shown, .input-label {/*入力されたとき*/ color: green; } .input-control:placeholder-shown ~ .input-label {/*入力されてないとき*/ color: red; }html<div class="input"> <input class="input-control" id="input" placeholder="hogehoge" /> <label class="input-label" for="input">入力すると色が変わります</label> </div>
スクロールアニメーションを実装できる超軽量且つ非依存のライブラリ・「Sal.js」
Sal.jsはページのスクロールに応じて動作するアニメーションエフェクトを実装出来る非依存型のJavaScriptライブラリです。軽量で他ライブラリ不要で動作、導入も簡単と、良い仕様な印象でした。エフェクトはカスタムデータ属性で管理できます。 <div data-sal="slide-up" data-sal-delay="300" data-sal-easing="ease-out-bounce" ></div>楽でいいですね。ライセンスはMIT。 Sal.js
CSSスニペット：アニメーションエフェクト付きのtoggleボタン | かちびと.net
Result CSSのみで実装したアニメーションエフェクト付きのtoggleボタンです 各ボタンのスタイルはPenをご参照ください css/* Button 1 */ #button-1 .knobs:before {/*左右に移動するボタンのスタイル*/ content: 'YES'; position: absolute; top: 4px; left: 4px; width: 20px; height: 10px; color: #fff; font-size: 10px; font-weight: bold; line-height: 1; text-align: center; padding: 9px 4px; background-color: #03A9F4; border-radius: 50%; transition: 0.3s cubic-bezier(0.18, 0
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VSCodeやAtom、Sublimeなど、様々なテキストエディタのカラーテーマを作成、公開しているプロジェクト・「RAINGLOW」
ファミコン風のスタイルを提供してくれるCSSフレームワーク・「NES.css」
ドラッグ&ドロップでWebページを作成できるスクリプト・「VvvebJs」 | かちびと.net
ベースにしたい色を指定するだけでカラーパレットを生成するOSSなカラーツール・「PALX」 | かちびと.net
任意のWebサイトからデータを抽出し、リンクカード化してくれるAPI・「Microlink」 | かちびと.net
様々なスマフォアプリのUI/UXをアニメーションで確認できるデザインギャラリー・「Mobile Patterns」 | かちびと.net
ログイン不要で使えるシンプルなビデオチャット・「Gotalk」
各UIコンポーネントも兼ね備えたオープンソースのモバイルアプリ向けフレームワーク・「Galio」
ミニマルなスタイルのHTML5製ミュージックプレイヤー・「cPlayer」 | かちびと.net
HTMLメールをテンプレートから手軽に作成、管理できるオンラインエディタサービス・「Stripo」 | かちびと.net
非依存型のミニマルなプレゼンテーションライブラリ・「presentr」
要素にYoutubeの動画IDを含めるだけでポップアップ再生できるようにするスクリプト・「GRT Youtube Popup」
イージングに使われるペジェ曲線に合わせた法則でカラースキームを作り出す・「ColorBox」 | かちびと.net
