あらゆる言語に対応の、AIによる音声書き起こしが可能なオープンソースのデスクトップアプリ・「Vibe」
イージングをCSS関数で管理する
Result 使わせてもらいそうなのでメモ。イージングアニメーションをCSS関数で管理しましょう、という内容です。 普段さほど使わないので思いつきませんでしたが皆さん既に取り入れてそうですね。 css:root { --ease-in-quad: cubic-bezier(.55, .085, .68, .53); --ease-in-cubic: cubic-bezier(.55, .055, .675, .19); --ease-in-quart: cubic-bezier(.895, .03, .685, .22); --ease-in-quint: cubic-bezier(.755, .05, .855, .06); --ease-in-expo: cubic-bezier(.95, .05, .795, .035); --ease-in-circ: cubic-bezier(.
CSSだけでヒーローイメージのセクションにシンプルなパララックス効果
Result CSSだけで簡単なパララックス効果を出そう、というもの。既にありふれた情報かもしれませんが。 内容としては3D空間を作り、ヘッダに疑似要素を作って背景画像を設定、z軸に沿ってオブジェクトを遠ざけるよう設定します。 header::before { transform: translateZ(-4px); } header div { transform: translateZ(-2px); }また、3D空間の中でフラット描画されるよう、親要素にtransform-styleを設定しておきます。 header { transform-style: preserve-3d; }これだけだと単に縮小された状態になってしまうのでscaleで戻してあげる必要があります。 scaleで戻すには計算が必要です。Googleの記事では以下の計算法が使われています。 scale = (pers
HTML/CSS/JavaScriptで作られた汎用的なCC0のコンポーネントを動作確認したりコードをコピーしたり選んでまとめてダウンロードできる・「html.systems」
html.systemsはHTML/CSS/JavaScriptで作られた汎用的なコンポーネントをまとめたプロジェクトサイトです。 各コンポーネントはその場で動作や表示の確認をしたり、コードをコピーしたり、複数コンポーネントを選んでまとめてダウンロードできるようになっています。 コンポーネントはよく使われるものが60種ほど集められてて、それぞれレスポンシブに対応してるかどうか、印刷する場合はどのようになるか等の確認も可能です。 これらのコンポーネントはCC0で配布されており、誰でも自由に使えるようになっています。また、Githubでもコンポーネントが纏められています。 html.systems
Webアプリ等に手軽にキーバインドを実装できるスクリプト・「whenipress」
whenipressは開発したWebアプリ等に手軽にキーバインドを実装できるスクリプトです。 ※上記サンプルはiframeなので中をクリックしてから動作テストしてください 軽量で非依存、シンプルなコードでキーバインドを実装する事が出来ます。 <script src="https://cdn.jsdelivr.net/npm/whenipress@1.7.2/dist/whenipress.js"></script> <script> whenipress("a", "b", "c").then((e) => alert("aとbとcが同時に押されました！")); </script>基本的にはスクリプトを読み込んでキーに対する動作を記述すればOKです。 詳しい使い方はドキュメントをご参照ください。ライセンスはMITです。 whenipress
Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」
Josh.jsはAnimate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプトです 他のJSライブラリを必要としない非依存型で、アニメーションにはAnimate.cssを使用するため2kbと非常に軽量です 使い方も簡単です <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" /> <script src="https://cdn.jsdelivr.net/npm/joshjs@1.0.0/dist/josh.min.js"></script>Animate.cssとJosh.jsを読み込みます const josh = new Josh({ initClass: "foo", animat
Electronで出来たオープンソースの開発者向けエディタ機能付きコードスニペット管理ツール・「massCode」
massCodeはElectron製のOSSな開発者向けコードスニペット管理ツールです。Monaco Editorが採用されており、スニペット管理ツールとコードエディタを兼用する事ができます スニペットは様々なプログラミング言語に対応しておりタグやフォルダでカテゴライズできる他、1つのタイトルで複数スニペットを登録出来たり全文検索出来たりと、最低限の機能を備えつつ痒いところにも手が届く、といった印象でした スニペットはショートカットでコピーできたり保存も自動保存だったりと非常に使いやすい仕様となっています。これでオープンソース、クロスプラットフォーム対応とは恐れ入ります。有難く使わせてもらいます。ライセンスはAGPLとのこと。 massCode
Flexboxでやりたいレイアウトを、ビジュアルを見ながら選択肢を選んで作成、コードをコピーできる・「Flex」
FlexはFlexboxでやりたいレイアウトを、ビジュアルを確認しながら選択肢を選んで作成、コードをコピーできるシンプルなWebアプリです。設定項目の多いFlexboxは様々なレイアウトに対応できる反面で、覚えなければならない事も多く、正直言って面倒です。使うたびに検索してる、なんて方もいるかもしれませんね。 こちらはそんなFlexboxを、完成形を確認しながら選択肢を選ぶだけでコードを完成出来る、というもの。動作するチートシート、みたいな感じでした。 使ってみる 使い方はとても簡単です。まずは下にスクロールします。アイテムの数やflex-flowを聞かれます。次にwrapやjustify-contentなどを聞かれるので選択肢を選んでいく、という流れ。最終的にできたレイアウトを実装する為のCSSコードをコピーすればOKです。僕の下手な説明を読むより、使ってみた方が早いかも、という程度には
オープンソースで公開されているPinterestクローンのソフトウェア・Pinry
OSSで公開されている、Pinterestクローンソフトウェア・Pinryのご紹介です。すでに類似サイトも沢山あるので今更感あるかもですけど、アイデア次第で用途の幅も広がると思うのでメモ。 画像や動画、Webページをシェア出来るソフトウェア。PinterestライクなWebサイトを構築したいなら一考しても良さそうですね。Pythonで作られています。 昨年あたりから人気が出た画像共有サイト、PinterestのようなWebサービスを作成出来る、というOSSです。ライセンスはGPLみたい。 公式の動作サンプルです。 動作サンプル ↑ スクショです。見るからにクローンです。 ↑ 投稿用のブックマークレットや投稿画面もそのまま。 作ってみたいけど時間が足りない・・うぐぐ・・詳細は以下よりどうぞ。 Pinry
Web制作関連のニュースレター配信サイトいくつか
週一でメールマガジンを配信するニュースレターサイトをよく見かけるようになったのでいくつか登録してみました。その週のダイジェスト的な内容なので割と分かりやすいし、毎日見る必要が無いので色々楽です。 中にはアレな内容の事もありますけど最近はほとんどWebを見ないので週一で大まかな出来事が分かるメルマガがちょっと助かってます。ふと思ったときに探したら結構あったので備忘録として。それぞれアーカイブもあるので中身をチェックしてから登録するかしないかを決められます。 HTML5 Weekly HTML5やWebGLなどの話題を中心に扱うメルマガ。 HTML5 Weekly JavaScript Weekly JSのメルマガです。Yahoo! YSlowを作ったスティーブ氏もオススメ・・との事。 JavaScript Weekly CSS Weekly CSSの。アーカイブも見やすくて良い。読者にジェダ
チェックボックスとラジオボタンをスタイリングする為のjQueryプラグイン・iCheck.js
checkboxesとradioボタンをスタイリングするjQueryのプラグインです。カスタマイズ性に優れており、使い方も手軽そうだったので備忘録的にご紹介します。 よくあるプラグインですけど、使いやすそうだったのでメモ。 checkboxesとradioボタンをスタイリングするライブラリ。IE7にも対応しています。 かわいい。 スタイルは最初からいろいろと用意されていますのでカスタマイズの参考にもなりますね。 コード<script src="jquery.js"></script> <script src="jquery.icheck.js"></script>コアとプラグインを読み込みます。 $('input').icheck();初期化します。 $('input').icheck({ handle: '', // 'checkbox'か'radio'とすればどちらかに限定できる ch
WordPressをクライアントワークで使用する際に覚えておくと良さそうな管理画面のカスタマイズ用コードいろいろ
今日もWordPressの記事です。今日は、クライアントワークで、納品物としてWordPressを使うときに覚えておくと便利な管理画面をカスタマイズ出来るコードのまとめです。ほとんど地味な施工ですけど。 今日はクライアントワーク向けの管理画面カスタマイズコードをいろいろご紹介します。こちらも、昨日お知らせしたWordPressスニペットに掲載しますのでそちらでもご確認頂けます。と言うわけで宣伝でした。 WordPressスニペット まだ未完成ですけど暇を見て使いやすく出来たらなぁと思います。 更新をWebに疎いクライアントさん側で行うのであれば、管理画面の利便性の向上は更新モチベーションに繋がりますし、工数分の売り上げ増加にも繋げられます。地味だけど、覚えて置いて損はありません。 では、コードいろいろです。コピペはあまり良く無いですけど、今日はまとめ記事なのでコードの解説は割愛させてくださ
Facebookライクなモーダルボックスを実装するスクリプト・Mikes Modal Library
Facebookライクなモーダルボックス を実装するスクリプト、Mikes Modal Libraryのご紹介。Facebookはもうや ってないですけど、汎用的でいいの では無いかなと。jQueryを使用しま す。 汎用的なモーダルボックスです。jQueryのプラグインとなっています。 写真の脇にコメントするエリアがある、みたいなやつ。ボックス要素をモーダルウィンドウとして呼び出しています。コンテンツを注目させたい手法としてはベーシックなものですので割りと使用頻度は低くないのでは。 公式の動作サンプルです。 Sample コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script> <script src="mikes-mo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モダンなCSSを使ったレイアウトのコードスニペットを紹介する・「SmolCSS」
架空の都市の地図を作成出来るオープンソースのWebアプリ・「Map Generator」
Gistに書いたコードを管理するアプリ・「GistBox」
CSS3を使ったエレメントを簡単に作成出来るChrome拡張・「CSS-SHACK」
CSSによる三角形をジェネレートできる・「CSS triangle generator」
Pinterestライクなレンガ風のレイアウトを構築する為のライブラリ・Nested
HTMLで作るクリスマスカードのコード例を紹介する・Codecademy Code Cards
